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

feat(layout): move fixed formatting toolbar above

Browse Source
This commit is contained in:
Elian Doran 2025-12-09 20:36:48 +02:00
parent 394f6c3110
commit cd0e4a5678
No known key found for this signature in database
4 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,8 +46,10 @@ import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
import Breadcrumb from "../widgets/Breadcrumb.jsx";
import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
import { experimentalFeatures, isExperimentalFeatureEnabled } from "../services/experimental_features.js";
import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
import NoteActions from "../widgets/ribbon/NoteActions.jsx";
import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
export default class DesktopLayout {
@ -149,6 +151,7 @@ export default class DesktopLayout {
)
.optChild(!isNewLayout, titleRow)
.optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>)
.optChild(isNewLayout, <StandaloneRibbonAdapter component={FormattingToolbar} />)
.child(new WatchedFileUpdateStatusWidget())
.child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
.child(

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

@ -4,11 +4,11 @@ import "./style.css";
import { Indexed, numberObjectsInPlace } from "../../services/utils";
import { EventNames } from "../../components/app_context";
import NoteActions from "./NoteActions";
import { KeyboardActionNames } from "@triliumnext/commons";
import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
import { TabConfiguration, TitleContext } from "./ribbon-interface";
import clsx from "clsx";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>(RIBBON_TAB_DEFINITIONS);
@ -16,6 +16,8 @@ interface ComputedTab extends Indexed<TabConfiguration> {
shouldShow: boolean;
}
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export default function Ribbon({ children }: { children?: preact.ComponentChildren }) {
const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId, isReadOnlyTemporarilyDisabled } = useNoteContext();
const noteType = useNoteProperty(note, "type");
@ -29,7 +31,8 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
async function refresh() {
const computedTabs: ComputedTab[] = [];
for (const tab of TAB_CONFIGURATION) {
const shouldShow = await shouldShowTab(tab.show, titleContext);
const shouldAvoid = (isNewLayout && tab.avoidInNewLayout);
const shouldShow = !shouldAvoid && await shouldShowTab(tab.show, titleContext);
computedTabs.push({
...tab,
shouldShow: !!shouldShow

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

@ -24,12 +24,12 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
icon: "bx bx-text",
show: async ({ note, noteContext }) => note?.type === "text"
&& options.get("textNoteEditorType") === "ckeditor-classic"
&& !isExperimentalFeatureEnabled("new-layout")
&& !(await noteContext?.isReadOnly()),
toggleCommand: "toggleRibbonTabClassicEditor",
content: FormattingToolbar,
activate: ({ note }) => !options.is("editedNotesOpenInRibbon") || !note?.hasOwnedLabel("dateNote"),
stayInDom: true
stayInDom: !isExperimentalFeatureEnabled("new-layout"),
avoidInNewLayout: true
},
{
title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),

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

@ -30,4 +30,5 @@ 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;
}