gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-19 22:04:26 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

refactor(ribbon): decouple completely from new layout

Browse Source
This commit is contained in:
Elian Doran 2025-12-14 23:50:40 +02:00
parent 749074ea94
commit 8fa6e38382
No known key found for this signature in database
4 changed files with 24 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/layouts/desktop_layout.tsx
View File

@ -143,8 +143,7 @@ export default class DesktopLayout {
.optChild(!isNewLayout, <ClosePaneButton />)
.optChild(!isNewLayout, <CreatePaneButton />)
.optChild(isNewLayout, <NoteActions />))
.optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>)
.optChild(isNewLayout, <Ribbon />)
.optChild(!isNewLayout, <Ribbon />)
.child(new WatchedFileUpdateStatusWidget())
.child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
.child(

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

@ -5,9 +5,9 @@ import clsx from "clsx";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { EventNames } from "../../components/app_context";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
import { Indexed, numberObjectsInPlace } from "../../services/utils";
import { useNoteContext, useNoteProperty, useStaticTooltipWithKeyboardShortcut, useTriliumEvents } from "../react/hooks";
import NoteActions from "./NoteActions";
import { TabConfiguration, TitleContext } from "./ribbon-interface";
import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
@ -17,9 +17,7 @@ interface ComputedTab extends Indexed<TabConfiguration> {
shouldShow: boolean;
}
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export default function Ribbon({ children }: { children?: preact.ComponentChildren }) {
export default function Ribbon() {
const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId, isReadOnlyTemporarilyDisabled } = useNoteContext();
const noteType = useNoteProperty(note, "type");
const [ activeTabIndex, setActiveTabIndex ] = useState<number | undefined>();
@ -32,8 +30,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
async function refresh() {
const computedTabs: ComputedTab[] = [];
for (const tab of TAB_CONFIGURATION) {
const shouldAvoid = (isNewLayout && tab.avoidInNewLayout);
const shouldShow = !shouldAvoid && await shouldShowTab(tab.show, titleContext);
const shouldShow = await shouldShowTab(tab.show, titleContext);
computedTabs.push({
...tab,
shouldShow: !!shouldShow
@ -92,7 +89,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
/>
))}
</div>
{children}
<NoteActions />
</div>
<div className="ribbon-body-container">
@ -115,7 +112,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
noteContext={noteContext}
componentId={componentId}
activate={useCallback(() => {
setActiveTabIndex(tab.index)
setActiveTabIndex(tab.index);
}, [setActiveTabIndex])}
/>
</div>

36
apps/client/src/widgets/ribbon/RibbonDefinition.ts
View File

@ -1,4 +1,3 @@
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
import { t } from "../../services/i18n";
import options from "../../services/options";
import BasicPropertiesTab from "./BasicPropertiesTab";
@ -18,8 +17,6 @@ import ScriptTab from "./ScriptTab";
import SearchDefinitionTab from "./SearchDefinitionTab";
import SimilarNotesTab from "./SimilarNotesTab";
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
{
title: t("classic_editor_toolbar.title"),
@ -30,15 +27,14 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
toggleCommand: "toggleRibbonTabClassicEditor",
content: FormattingToolbar,
activate: ({ note }) => !options.is("editedNotesOpenInRibbon") || !note?.hasOwnedLabel("dateNote"),
stayInDom: !isNewLayout,
avoidInNewLayout: true
stayInDom: true
},
{
title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),
icon: "bx bx-play",
content: ScriptTab,
activate: true,
show: ({ note }) => note && !isNewLayout &&
show: ({ note }) => note &&
(note.isTriliumScript() || note.isTriliumSqlite()) &&
(note.hasLabel("executeDescription") || note.hasLabel("executeButton"))
},
@ -47,34 +43,34 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
icon: "bx bx-search",
content: SearchDefinitionTab,
activate: true,
show: ({ note }) => !isNewLayout && note?.type === "search"
show: ({ note }) => note?.type === "search"
},
{
title: t("edited_notes.title"),
icon: "bx bx-calendar-edit",
content: EditedNotesTab,
show: ({ note }) => !isNewLayout && note?.hasOwnedLabel("dateNote"),
show: ({ note }) => note?.hasOwnedLabel("dateNote"),
activate: () => options.is("editedNotesOpenInRibbon")
},
{
title: t("book_properties.book_properties"),
icon: "bx bx-book",
content: CollectionPropertiesTab,
show: ({ note }) => !isNewLayout && (note?.type === "book" || note?.type === "search"),
show: ({ note }) => (note?.type === "book" || note?.type === "search"),
toggleCommand: "toggleRibbonTabBookProperties"
},
{
title: t("note_properties.info"),
icon: "bx bx-info-square",
content: NotePropertiesTab,
show: ({ note }) => !isNewLayout && !!note?.getLabelValue("pageUrl"),
show: ({ note }) => !!note?.getLabelValue("pageUrl"),
activate: true
},
{
title: t("file_properties.title"),
icon: "bx bx-file",
content: FilePropertiesTab,
show: ({ note }) => !isNewLayout && note?.type === "file",
show: ({ note }) => note?.type === "file",
toggleCommand: "toggleRibbonTabFileProperties",
activate: ({ note }) => note?.mime !== "application/pdf"
},
@ -82,7 +78,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
title: t("image_properties.title"),
icon: "bx bx-image",
content: ImagePropertiesTab,
show: ({ note }) => !isNewLayout && note?.type === "image",
show: ({ note }) => note?.type === "image",
toggleCommand: "toggleRibbonTabImageProperties",
activate: true,
},
@ -90,49 +86,49 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
title: t("basic_properties.basic_properties"),
icon: "bx bx-slider",
content: BasicPropertiesTab,
show: ({note}) => !isNewLayout && !note?.isLaunchBarConfig(),
show: ({note}) => !note?.isLaunchBarConfig(),
toggleCommand: "toggleRibbonTabBasicProperties"
},
{
title: t("owned_attribute_list.owned_attributes"),
icon: "bx bx-list-check",
content: OwnedAttributesTab,
show: ({note}) => !isNewLayout && !note?.isLaunchBarConfig(),
show: ({note}) => !note?.isLaunchBarConfig(),
toggleCommand: "toggleRibbonTabOwnedAttributes",
stayInDom: !isNewLayout
stayInDom: true
},
{
title: t("inherited_attribute_list.title"),
icon: "bx bx-list-plus",
content: InheritedAttributesTab,
show: ({note}) => !isNewLayout && !note?.isLaunchBarConfig(),
show: ({note}) => !note?.isLaunchBarConfig(),
toggleCommand: "toggleRibbonTabInheritedAttributes"
},
{
title: t("note_paths.title"),
icon: "bx bx-collection",
content: NotePathsTab,
show: !isNewLayout,
show: true,
toggleCommand: "toggleRibbonTabNotePaths"
},
{
title: t("note_map.title"),
icon: "bx bxs-network-chart",
content: NoteMapTab,
show: !isNewLayout,
show: true,
toggleCommand: "toggleRibbonTabNoteMap"
},
{
title: t("similar_notes.title"),
icon: "bx bx-bar-chart",
show: ({ note }) => !isNewLayout && note?.type !== "search" && !note?.isLabelTruthy("similarNotesWidgetDisabled"),
show: ({ note }) => note?.type !== "search" && !note?.isLabelTruthy("similarNotesWidgetDisabled"),
content: SimilarNotesTab,
toggleCommand: "toggleRibbonTabSimilarNotes"
},
{
title: t("note_info_widget.title"),
icon: "bx bx-info-circle",
show: ({ note }) => !isNewLayout && !!note,
show: ({ note }) => !!note,
content: NoteInfoTab,
toggleCommand: "toggleRibbonTabNoteInfo"
}

4
apps/client/src/widgets/ribbon/ribbon-interface.ts
View File

@ -1,7 +1,8 @@
import { KeyboardActionNames } from "@triliumnext/commons";
import { VNode } from "preact";
import NoteContext from "../../components/note_context";
import FNote from "../../entities/fnote";
import { VNode } from "preact";
export interface TabContext {
note: FNote | null | undefined;
@ -30,5 +31,4 @@ export interface TabConfiguration {
* By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar) or if event handling is needed.
*/
stayInDom?: boolean;
avoidInNewLayout?: boolean;
}