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

chore(react/ribbon): make tabs activable

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

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

@ -61,12 +61,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
for (const buttonWidget of this.buttonWidgets) { for (const buttonWidget of this.buttonWidgets) {
this.$buttonContainer.append(buttonWidget.render()); this.$buttonContainer.append(buttonWidget.render());
} }
this.$tabContainer.on("click", ".ribbon-tab-title", (e) => {
const $ribbonTitle = $(e.target).closest(".ribbon-tab-title");
this.toggleRibbonTab($ribbonTitle);
});
} }
toggleRibbonTab($ribbonTitle: JQuery<HTMLElement>, refreshActiveTab = true) { toggleRibbonTab($ribbonTitle: JQuery<HTMLElement>, refreshActiveTab = true) {

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

@ -1,3 +1,4 @@
import { useState } from "preact/hooks";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { useNoteContext } from "../react/hooks"; import { useNoteContext } from "../react/hooks";
@ -96,15 +97,18 @@ const TAB_CONFIGURATION: TabConfiguration[] = [
export default function Ribbon() { export default function Ribbon() {
const { note } = useNoteContext(); const { note } = useNoteContext();
const context: TabContext = { note }; const context: TabContext = { note };
const [ activeTab, setActiveTab ] = useState<number>();
return ( return (
<div class="ribbon-container" style={{ contain: "none" }}> <div class="ribbon-container" style={{ contain: "none" }}>
<div className="ribbon-top-row"> <div className="ribbon-top-row">
<div className="ribbon-tab-container"> <div className="ribbon-tab-container">
{TAB_CONFIGURATION.map(({ title, icon }) => ( {TAB_CONFIGURATION.map(({ title, icon }, i) => (
<RibbonTab <RibbonTab
icon={icon} icon={icon}
title={typeof title === "string" ? title : title(context)} title={typeof title === "string" ? title : title(context)}
active={i === activeTab}
onClick={() => setActiveTab(i)}
/> />
))} ))}
</div> </div>
@ -116,16 +120,17 @@ export default function Ribbon() {
) )
} }
function RibbonTab({ icon, title }: { icon: string; title: string }) { function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) {
return ( return (
<> <>
<div className="ribbon-tab-title"> <div className={`ribbon-tab-title ${active ? "active" : ""}`}>
<span <span
className={`ribbon-tab-title-icon ${icon}`} className={`ribbon-tab-title-icon ${icon}`}
title={title} title={title}
onClick={onClick}
/> />
&nbsp; &nbsp;
<span class="ribbon-tab-title-label">{title}</span> { active && <span class="ribbon-tab-title-label">{title}</span> }
</div> </div>
<div class="ribbon-tab-spacer" /> <div class="ribbon-tab-spacer" />