Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-17 21:59:55 +01:00
Code Issues Packages Projects Releases Activity

feat(layout/note_actions): prevent layout shift by disabling button

Browse Source
This commit is contained in:
Elian Doran
2025-12-15 08:17:01 +02:00
parent 50cbad22d0
commit 04a641199b
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
View File

@@ -151,14 +151,15 @@ function RefreshButton({ note, noteType, isDefaultViewMode, parentComponent, not
} }
function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: NoteActionsCustomInnerProps) { function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: NoteActionsCustomInnerProps) {
const isEnabled = note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode; const isShown = note.type === "mermaid" && note.isContentAvailable() && isDefaultViewMode;
const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation"); const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal"; const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
return isEnabled && <ActionButton return isShown && <ActionButton
text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")} 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"} icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
onClick={() => setSplitEditorOrientation(upcomingOrientation)} onClick={() => setSplitEditorOrientation(upcomingOrientation)}
disabled={isReadOnly}
/>; />;
} }

8
apps/client/src/widgets/ribbon/style.css
View File

@@ -451,6 +451,14 @@ body.experimental-feature-new-layout {
margin: 0; margin: 0;
gap: var(--button-gap); gap: var(--button-gap);
button {
transition: opacity 250ms ease-in;
&.disabled {
opacity: 0.4;
}
}
.note-actions-custom { .note-actions-custom {
display: flex; display: flex;
align-items: center; align-items: center;