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(note_bars/collection): support button properties

Browse Source
This commit is contained in:
Elian Doran 2025-12-11 19:29:27 +02:00
parent fec5ee9335
commit 0de67b6a69
No known key found for this signature in database
1 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/client/src/widgets/note_bars/CollectionProperties.tsx
View File

@ -2,11 +2,13 @@ import { t } from "i18next";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import { ViewTypeOptions } from "../collections/interface"; import { ViewTypeOptions } from "../collections/interface";
import Dropdown from "../react/Dropdown"; import Dropdown from "../react/Dropdown";
import { FormListItem, FormListToggleableItem } from "../react/FormList"; import { FormDropdownDivider, FormListItem, FormListToggleableItem } from "../react/FormList";
import Icon from "../react/Icon"; import Icon from "../react/Icon";
import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab"; import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
import { BookProperty, CheckBoxProperty } from "../ribbon/collection-properties-config"; import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty } from "../ribbon/collection-properties-config";
import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks"; import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
import { useContext } from "preact/hooks";
import { ParentComponent } from "../react/react_utils";
const ICON_MAPPINGS: Record<ViewTypeOptions, string> = { const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
grid: "bx bxs-grid", grid: "bx bxs-grid",
@ -19,17 +21,17 @@ const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
}; };
export default function CollectionProperties({ note }: { note: FNote }) { export default function CollectionProperties({ note }: { note: FNote }) {
const [ viewType, setViewType ] = useViewType(note);
return ( return (
<> <>
<ViewTypeSwitcher note={note} /> <ViewTypeSwitcher note={note} viewType={viewType} setViewType={setViewType} />
<ViewOptions note={note} /> <ViewOptions note={note} viewType={viewType} />
</> </>
); );
} }
function ViewTypeSwitcher({ note }: { note: FNote }) { function ViewTypeSwitcher({ note, viewType, setViewType }: { note: FNote, viewType: ViewTypeOptions, setViewType: (newValue: ViewTypeOptions) => void }) {
const [ viewType, setViewType ] = useViewType(note);
return ( return (
<Dropdown <Dropdown
text={<> text={<>
@ -40,7 +42,7 @@ function ViewTypeSwitcher({ note }: { note: FNote }) {
{Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => ( {Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => (
<FormListItem <FormListItem
key={key} key={key}
onClick={() => setViewType(key)} onClick={() => setViewType(key as ViewTypeOptions)}
selected={viewType === key} selected={viewType === key}
disabled={viewType === key} disabled={viewType === key}
icon={ICON_MAPPINGS[key as ViewTypeOptions]} icon={ICON_MAPPINGS[key as ViewTypeOptions]}
@ -50,7 +52,9 @@ function ViewTypeSwitcher({ note }: { note: FNote }) {
); );
} }
function ViewOptions({ note }: { note: FNote }) { function ViewOptions({ note, viewType }: { note: FNote, viewType: ViewTypeOptions }) {
const properties = bookPropertiesConfig[viewType].properties;
return ( return (
<Dropdown <Dropdown
buttonClassName="bx bx-cog icon-action" buttonClassName="bx bx-cog icon-action"
@ -61,17 +65,42 @@ function ViewOptions({ note }: { note: FNote }) {
label: t("book_properties.include_archived_notes"), label: t("book_properties.include_archived_notes"),
bindToLabel: "includeArchived" bindToLabel: "includeArchived"
} as CheckBoxProperty} /> } as CheckBoxProperty} />
{properties.length > 0 && <FormDropdownDivider />}
{properties.map(property => (
<ViewProperty key={property} note={note} property={property} />
))}
</Dropdown> </Dropdown>
); );
} }
function ViewProperty({ note, property }: { note: FNote, property: BookProperty }) { function ViewProperty({ note, property }: { note: FNote, property: BookProperty }) {
switch (property.type) { switch (property.type) {
case "button":
return <ButtonPropertyView note={note} property={property} />;
case "checkbox": case "checkbox":
return <CheckBoxPropertyView note={note} property={property} />; return <CheckBoxPropertyView note={note} property={property} />;
} }
} }
function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) {
const parentComponent = useContext(ParentComponent);
return (
<FormListItem
icon={property.icon}
title={property.title}
onClick={() => {
if (!parentComponent) return;
property.onClick({
note,
triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
});
}}
>{property.label}</FormListItem>
);
}
function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) { function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel); const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
return ( return (
@ -82,3 +111,4 @@ function CheckBoxPropertyView({ note, property }: { note: FNote, property: Check
/> />
); );
} }