gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

fix(react): alignment and size of search/bulk action buttons

Browse Source
This commit is contained in:
Elian Doran 2025-08-27 17:53:27 +03:00
parent 2152ca7ba6
commit a2a6c67350
No known key found for this signature in database
3 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/client/src/widgets/bulk_actions/BulkAction.tsx
View File

@ -1,6 +1,7 @@
import { ComponentChildren } from "preact";
import { memo } from "preact/compat";
import AbstractBulkAction from "./abstract_bulk_action";
import HelpRemoveButtons from "../react/HelpRemoveButtons";
interface BulkActionProps {
label: string | ComponentChildren;
@ -24,19 +25,11 @@ const BulkAction = memo(({ label, children, helpText, bulkAction }: BulkActionPr
{children}
</div>
</td>
<td className="button-column">
{helpText && <div className="dropdown help-dropdown">
<span className="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div className="dropdown-menu dropdown-menu-right p-4">
{helpText}
</div>
</div>}
<span
className="bx bx-x icon-action action-conf-del"
onClick={() => bulkAction?.deleteAction()}
/>
</td>
<HelpRemoveButtons
help={helpText}
removeText="Delete"
onRemove={() => bulkAction?.deleteAction()}
/>
</tr>
);
});

30
apps/client/src/widgets/react/HelpRemoveButtons.tsx Normal file
View File

@ -0,0 +1,30 @@
import type { ComponentChildren } from "preact";
import ActionButton from "./ActionButton";
import Dropdown from "./Dropdown";
interface HelpRemoveButtonsProps {
help?: ComponentChildren;
removeText?: string;
onRemove?: () => void;
}
export default function HelpRemoveButtons({ help, removeText, onRemove }: HelpRemoveButtonsProps) {
return (
<td className="button-column">
{help && <>
<Dropdown
className="help-dropdown"
buttonClassName="bx bx-help-circle icon-action"
hideToggleArrow
>{help}</Dropdown>
{" "}
</>}
<ActionButton
icon="bx bx-x"
className="search-option-del"
text={removeText ?? ""}
onClick={onRemove}
/>
</td>
);
}

32
apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
View File

@ -1,5 +1,3 @@
import Dropdown from "../react/Dropdown";
import ActionButton from "../react/ActionButton";
import FormTextArea from "../react/FormTextArea";
import NoteAutocomplete from "../react/NoteAutocomplete";
import FormSelect from "../react/FormSelect";
@ -14,6 +12,7 @@ import { t } from "../../services/i18n";
import { useEffect, useMemo, useRef } from "preact/hooks";
import appContext from "../../components/app_context";
import server from "../../services/server";
import HelpRemoveButtons from "../react/HelpRemoveButtons";
export interface SearchOption {
attributeName: string;
@ -122,25 +121,18 @@ function SearchOption({ note, title, titleIcon, children, help, attributeName, a
{title}
</td>
<td>{children}</td>
<td className="button-column">
{help && <>
<Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>
{" "}
</>}
<ActionButton
icon="bx bx-x"
className="search-option-del"
text={t("abstract_search_option.remove_this_search_option")}
onClick={() => {
removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
if (additionalAttributesToDelete) {
for (const { type, name } of additionalAttributesToDelete) {
removeOwnedAttributesByNameOrType(note, type, name);
}
<HelpRemoveButtons
help={help}
removeText={t("abstract_search_option.remove_this_search_option")}
onRemove={() => {
removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
if (additionalAttributesToDelete) {
for (const { type, name } of additionalAttributesToDelete) {
removeOwnedAttributesByNameOrType(note, type, name);
}
}}
/>
</td>
}
}}
/>
</tr>
)
}