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): 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) {
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) {

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