Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-06 21:36:05 +01:00
Code Issues Packages Projects Releases Activity

feat(react/floating_buttons): port switch split orientation

Browse Source
This commit is contained in:
Elian Doran
2025-08-27 21:56:02 +03:00
parent 2d950e8f3a
commit e340e6f5e3
2 changed files with 18 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/client/src/widgets/FloatingButtons.tsx
View File

@@ -4,7 +4,7 @@ import Button from "./react/Button";
import ActionButton from "./react/ActionButton";
import FNote from "../entities/fnote";
import NoteContext from "../components/note_context";
import { useNoteContext } from "./react/hooks";
import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumOption } from "./react/hooks";
import { useContext, useEffect, useMemo } from "preact/hooks";
import { ParentComponent } from "./react/react_utils";
import Component from "../components/component";
@@ -25,6 +25,10 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
{
component: RefreshBackendLogButton,
isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
},
{
component: SwitchSplitOrientationButton,
isEnabled: ({ note, noteContext }) => note.type === "mermaid" && note.isContentAvailable() && !note.hasLabel("readOnly") && noteContext.viewScope?.viewMode === "default"
}
];
@@ -48,10 +52,11 @@ export default function FloatingButtons() {
};
}, [ note, noteContext, parentComponent ]);
const isReadOnly = useNoteLabelBoolean(note, "readOnly");
const definitions = useMemo<FloatingButtonDefinition[]>(() => {
if (!context) return [];
return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context));
}, [ context ]);
}, [ context, isReadOnly ]);
return (
<div className="floating-buttons no-print">
@@ -74,6 +79,17 @@ function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButto
/>
}
function SwitchSplitOrientationButton({ }: FloatingButtonContext) {
const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
return <ActionButton
text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
onClick={() => setSplitEditorOrientation(upcomingOrientation)}
/>
}
/**
* Show button that displays floating button after click on close button
*/