TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 21:07:05 -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>
) )
}; };

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

@ -215,14 +215,15 @@ export default function Ribbon() {
</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 (
<div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
{tab?.content && tab.content({
note, note,
hidden: !isActive, hidden: !isActive,
ntxId, ntxId,
@ -233,9 +234,10 @@ export default function Ribbon() {
activate: useCallback(() => { activate: useCallback(() => {
setActiveTabIndex(tab.index) setActiveTabIndex(tab.index)
}, [setActiveTabIndex]) }, [setActiveTabIndex])
});
})} })}
</div> </div>
);
})}
</div> </div>
</> </>
)} )}