mirror of
https://github.com/zadam/trilium.git
synced 2025-12-12 10:24:23 +01:00
feat(layout): reverse the layout of the ribbon
This commit is contained in:
parent
460d20d6b2
commit
e58d6bf2a3
@ -19,10 +19,17 @@ type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
|
||||
let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
|
||||
|
||||
export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
|
||||
return getEnabledFeatures().has(featureId);
|
||||
}
|
||||
|
||||
export function getEnabledExperimentalFeatureIds() {
|
||||
return getEnabledFeatures().values();
|
||||
}
|
||||
|
||||
function getEnabledFeatures() {
|
||||
if (!enabledFeatures) {
|
||||
const features = JSON.parse(options.get("experimentalFeatures")) as string[];
|
||||
enabledFeatures = new Set(features);
|
||||
}
|
||||
|
||||
return enabledFeatures.has(featureId);
|
||||
return enabledFeatures;
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import FlexContainer from "./flex_container.js";
|
||||
import options from "../../services/options.js";
|
||||
import type BasicWidget from "../basic_widget.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.
|
||||
@ -37,6 +38,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
|
||||
this.#setBackdropEffects();
|
||||
this.#setThemeCapabilities();
|
||||
this.#setLocaleAndDirection(options.get("locale"));
|
||||
this.#setExperimentalFeatures();
|
||||
|
||||
return super.render();
|
||||
}
|
||||
@ -56,7 +58,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
|
||||
|
||||
if (loadResults.isOptionReloaded("maxContentWidth")
|
||||
|| loadResults.isOptionReloaded("centerContent")) {
|
||||
|
||||
|
||||
this.#setMaxContentWidth();
|
||||
}
|
||||
}
|
||||
@ -99,6 +101,12 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
|
||||
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) {
|
||||
const correspondingLocale = LOCALES.find(l => l.id === locale);
|
||||
document.body.lang = locale;
|
||||
|
||||
@ -415,3 +415,17 @@ body[dir=rtl] .attribute-list-editor {
|
||||
pointer-events: none; /* makes it unclickable */
|
||||
}
|
||||
/* #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 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user