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

feat(layout): extract floating titlebar into its own experimental feature

Browse Source
This commit is contained in:
Elian Doran 2025-12-11 22:29:22 +02:00
parent 24cd5006d5
commit 61fe27abbe
No known key found for this signature in database
4 changed files with 43 additions and 17 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

@ -79,6 +79,7 @@ export default class DesktopLayout {
const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac); const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac);
const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows; const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
const isNewLayout = isExperimentalFeatureEnabled("new-layout"); const isNewLayout = isExperimentalFeatureEnabled("new-layout");
const isFloatingTitlebar = isExperimentalFeatureEnabled("floating-titlebar");
const titleRow = new FlexContainer("row") const titleRow = new FlexContainer("row")
.class("title-row") .class("title-row")
@ -149,7 +150,7 @@ export default class DesktopLayout {
.child(<CreatePaneButton />) .child(<CreatePaneButton />)
.optChild(isNewLayout, <NoteActions />) .optChild(isNewLayout, <NoteActions />)
) )
.optChild(!isNewLayout, titleRow) .optChild(!isFloatingTitlebar, titleRow)
.optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>) .optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>)
.optChild(isNewLayout, <StandaloneRibbonAdapter component={FormattingToolbar} />) .optChild(isNewLayout, <StandaloneRibbonAdapter component={FormattingToolbar} />)
.child(new WatchedFileUpdateStatusWidget()) .child(new WatchedFileUpdateStatusWidget())
@ -157,7 +158,7 @@ export default class DesktopLayout {
.child( .child(
new ScrollingContainer() new ScrollingContainer()
.filling() .filling()
.optChild(isNewLayout, titleRow) .optChild(isFloatingTitlebar, titleRow)
.optChild(isNewLayout, <NoteTitleDetails />) .optChild(isNewLayout, <NoteTitleDetails />)
.optChild(!isNewLayout, new ContentHeader() .optChild(!isNewLayout, new ContentHeader()
.child(<ReadOnlyNoteInfoBar />) .child(<ReadOnlyNoteInfoBar />)

5
apps/client/src/services/experimental_features.ts
View File

@ -12,6 +12,11 @@ export const experimentalFeatures = [
id: "new-layout", id: "new-layout",
name: t("experimental_features.new_layout_name"), name: t("experimental_features.new_layout_name"),
description: t("experimental_features.new_layout_description"), description: t("experimental_features.new_layout_description"),
},
{
id: "floating-titlebar",
name: t("experimental_features.floating_titlebar"),
description: t("experimental_features.floating_titlebar_description"),
} }
] as const satisfies ExperimentalFeature[]; ] as const satisfies ExperimentalFeature[];

4
apps/client/src/translations/en/translation.json
View File

@ -1102,7 +1102,9 @@
"title": "Experimental Options", "title": "Experimental Options",
"disclaimer": "These options are experimental and may cause instability. Use with caution.", "disclaimer": "These options are experimental and may cause instability. Use with caution.",
"new_layout_name": "New Layout", "new_layout_name": "New Layout",
"new_layout_description": "Try out the new layout for a more modern look and improved usability. Subject to heavy change in the upcoming releases." "new_layout_description": "Try out the new layout for a more modern look and improved usability. Subject to heavy change in the upcoming releases.",
"floating_titlebar": "Floating Titlebar",
"floating_titlebar_description": "The title bar is part of the content and is scrolled along with the note content."
}, },
"fonts": { "fonts": {
"theme_defined": "Theme defined", "theme_defined": "Theme defined",

46
apps/client/src/widgets/note_title.css
View File

@ -30,7 +30,6 @@ body.desktop .note-title-widget input.note-title {
} }
body.experimental-feature-new-layout { body.experimental-feature-new-layout {
.title-row,
.title-details { .title-details {
max-width: var(--max-content-width); max-width: var(--max-content-width);
padding: 0; padding: 0;
@ -52,14 +51,6 @@ body.experimental-feature-new-layout {
} }
} }
.title-row {
.note-icon-widget {
padding: 0;
width: 41px;
}
}
.note-split.type-code:not(.mime-text-x-sqlite) .title-row,
.note-split.type-code:not(.mime-text-x-sqlite) .title-details { .note-split.type-code:not(.mime-text-x-sqlite) .title-details {
background-color: var(--main-background-color); background-color: var(--main-background-color);
} }
@ -79,21 +70,48 @@ body.experimental-feature-new-layout {
.scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)), .scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)),
.note-split.type-book { .note-split.type-book {
.title-row,
.title-details { .title-details {
width: 100%; width: 100%;
max-width: unset; max-width: unset;
padding-inline-start: 15px; padding-inline-start: 15px;
}
.title-details {
padding-bottom: 0.2em; padding-bottom: 0.2em;
font-size: 0.8em; font-size: 0.8em;
} }
} }
&.prefers-centered-content .title-row,
&.prefers-centered-content .title-details { &.prefers-centered-content .title-details {
margin-inline: auto; margin-inline: auto;
} }
} }
body.experimental-feature-floating-titlebar {
.title-row {
max-width: var(--max-content-width);
padding: 0;
padding-inline-start: 24px;
}
.note-icon-widget {
padding: 0;
width: 41px;
}
.note-split.type-code:not(.mime-text-x-sqlite) .title-row {
background-color: var(--main-background-color);
}
.scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)),
.note-split.type-book {
.title-row {
width: 100%;
max-width: unset;
padding-inline-start: 15px;
padding-bottom: 0.2em;
font-size: 0.8em;
}
}
&.prefers-centered-content .title-row {
margin-inline: auto;
}
}