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

chore(right_pane_widget): basic support for custom widgets
Some checks are pending
Checks / main (push) Waiting to run
Details

Browse Source
This commit is contained in:
Elian Doran 2025-12-20 00:01:21 +02:00
parent a5f322617d
commit 8f1614f603
No known key found for this signature in database
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/layouts/desktop_layout.tsx
View File

@ -184,7 +184,7 @@ export default class DesktopLayout {
.child(new HighlightsListWidget()) .child(new HighlightsListWidget())
.child(...this.customWidgets.get("right-pane")) .child(...this.customWidgets.get("right-pane"))
) )
.optChild(isNewLayout, <RightPanelContainer />) .optChild(isNewLayout, <RightPanelContainer customWidgets={this.customWidgets.get("right-pane")} />)
) )
.optChild(!launcherPaneIsHorizontal && isNewLayout, <StatusBar />) .optChild(!launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
) )

13
apps/client/src/widgets/sidebar/RightPanelContainer.tsx
View File

@ -7,15 +7,16 @@ import { useEffect } from "preact/hooks";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import options from "../../services/options"; import options from "../../services/options";
import { DEFAULT_GUTTER_SIZE } from "../../services/resizer"; import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
import BasicWidget from "../basic_widget";
import Button from "../react/Button"; import Button from "../react/Button";
import { useActiveNoteContext, useNoteProperty, useTriliumOptionBool, useTriliumOptionJson } from "../react/hooks"; import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumOptionBool, useTriliumOptionJson } from "../react/hooks";
import Icon from "../react/Icon"; import Icon from "../react/Icon";
import HighlightsList from "./HighlightsList"; import HighlightsList from "./HighlightsList";
import TableOfContents from "./TableOfContents"; import TableOfContents from "./TableOfContents";
const MIN_WIDTH_PERCENT = 5; const MIN_WIDTH_PERCENT = 5;
export default function RightPanelContainer() { export default function RightPanelContainer({ customWidgets }: { customWidgets: BasicWidget[] }) {
const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible"); const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList"); const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
useSplit(rightPaneVisible); useSplit(rightPaneVisible);
@ -24,7 +25,8 @@ export default function RightPanelContainer() {
const noteType = useNoteProperty(note, "type"); const noteType = useNoteProperty(note, "type");
const items = (rightPaneVisible ? [ const items = (rightPaneVisible ? [
(noteType === "text" || noteType === "doc") && <TableOfContents />, (noteType === "text" || noteType === "doc") && <TableOfContents />,
noteType === "text" && highlightsList.length > 0 && <HighlightsList /> noteType === "text" && highlightsList.length > 0 && <HighlightsList />,
...customWidgets.map((w) => <CustomWidget originalWidget={w} />)
] : []).filter(Boolean); ] : []).filter(Boolean);
return ( return (
@ -64,3 +66,8 @@ function useSplit(visible: boolean) {
return () => splitInstance.destroy(); return () => splitInstance.destroy();
}, [ visible ]); }, [ visible ]);
} }
function CustomWidget({ originalWidget }: { originalWidget: BasicWidget }) {
const [ el ] = useLegacyWidget(() => originalWidget);
return <>{el}</>;
}