Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 20:36:13 +01:00
Code Issues Packages Projects Releases Activity

chore(react/ribbon): make content work

Browse Source
This commit is contained in:
Elian Doran
2025-08-21 19:59:30 +03:00
parent 9bb048fb01
commit 4e9deab605
3 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,15 +32,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default"; return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default";
} }
ribbon(widget: NoteContextAwareWidget) {
// TODO: Base class
super.child(widget);
this.ribbonWidgets.push(widget);
return this;
}
button(widget: ButtonWidget) { button(widget: ButtonWidget) {
super.child(widget); super.child(widget);
@@ -54,10 +45,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
this.$buttonContainer = this.$widget.find(".ribbon-button-container"); this.$buttonContainer = this.$widget.find(".ribbon-button-container");
this.$bodyContainer = this.$widget.find(".ribbon-body-container"); this.$bodyContainer = this.$widget.find(".ribbon-body-container");
for (const ribbonWidget of this.ribbonWidgets) {
this.$bodyContainer.append($('<div class="ribbon-body">').attr("data-ribbon-component-id", ribbonWidget.componentId).append(ribbonWidget.render()));
}
for (const buttonWidget of this.buttonWidgets) { for (const buttonWidget of this.buttonWidgets) {
this.$buttonContainer.append(buttonWidget.render()); this.$buttonContainer.append(buttonWidget.render());
} }

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

@@ -3,6 +3,8 @@ 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";
import "./style.css"; import "./style.css";
import { VNode } from "preact";
import BasicPropertiesTab from "./BasicPropertiesTab";
type TitleFn = string | ((context: TabContext) => string); type TitleFn = string | ((context: TabContext) => string);
@@ -13,6 +15,7 @@ interface TabContext {
interface TabConfiguration { interface TabConfiguration {
title: TitleFn; title: TitleFn;
icon: string; icon: string;
content?: () => VNode;
} }
const TAB_CONFIGURATION: TabConfiguration[] = [ const TAB_CONFIGURATION: TabConfiguration[] = [
@@ -59,7 +62,8 @@ const TAB_CONFIGURATION: TabConfiguration[] = [
{ {
// BasicProperties // BasicProperties
title: t("basic_properties.basic_properties"), title: t("basic_properties.basic_properties"),
icon: "bx bx-slider" icon: "bx bx-slider",
content: BasicPropertiesTab
}, },
{ {
// OwnedAttributeListWidget // OwnedAttributeListWidget
@@ -98,6 +102,7 @@ export default function Ribbon() {
const { note } = useNoteContext(); const { note } = useNoteContext();
const context: TabContext = { note }; const context: TabContext = { note };
const [ activeTab, setActiveTab ] = useState<number>(); const [ activeTab, setActiveTab ] = useState<number>();
const activeTabConfiguration = activeTab ? TAB_CONFIGURATION[activeTab] : undefined;
return ( return (
<div class="ribbon-container" style={{ contain: "none" }}> <div class="ribbon-container" style={{ contain: "none" }}>
@@ -122,7 +127,11 @@ export default function Ribbon() {
<div className="ribbon-button-container"></div> <div className="ribbon-button-container"></div>
</div> </div>
<div className="ribbon-body-container"></div> <div className="ribbon-body-container">
<div className="ribbon-body">
{activeTabConfiguration?.content && activeTabConfiguration.content()}
</div>
</div>
</div> </div>
) )
} }

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

@@ -80,7 +80,6 @@
} }
.ribbon-body { .ribbon-body {
display: none;
border-bottom: 1px solid var(--main-border-color); border-bottom: 1px solid var(--main-border-color);
margin-left: 10px; margin-left: 10px;
margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */ margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */