gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-29 18:49:00 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

chore(react/ribbon): toggleable tabs

Browse Source
This commit is contained in:
Elian Doran 2025-08-21 19:42:53 +03:00
parent 6849f80506
commit 9bb048fb01
No known key found for this signature in database
4 changed files with 14 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
apps/client/src/widgets/containers/ribbon_container.ts
View File

@ -63,41 +63,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
}
}
toggleRibbonTab($ribbonTitle: JQuery<HTMLElement>, refreshActiveTab = true) {
const activate = !$ribbonTitle.hasClass("active");
this.$tabContainer.find(".ribbon-tab-title").removeClass("active");
this.$bodyContainer.find(".ribbon-body").removeClass("active");
if (activate) {
const ribbonComponendId = $ribbonTitle.attr("data-ribbon-component-id");
const wasAlreadyActive = this.lastActiveComponentId === ribbonComponendId;
this.lastActiveComponentId = ribbonComponendId;
this.$tabContainer.find(`.ribbon-tab-title[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active");
this.$bodyContainer.find(`.ribbon-body[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active");
const activeChild = this.getActiveRibbonWidget();
if (activeChild && (refreshActiveTab || !wasAlreadyActive) && this.noteContext && this.notePath) {
const handleEventPromise = activeChild.handleEvent("noteSwitched", { noteContext: this.noteContext, notePath: this.notePath });
if (refreshActiveTab) {
if (handleEventPromise) {
handleEventPromise.then(() => (activeChild as any).focus?.()); // TODO: Base class
} else {
// TODO: Base class
(activeChild as any).focus?.();
}
}
}
} else {
this.lastActiveComponentId = null;
}
}
async noteSwitched() {
this.lastActiveComponentId = null;

3
apps/client/src/widgets/react/hooks.tsx
View File

@ -256,15 +256,12 @@ export function useNoteContext() {
setNotePath(noteContext.notePath);
});
useTriliumEventBeta("setNoteContext", ({ noteContext }) => {
console.log("Set note context", noteContext, noteContext.noteId);
setNoteContext(noteContext);
});
useTriliumEventBeta("noteSwitchedAndActivated", ({ noteContext }) => {
console.log("Note switched and activated")
setNoteContext(noteContext);
});
useTriliumEventBeta("noteSwitched", ({ noteContext, notePath }) => {
console.warn("Note switched", notePath);
setNotePath(notePath);
});
useTriliumEventBeta("frocaReloaded", () => {

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

@ -108,7 +108,14 @@ export default function Ribbon() {
icon={icon}
title={typeof title === "string" ? title : title(context)}
active={i === activeTab}
onClick={() => setActiveTab(i)}
onClick={() => {
if (activeTab !== i) {
setActiveTab(i);
} else {
// Collapse
setActiveTab(undefined);
}
}}
/>
))}
</div>
@ -123,11 +130,13 @@ export default function Ribbon() {
function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) {
return (
<>
<div className={`ribbon-tab-title ${active ? "active" : ""}`}>
<div
className={`ribbon-tab-title ${active ? "active" : ""}`}
onClick={onClick}
>
<span
className={`ribbon-tab-title-icon ${icon}`}
title={title}
onClick={onClick}
title={title}
/>
&nbsp;
{ active && <span class="ribbon-tab-title-label">{title}</span> }

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

@ -23,6 +23,7 @@
flex-basis: 24px;
max-width: max-content;
flex-grow: 10;
user-select: none;
}
.ribbon-tab-title .bx {