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

feat(layout): button to toggle right pane on horizontal layout

Browse Source
This commit is contained in:
Elian Doran 2025-12-19 21:05:21 +02:00
parent d22583457f
commit 9acef4d502
No known key found for this signature in database
3 changed files with 25 additions and 1 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

@ -9,6 +9,7 @@ import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
import GlobalMenu from "../widgets/buttons/global_menu.jsx"; import GlobalMenu from "../widgets/buttons/global_menu.jsx";
import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js"; import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
import MovePaneButton from "../widgets/buttons/move_pane_button.js"; import MovePaneButton from "../widgets/buttons/move_pane_button.js";
import RightPaneToggle from "../widgets/buttons/right_pane_toggle.jsx";
import CloseZenModeButton from "../widgets/close_zen_button.jsx"; import CloseZenModeButton from "../widgets/close_zen_button.jsx";
import NoteList from "../widgets/collections/NoteList.jsx"; import NoteList from "../widgets/collections/NoteList.jsx";
import ContentHeader from "../widgets/containers/content_header.js"; import ContentHeader from "../widgets/containers/content_header.js";
@ -91,6 +92,7 @@ export default class DesktopLayout {
.optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />) .optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />)
.child(<TabHistoryNavigationButtons />) .child(<TabHistoryNavigationButtons />)
.child(new TabRowWidget().class("full-width")) .child(new TabRowWidget().class("full-width"))
.optChild(launcherPaneIsHorizontal && isNewLayout, <RightPaneToggle />)
.optChild(customTitleBarButtons, <TitleBarButtons />) .optChild(customTitleBarButtons, <TitleBarButtons />)
.css("height", "40px") .css("height", "40px")
.css("background-color", "var(--launcher-pane-background-color)") .css("background-color", "var(--launcher-pane-background-color)")

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

@ -2199,6 +2199,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"
} }
} }

21
apps/client/src/widgets/buttons/right_pane_toggle.tsx Normal file
View File

@ -0,0 +1,21 @@
import clsx from "clsx";
import { t } from "../../services/i18n";
import ActionButton from "../react/ActionButton";
import { useTriliumOptionBool } from "../react/hooks";
export default function RightPaneToggle() {
const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
return (
<ActionButton
className={clsx(
`toggle-button right-pane-toggle-button bx-flip-horizontal`,
rightPaneVisible ? "action-collapse" : "action-expand"
)}
text={t("right_pane.toggle")}
icon="bx bx-sidebar"
onClick={() => setRightPaneVisible(!rightPaneVisible)}
/>
);
}