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

feat(inline_title): in split, avoid layout shift by maintaining the toolbar

Browse Source
This commit is contained in:
Elian Doran 2025-12-13 16:54:04 +02:00
parent 0c9ff4dae4
commit 2b1bc8e2b9
No known key found for this signature in database
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/client/src/widgets/ribbon/FormattingToolbar.tsx
View File

@ -1,3 +1,4 @@
import clsx from "clsx";
import { useEffect, useRef, useState } from "preact/hooks"; import { useEffect, useRef, useState } from "preact/hooks";
import { useActiveNoteContext, useIsNoteReadOnly, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks"; import { useActiveNoteContext, useIsNoteReadOnly, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks";
@ -48,7 +49,7 @@ export function FixedFormattingToolbar() {
const shown = ( const shown = (
viewScope?.viewMode === "default" && viewScope?.viewMode === "default" &&
textNoteEditorType === "ckeditor-classic" && textNoteEditorType === "ckeditor-classic" &&
noteType === "text" && (noteContext?.getMainContext().getSubContexts() ?? []).some(sub => sub.note?.type === "text") &&
!isReadOnly !isReadOnly
); );
const [ toolbarToRender, setToolbarToRender ] = useState<HTMLElement | null | undefined>(); const [ toolbarToRender, setToolbarToRender ] = useState<HTMLElement | null | undefined>();
@ -74,8 +75,11 @@ export function FixedFormattingToolbar() {
// Switch between the cached toolbar when user navigates to a different note context. // Switch between the cached toolbar when user navigates to a different note context.
useEffect(() => { useEffect(() => {
if (!ntxId) return; if (!ntxId) return;
setToolbarToRender(toolbarCache.get(ntxId)); const toolbar = toolbarCache.get(ntxId);
}, [ ntxId, noteContext ]); if (toolbar) {
setToolbarToRender(toolbar);
}
}, [ ntxId, noteType, noteContext ]);
// Render the toolbar. // Render the toolbar.
useEffect(() => { useEffect(() => {
@ -89,7 +93,10 @@ export function FixedFormattingToolbar() {
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className={`classic-toolbar-widget ${!shown ? "hidden-ext" : ""}`} className={clsx("classic-toolbar-widget", {
"hidden-ext": !shown,
"disabled": noteType !== "text"
})}
/> />
); );
} }

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

@ -152,6 +152,15 @@
opacity: 0.3; opacity: 0.3;
} }
body.experimental-feature-new-layout .classic-toolbar-widget {
transition: opacity 250ms ease-in;
&.disabled {
opacity: 0.3;
pointer-events: none;
}
}
/* #endregion */ /* #endregion */
/* #region Script Tab */ /* #region Script Tab */