Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-14 17:25:52 +01:00
Code Issues Packages Projects Releases Activity

feat(react/ribbon): reintroduce button collection properties

Browse Source
This commit is contained in:
Elian Doran
2025-08-23 23:22:07 +03:00
parent ce1f5c6204
commit ea1397de63
4 changed files with 51 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
View File

@@ -1,12 +1,14 @@
import { useMemo } from "preact/hooks";
import { useContext, useMemo } from "preact/hooks";
import { t } from "../../services/i18n";
import { ViewTypeOptions } from "../../services/note_list_renderer";
import FormSelect from "../react/FormSelect";
import { TabContext } from "./ribbon-interface";
import { mapToKeyValueArray } from "../../services/utils";
import { useNoteLabel } from "../react/hooks";
import { bookPropertiesConfig, BookProperty, ButtonProperty } from "../ribbon_widgets/book_properties_config";
import Button from "../react/Button";
import { ParentComponent } from "../react/react_utils";
import FNote from "../../entities/fnote";
import FormGroup from "../react/FormGroup";
const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
grid: t("book_properties.grid"),
@@ -18,19 +20,20 @@ const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
};
export default function CollectionPropertiesTab({ note }: TabContext) {
const [ viewType, setViewType ] = useNoteLabel(note, "viewType");
const viewTypeWithDefault = viewType ?? "grid";
const properties = bookPropertiesConfig[viewTypeWithDefault].properties;
return (note &&
<div className="book-properties-widget">
<CollectionTypeSwitcher note={note} />
<div className="book-properties-container">
</div>
<CollectionTypeSwitcher viewType={viewTypeWithDefault} setViewType={setViewType} />
<BookProperties note={note} properties={properties} />
</div>
);
}
function CollectionTypeSwitcher({ note }: { note: FNote }) {
function CollectionTypeSwitcher({ viewType, setViewType }: { viewType: string, setViewType: (newValue: string) => void }) {
const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []);
const [ viewType, setViewType ] = useNoteLabel(note, "viewType");
return (
<div style={{ display: "flex", alignItems: "baseline" }}>
@@ -42,4 +45,40 @@ function CollectionTypeSwitcher({ note }: { note: FNote }) {
/>
</div>
)
}
function BookProperties({ note, properties }: { note: FNote, properties: BookProperty[] }) {
return (
<div className="book-properties-container">
{properties.map(property => (
<div className={`type-${property}`}>
{mapPropertyView({ note, property })}
</div>
))}
</div>
)
}
function mapPropertyView({ note, property }: { note: FNote, property: BookProperty }) {
switch (property.type) {
case "button":
return <ButtonPropertyView note={note} property={property} />
}
}
function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) {
const parentComponent = useContext(ParentComponent);
return <Button
text={property.label}
title={property.title}
icon={property.icon}
onClick={() => {
if (!parentComponent) return;
property.onClick({
note,
triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
});
}}
/>
}