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

feat(right_pane): add context menu with go to source for custom widgets

Browse Source
This commit is contained in:
Elian Doran 2025-12-20 11:39:46 +02:00
parent eeea96b98c
commit dced799976
No known key found for this signature in database
3 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/translations/en/translation.json
View File

@ -2203,6 +2203,7 @@
"right_pane": { "right_pane": {
"empty_message": "Nothing to show for this note", "empty_message": "Nothing to show for this note",
"empty_button": "Hide the panel", "empty_button": "Hide the panel",
"toggle": "Toggle right panel" "toggle": "Toggle right panel",
"custom_widget_go_to_source": "Go to source code"
} }
} }

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

@ -4,6 +4,7 @@ import "./RightPanelContainer.css";
import Split from "@triliumnext/split.js"; import Split from "@triliumnext/split.js";
import { useEffect, useRef } from "preact/hooks"; import { useEffect, useRef } from "preact/hooks";
import appContext from "../../components/app_context";
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";
@ -77,6 +78,13 @@ function CustomWidget({ originalWidget }: { originalWidget: LegacyRightPanelWidg
id={originalWidget._noteId} id={originalWidget._noteId}
title={originalWidget.widgetTitle} title={originalWidget.widgetTitle}
containerRef={containerRef} containerRef={containerRef}
contextMenuItems={[
{
title: t("right_pane.custom_widget_go_to_source"),
uiIcon: "bx bx-code-curly",
handler: () => appContext.tabManager.openInNewTab(originalWidget._noteId, null, true)
}
]}
> >
<CustomWidgetContent originalWidget={originalWidget} /> <CustomWidgetContent originalWidget={originalWidget} />
</RightPanelWidget> </RightPanelWidget>

24
apps/client/src/widgets/sidebar/RightPanelWidget.tsx
View File

@ -2,6 +2,8 @@ import clsx from "clsx";
import { ComponentChildren, RefObject } from "preact"; import { ComponentChildren, RefObject } from "preact";
import { useContext, useState } from "preact/hooks"; import { useContext, useState } from "preact/hooks";
import contextMenu, { MenuItem } from "../../menus/context_menu";
import ActionButton from "../react/ActionButton";
import { useSyncedRef, useTriliumOptionJson } from "../react/hooks"; import { useSyncedRef, useTriliumOptionJson } from "../react/hooks";
import Icon from "../react/Icon"; import Icon from "../react/Icon";
import { ParentComponent } from "../react/react_utils"; import { ParentComponent } from "../react/react_utils";
@ -12,9 +14,10 @@ interface RightPanelWidgetProps {
children: ComponentChildren; children: ComponentChildren;
buttons?: ComponentChildren; buttons?: ComponentChildren;
containerRef?: RefObject<HTMLDivElement>; containerRef?: RefObject<HTMLDivElement>;
contextMenuItems?: MenuItem<unknown>[];
} }
export default function RightPanelWidget({ id, title, buttons, children, containerRef: externalContainerRef }: RightPanelWidgetProps) { export default function RightPanelWidget({ id, title, buttons, children, containerRef: externalContainerRef, contextMenuItems }: RightPanelWidgetProps) {
const [ rightPaneCollapsedItems, setRightPaneCollapsedItems ] = useTriliumOptionJson<string[]>("rightPaneCollapsedItems"); const [ rightPaneCollapsedItems, setRightPaneCollapsedItems ] = useTriliumOptionJson<string[]>("rightPaneCollapsedItems");
const [ expanded, setExpanded ] = useState(!rightPaneCollapsedItems.includes(id)); const [ expanded, setExpanded ] = useState(!rightPaneCollapsedItems.includes(id));
const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null); const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
@ -49,7 +52,24 @@ export default function RightPanelWidget({ id, title, buttons, children, contain
icon="bx bx-chevron-down" icon="bx bx-chevron-down"
/> />
<div class="card-header-title">{title}</div> <div class="card-header-title">{title}</div>
<div class="card-header-buttons">{buttons}</div> <div class="card-header-buttons">
{buttons}
{contextMenuItems && (
<ActionButton
icon="bx bx-dots-vertical-rounded"
text=""
onClick={e => {
e.stopPropagation();
contextMenu.show({
x: e.pageX,
y: e.pageY,
items: contextMenuItems,
selectMenuItemHandler: () => {}
});
}}
/>
)}
</div>
</div> </div>
<div id={parentComponent?.componentId} class="body-wrapper"> <div id={parentComponent?.componentId} class="body-wrapper">