Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

chore(react/ribbon): disable when view mode is not good

Browse Source
This commit is contained in:
Elian Doran
2025-08-27 12:20:11 +03:00
parent 976c795ac6
commit 9d760a21d5
2 changed files with 46 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,79 +28,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
this.buttonWidgets = [];
}
isEnabled() {
return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default";
}
button(widget: ButtonWidget) {
super.child(widget);
this.buttonWidgets.push(widget);
return this;
}
doRender() {
this.$tabContainer = this.$widget.find(".ribbon-tab-container");
this.$buttonContainer = this.$widget.find(".ribbon-button-container");
this.$bodyContainer = this.$widget.find(".ribbon-body-container");
for (const buttonWidget of this.buttonWidgets) {
this.$buttonContainer.append(buttonWidget.render());
}
}
async noteSwitched() {
this.lastActiveComponentId = null;
await super.noteSwitched();
}
async refreshWithNote(note: FNote, noExplicitActivation = false) {
this.lastNoteType = note.type;
let $ribbonTabToActivate, $lastActiveRibbon;
this.$tabContainer.empty();
for (const ribbonWidget of this.ribbonWidgets) {
// TODO: Base class for ribbon widget
const ret = await (ribbonWidget as any).getTitle(note);
if (!ret.show) {
continue;
}
const $ribbonTitle = $('<div class="ribbon-tab-title">')
.attr("data-ribbon-component-id", ribbonWidget.componentId)
.attr("data-ribbon-component-name", (ribbonWidget as any).name as string) // TODO: base class for ribbon widgets
.append(
$('<span class="">')
.attr("data-toggle-command", (ribbonWidget as any).toggleCommand)
)
this.$tabContainer.append('');
if (ret.activate && !this.lastActiveComponentId && !$ribbonTabToActivate && !noExplicitActivation) {
$ribbonTabToActivate = $ribbonTitle;
}
if (this.lastActiveComponentId === ribbonWidget.componentId) {
$lastActiveRibbon = $ribbonTitle;
}
}
if (!$ribbonTabToActivate) {
$ribbonTabToActivate = $lastActiveRibbon;
}
if ($ribbonTabToActivate) {
this.toggleRibbonTab($ribbonTabToActivate, false);
} else {
this.$bodyContainer.find(".ribbon-body").removeClass("active");
}
}
isRibbonTabActive(name: string) {
const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`);

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

@@ -187,50 +187,54 @@ export default function Ribbon() {
return (
<div className="ribbon-container" style={{ contain: "none" }}>
<div className="ribbon-top-row">
<div className="ribbon-tab-container">
{filteredTabs.map(({ title, icon, index, toggleCommand }) => (
<RibbonTab
icon={icon}
title={typeof title === "string" ? title : title(titleContext)}
active={index === activeTabIndex}
toggleCommand={toggleCommand}
onClick={() => {
if (activeTabIndex !== index) {
setActiveTabIndex(index);
} else {
// Collapse
setActiveTabIndex(undefined);
{noteContext?.viewScope?.viewMode === "default" && (
<>
<div className="ribbon-top-row">
<div className="ribbon-tab-container">
{filteredTabs.map(({ title, icon, index, toggleCommand }) => (
<RibbonTab
icon={icon}
title={typeof title === "string" ? title : title(titleContext)}
active={index === activeTabIndex}
toggleCommand={toggleCommand}
onClick={() => {
if (activeTabIndex !== index) {
setActiveTabIndex(index);
} else {
// Collapse
setActiveTabIndex(undefined);
}
}}
/>
))}
</div>
<div className="ribbon-button-container">
{ note && <NoteActions note={note} noteContext={noteContext} /> }
</div>
</div>
<div className="ribbon-body-container">
<div className="ribbon-body">
{filteredTabs.map(tab => {
const isActive = tab.index === activeTabIndex;
if (!isActive && !tab.stayInDom) {
return;
}
}}
/>
))}
</div>
<div className="ribbon-button-container">
{ note && <NoteActions note={note} noteContext={noteContext} /> }
</div>
</div>
<div className="ribbon-body-container">
<div className="ribbon-body">
{filteredTabs.map(tab => {
const isActive = tab.index === activeTabIndex;
if (!isActive && !tab.stayInDom) {
return;
}
return tab?.content && tab.content({
note,
hidden: !isActive,
ntxId,
hoistedNoteId,
notePath,
noteContext,
componentId
});
})}
</div>
</div>
return tab?.content && tab.content({
note,
hidden: !isActive,
ntxId,
hoistedNoteId,
notePath,
noteContext,
componentId
});
})}
</div>
</div>
</>
)}
</div>
)
}