Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-07 05:46:10 +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 ActionButton from "./react/ActionButton";
import FNote from "../entities/fnote"; import FNote from "../entities/fnote";
import NoteContext from "../components/note_context"; 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 { useContext, useEffect, useMemo } from "preact/hooks";
import { ParentComponent } from "./react/react_utils"; import { ParentComponent } from "./react/react_utils";
import Component from "../components/component"; import Component from "../components/component";
@@ -25,6 +25,10 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
{ {
component: RefreshBackendLogButton, component: RefreshBackendLogButton,
isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default", 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 ]); }, [ note, noteContext, parentComponent ]);
const isReadOnly = useNoteLabelBoolean(note, "readOnly");
const definitions = useMemo<FloatingButtonDefinition[]>(() => { const definitions = useMemo<FloatingButtonDefinition[]>(() => {
if (!context) return []; if (!context) return [];
return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context)); return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context));
}, [ context ]); }, [ context, isReadOnly ]);
return ( return (
<div className="floating-buttons no-print"> <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 * Show button that displays floating button after click on close button
*/ */

62
apps/client/src/widgets/floating_buttons/switch_layout_button.ts
View File

@@ -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*/`
<button type="button"
class="switch-layout-button">
<span class="bx"></span>
</button>
`;
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";
}
}