mirror of
https://github.com/zadam/trilium.git
synced 2026-07-05 09:09:36 +02:00
feat(mobile/search): group search options in dropdown
This commit is contained in:
@@ -908,6 +908,7 @@
|
||||
"debug": "debug",
|
||||
"debug_description": "Debug will print extra debugging information into the console to aid in debugging complex queries",
|
||||
"action": "action",
|
||||
"option": "option",
|
||||
"search_button": "Search",
|
||||
"search_execute": "Search & Execute actions",
|
||||
"save_to_note": "Save to note",
|
||||
|
||||
12
apps/client/src/widgets/react/ResponseContainer.tsx
Normal file
12
apps/client/src/widgets/react/ResponseContainer.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ComponentChildren } from "preact";
|
||||
|
||||
import { isMobile } from "../../services/utils";
|
||||
|
||||
interface ResponsiveContainerProps {
|
||||
mobile?: ComponentChildren;
|
||||
desktop?: ComponentChildren;
|
||||
}
|
||||
|
||||
export default function ResponsiveContainer({ mobile, desktop }: ResponsiveContainerProps) {
|
||||
return (isMobile() ? mobile : desktop);
|
||||
}
|
||||
@@ -12,7 +12,7 @@ import { t } from "../../services/i18n";
|
||||
import server from "../../services/server";
|
||||
import toast from "../../services/toast";
|
||||
import tree from "../../services/tree";
|
||||
import { getErrorMessage } from "../../services/utils";
|
||||
import { getErrorMessage, isMobile } from "../../services/utils";
|
||||
import ws from "../../services/ws";
|
||||
import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
|
||||
import Button from "../react/Button";
|
||||
@@ -21,6 +21,7 @@ import { FormListHeader, FormListItem } from "../react/FormList";
|
||||
import { useTriliumEvent } from "../react/hooks";
|
||||
import Icon from "../react/Icon";
|
||||
import { ParentComponent } from "../react/react_utils";
|
||||
import ResponsiveContainer from "../react/ResponseContainer";
|
||||
import { TabContext } from "./ribbon-interface";
|
||||
import { SEARCH_OPTIONS, SearchOption } from "./SearchDefinitionOptions";
|
||||
|
||||
@@ -84,15 +85,30 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabCon
|
||||
<tr>
|
||||
<td className="title-column">{t("search_definition.add_search_option")}</td>
|
||||
<td colSpan={2} className="add-search-option">
|
||||
{searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }) => (
|
||||
<Button
|
||||
size="small"
|
||||
icon={icon}
|
||||
text={label}
|
||||
title={tooltip}
|
||||
onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
|
||||
/>
|
||||
))}
|
||||
<ResponsiveContainer
|
||||
desktop={searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }, index) => (
|
||||
<Button
|
||||
key={index} size="small" icon={icon} text={label} title={tooltip}
|
||||
onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
|
||||
/>
|
||||
))}
|
||||
mobile={
|
||||
<Dropdown
|
||||
buttonClassName="action-add-toggle btn btn-sm"
|
||||
text={<><Icon icon="bx bx-plus" />{" "}{t("search_definition.option")}</>}
|
||||
noSelectButtonStyle
|
||||
>
|
||||
{searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }, index) => (
|
||||
<FormListItem
|
||||
key={index} icon={icon}
|
||||
description={tooltip}
|
||||
onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
|
||||
>{label}</FormListItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
<AddBulkActionButton note={note} />
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user