gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 18:34:24 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(widgets): menu item with toggle

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 18:07:38 +02:00
parent 84bde62e05
commit 8fa9c25f2a
No known key found for this signature in database
3 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/client/src/widgets/react/FormList.css
View File

@ -1,9 +1,24 @@
.dropdown-item .description { .dropdown-item {
font-size: small; .description {
color: var(--muted-text-color); font-size: small;
white-space: normal; color: var(--muted-text-color);
} white-space: normal;
}
.dropdown-item span.bx { span.bx {
flex-shrink: 0; flex-shrink: 0;
}
.switch-widget {
flex-grow: 1;
width: 100%;
--switch-track-width: 40px;
--switch-track-height: 20px;
--switch-thumb-width: 12px;
--switch-thumb-height: var(--switch-thumb-width);
.switch-name {
flex-grow: 1;
}
}
} }

13
apps/client/src/widgets/react/FormList.tsx
View File

@ -7,6 +7,7 @@ import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks"; import { useStaticTooltip } from "./hooks";
import { handleRightToLeftPlacement, isMobile } from "../../services/utils"; import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
import clsx from "clsx"; import clsx from "clsx";
import FormToggle from "./FormToggle";
interface FormListOpts { interface FormListOpts {
children: ComponentChildren; children: ComponentChildren;
@ -132,6 +133,18 @@ export function FormListItem({ className, icon, value, title, active, disabled,
); );
} }
export function FormListToggleableItem({ title, currentValue, onChange, ...props }: Omit<FormListItemOpts, "onClick" | "children"> & {
title: string;
currentValue: boolean;
onChange(newValue: boolean): void;
}) {
return (
<FormListItem {...props}>
<FormToggle switchOnName={title} switchOffName={title} currentValue={currentValue} onChange={onChange} />
</FormListItem>
);
}
function FormListContent({ children, badges, description, disabled, disabledTooltip }: Pick<FormListItemOpts, "children" | "badges" | "description" | "disabled" | "disabledTooltip">) { function FormListContent({ children, badges, description, disabled, disabledTooltip }: Pick<FormListItemOpts, "children" | "badges" | "description" | "disabled" | "disabledTooltip">) {
return <> return <>
{children} {children}

6
apps/client/src/widgets/react/FormToggle.tsx
View File

@ -5,9 +5,9 @@ interface FormToggleProps {
currentValue: boolean | null; currentValue: boolean | null;
onChange(newValue: boolean): void; onChange(newValue: boolean): void;
switchOnName: string; switchOnName: string;
switchOnTooltip: string; switchOnTooltip?: string;
switchOffName: string; switchOffName: string;
switchOffTooltip: string; switchOffTooltip?: string;
helpPage?: string; helpPage?: string;
disabled?: boolean; disabled?: boolean;
} }
@ -37,5 +37,5 @@ export default function FormToggle({ currentValue, helpPage, switchOnName, switc
{ helpPage && <HelpButton className="switch-help-button" helpPage={helpPage} />} { helpPage && <HelpButton className="switch-help-button" helpPage={helpPage} />}
</div> </div>
) );
} }