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

feat(layout): reverse the layout of the ribbon

Browse Source
This commit is contained in:
Elian Doran 2025-12-09 19:51:53 +02:00
parent 460d20d6b2
commit e58d6bf2a3
No known key found for this signature in database
3 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,10 +19,17 @@ type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
let enabledFeatures: Set<ExperimentalFeatureId> | null = null; let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean { export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
return getEnabledFeatures().has(featureId);
}
export function getEnabledExperimentalFeatureIds() {
return getEnabledFeatures().values();
}
function getEnabledFeatures() {
if (!enabledFeatures) { if (!enabledFeatures) {
const features = JSON.parse(options.get("experimentalFeatures")) as string[]; const features = JSON.parse(options.get("experimentalFeatures")) as string[];
enabledFeatures = new Set(features); enabledFeatures = new Set(features);
} }
return enabledFeatures;
return enabledFeatures.has(featureId);
} }

10
apps/client/src/widgets/containers/root_container.ts
View File

@ -5,6 +5,7 @@ import FlexContainer from "./flex_container.js";
import options from "../../services/options.js"; import options from "../../services/options.js";
import type BasicWidget from "../basic_widget.js"; import type BasicWidget from "../basic_widget.js";
import utils from "../../services/utils.js"; import utils from "../../services/utils.js";
import { getEnabledExperimentalFeatureIds } from "../../services/experimental_features.js";
/** /**
* The root container is the top-most widget/container, from which the entire layout derives. * The root container is the top-most widget/container, from which the entire layout derives.
@ -37,6 +38,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
this.#setBackdropEffects(); this.#setBackdropEffects();
this.#setThemeCapabilities(); this.#setThemeCapabilities();
this.#setLocaleAndDirection(options.get("locale")); this.#setLocaleAndDirection(options.get("locale"));
this.#setExperimentalFeatures();
return super.render(); return super.render();
} }
@ -56,7 +58,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
if (loadResults.isOptionReloaded("maxContentWidth") if (loadResults.isOptionReloaded("maxContentWidth")
|| loadResults.isOptionReloaded("centerContent")) { || loadResults.isOptionReloaded("centerContent")) {
this.#setMaxContentWidth(); this.#setMaxContentWidth();
} }
} }
@ -99,6 +101,12 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
document.body.classList.toggle("theme-supports-background-effects", useBgfx); document.body.classList.toggle("theme-supports-background-effects", useBgfx);
} }
#setExperimentalFeatures() {
for (const featureId of getEnabledExperimentalFeatureIds()) {
document.body.classList.add(`experimental-feature-${featureId}`);
}
}
#setLocaleAndDirection(locale: string) { #setLocaleAndDirection(locale: string) {
const correspondingLocale = LOCALES.find(l => l.id === locale); const correspondingLocale = LOCALES.find(l => l.id === locale);
document.body.lang = locale; document.body.lang = locale;

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

@ -415,3 +415,17 @@ body[dir=rtl] .attribute-list-editor {
pointer-events: none; /* makes it unclickable */ pointer-events: none; /* makes it unclickable */
} }
/* #endregion */ /* #endregion */
/* #region Experimental layout */
body.experimental-feature-new-layout .ribbon-container {
display: flex;
flex-direction: column-reverse;
border-top: 1px solid var(--main-border-color);
.ribbon-tab-spacer,
.ribbon-button-container,
.ribbon-body {
border-bottom: 0 !important;
}
}
/* #endregion */