diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx index 864e9449e..04936d1fe 100644 --- a/apps/client/src/widgets/FloatingButtons.tsx +++ b/apps/client/src/widgets/FloatingButtons.tsx @@ -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(() => { if (!context) return []; return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context)); - }, [ context ]); + }, [ context, isReadOnly ]); return (
@@ -74,6 +79,17 @@ function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButto /> } +function SwitchSplitOrientationButton({ }: FloatingButtonContext) { + const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation"); + const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal"; + + return setSplitEditorOrientation(upcomingOrientation)} + /> +} + /** * Show button that displays floating button after click on close button */ diff --git a/apps/client/src/widgets/floating_buttons/switch_layout_button.ts b/apps/client/src/widgets/floating_buttons/switch_layout_button.ts deleted file mode 100644 index f306a8491..000000000 --- a/apps/client/src/widgets/floating_buttons/switch_layout_button.ts +++ /dev/null @@ -1,62 +0,0 @@ -import type { EventData } from "../../components/app_context.js"; -import { t } from "../../services/i18n.js"; -import options from "../../services/options.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; - -const TPL = /*html*/` - -`; - -export default class SwitchSplitOrientationButton extends NoteContextAwareWidget { - isEnabled() { - return super.isEnabled() - && ["mermaid"].includes(this.note?.type ?? "") - && this.note?.isContentAvailable() - && !this.note?.hasLabel("readOnly") - && this.noteContext?.viewScope?.viewMode === "default"; - } - - doRender(): void { - super.doRender(); - this.$widget = $(TPL); - this.$widget.on("click", () => { - const currentOrientation = options.get("splitEditorOrientation"); - options.save("splitEditorOrientation", toggleOrientation(currentOrientation)); - }); - this.#adjustIcon(); - this.contentSized(); - } - - #adjustIcon() { - const currentOrientation = options.get("splitEditorOrientation"); - const upcomingOrientation = toggleOrientation(currentOrientation); - const $icon = this.$widget.find("span.bx"); - $icon - .toggleClass("bxs-dock-bottom", upcomingOrientation === "vertical") - .toggleClass("bxs-dock-left", upcomingOrientation === "horizontal"); - - if (upcomingOrientation === "vertical") { - this.$widget.attr("title", t("switch_layout_button.title_vertical")); - } else { - this.$widget.attr("title", t("switch_layout_button.title_horizontal")); - } - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.isOptionReloaded("splitEditorOrientation")) { - this.#adjustIcon(); - } - } - -} - -function toggleOrientation(orientation: string) { - if (orientation === "horizontal") { - return "vertical"; - } else { - return "horizontal"; - } -}