gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 18:34:24 +01:00
Code Issues Actions 7 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 customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
const isFloatingTitlebar = isExperimentalFeatureEnabled("floating-titlebar");
const titleRow = new FlexContainer("row")
.class("title-row")
@ -149,7 +150,7 @@ export default class DesktopLayout {
.child(<CreatePaneButton />)
.optChild(isNewLayout, <NoteActions />)
)
.optChild(!isNewLayout, titleRow)
.optChild(!isFloatingTitlebar, titleRow)
.optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>)
.optChild(isNewLayout, <StandaloneRibbonAdapter component={FormattingToolbar} />)
.child(new WatchedFileUpdateStatusWidget())
@ -157,7 +158,7 @@ export default class DesktopLayout {
.child(
new ScrollingContainer()
.filling()
.optChild(isNewLayout, titleRow)
.optChild(isFloatingTitlebar, titleRow)
.optChild(isNewLayout, <NoteTitleDetails />)
.optChild(!isNewLayout, new ContentHeader()
.child(<ReadOnlyNoteInfoBar />)

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

@ -12,6 +12,11 @@ export const experimentalFeatures = [
id: "new-layout",
name: t("experimental_features.new_layout_name"),
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[];

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

@ -1102,7 +1102,9 @@
"title": "Experimental Options",
"disclaimer": "These options are experimental and may cause instability. Use with caution.",
"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": {
"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 {
.title-row,
.title-details {
max-width: var(--max-content-width);
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 {
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)),
.note-split.type-book {
.title-row,
.title-details {
width: 100%;
max-width: unset;
padding-inline-start: 15px;
}
.title-details {
padding-bottom: 0.2em;
font-size: 0.8em;
}
}
&.prefers-centered-content .title-row,
&.prefers-centered-content .title-details {
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;
}
}