gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

Added zen mode for mobile layout (useful on tablets)

Browse Source
This commit is contained in:
Papierkorb2292 2025-08-08 09:15:01 +02:00
parent 35b628e799
commit d975790e79
4 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/layouts/mobile_layout.ts
View File

@ -26,6 +26,7 @@ import TabRowWidget from "../widgets/tab_row.js";
import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
import MobileEditorToolbar from "../widgets/ribbon_widgets/mobile_editor_toolbar.js";
import { applyModals } from "./layout_commons.js";
import CloseZenButton from "../widgets/close_zen_button.js";
const MOBILE_CSS = `
<style>
@ -174,7 +175,8 @@ export default class MobileLayout {
.id("mobile-bottom-bar")
.child(new TabRowWidget().css("height", "40px"))
.child(new FlexContainer("row").class("horizontal").css("height", "53px").child(new LauncherContainer(true)).child(new GlobalMenuWidget(true)).id("launcher-pane"))
);
)
.child(new CloseZenButton());
applyModals(rootContainer);
return rootContainer;
}

8
apps/client/src/stylesheets/style.css
View File

@ -1886,6 +1886,7 @@ body.zen #launcher-container,
body.zen #launcher-pane,
body.zen #left-pane,
body.zen #right-pane,
body.zen #mobile-sidebar-wrapper,
body.zen .tab-row-container,
body.zen .tab-row-widget,
body.zen .ribbon-container:not(:has(.classic-toolbar-widget.visible)),
@ -1893,7 +1894,8 @@ body.zen .ribbon-container:has(.classic-toolbar-widget.visible) .ribbon-top-row,
body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget.visible)),
body.zen .note-icon-widget,
body.zen .title-row .button-widget,
body.zen .floating-buttons-children > *:not(.bx-edit-alt) {
body.zen .floating-buttons-children > *:not(.bx-edit-alt),
body.zen .action-button {
display: none !important;
}
@ -1935,6 +1937,10 @@ body.zen .note-title-widget input {
background: transparent !important;
}
body.zen #detail-container {
width: 100%;
}
/* Content renderer */
footer.file-footer,

1
apps/client/src/widgets/buttons/global_menu.ts
View File

@ -363,7 +363,6 @@ export default class GlobalMenuWidget extends BasicWidget {
this.$zoomState = this.$widget.find(".zoom-state");
this.$toggleZenMode = this.$widget.find('[data-trigger-command="toggleZenMode"');
this.$toggleZenMode.toggle(!utils.isMobile());
this.$widget.on("show.bs.dropdown", () => this.#onShown());
if (this.tooltip) {
this.$widget.on("hide.bs.dropdown", () => this.tooltip.enable());

6
apps/client/src/widgets/close_zen_button.ts
View File

@ -1,5 +1,6 @@
import BasicWidget from "./basic_widget.js";
import { t } from "../services/i18n.js";
import utils from "../services/utils.js";
const TPL = /*html*/`\
<div class="close-zen-container">
@ -28,6 +29,10 @@ const TPL = /*html*/`\
-webkit-app-region: no-drag;
}
body.zen .mobile-close-zen-container {
top: -2px;
}
body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
right: unset;
@ -40,6 +45,7 @@ export default class CloseZenButton extends BasicWidget {
doRender(): void {
this.$widget = $(TPL);
this.$widget.toggleClass("mobile-close-zen-container", utils.isMobile())
}
zenChangedEvent() {