TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

chore(react/ribbon): fix 3px height of the ribbon when collapsed

Browse Source
This commit is contained in:
Elian Doran 2025-08-27 13:12:51 +03:00
parent 82bdb76d75
commit 3a3fed4314
No known key found for this signature in database
2 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
import { CSSProperties } from "preact/compat";
import { useTriliumOption } from "../react/hooks"; import { useTriliumOption } from "../react/hooks";
/** /**
@ -10,17 +9,10 @@ import { useTriliumOption } from "../react/hooks";
* *
* ! The toolbar is not only used in the ribbon, but also in the quick edit feature. * ! The toolbar is not only used in the ribbon, but also in the quick edit feature.
*/ */
export default function FormattingToolbar({ hidden }: { hidden?: boolean }) { export default function FormattingToolbar() {
const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType"); const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
const style: CSSProperties = {};
if (hidden) {
style.display = "none";
}
return (textNoteEditorType === "ckeditor-classic" && return (textNoteEditorType === "ckeditor-classic" &&
<div className="classic-toolbar-widget" style={style}> <div className="classic-toolbar-widget" />
</div>
) )
}; };

44
apps/client/src/widgets/ribbon/Ribbon.tsx
View File

@ -214,28 +214,30 @@ export default function Ribbon() {
</div> </div>
</div> </div>
<div className="ribbon-body-container"> <div className="ribbon-body-container">
<div className="ribbon-body"> {filteredTabs.map(tab => {
{filteredTabs.map(tab => { const isActive = tab.index === activeTabIndex;
const isActive = tab.index === activeTabIndex; if (!isActive && !tab.stayInDom) {
if (!isActive && !tab.stayInDom) { return;
return; }
}
return tab?.content && tab.content({ return (
note, <div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
hidden: !isActive, {tab?.content && tab.content({
ntxId, note,
hoistedNoteId, hidden: !isActive,
notePath, ntxId,
noteContext, hoistedNoteId,
componentId, notePath,
activate: useCallback(() => { noteContext,
setActiveTabIndex(tab.index) componentId,
}, [setActiveTabIndex]) activate: useCallback(() => {
}); setActiveTabIndex(tab.index)
})} }, [setActiveTabIndex])
</div> })}
</div>
);
})}
</div> </div>
</> </>
)} )}