Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 10:26:08 +01:00
Code Issues Packages Projects Releases Activity

feat(mobile): improve editing toolbar positioning on Android

Browse Source
This commit is contained in:
Elian Doran
2025-04-10 12:10:43 +03:00
parent fbba76bbb3
commit 0f2bc529bf
3 changed files with 2 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/app/layouts/mobile_layout.ts
View File

@@ -171,6 +171,7 @@ export default class MobileLayout {
.child(new NoteListWidget())
.child(new FilePropertiesWidget().css("font-size", "smaller"))
)
.child(new MobileEditorToolbar())
)
.child(new ProtectedSessionPasswordDialog())
.child(new ConfirmDialog())
@@ -182,7 +183,6 @@ export default class MobileLayout {
.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 MobileEditorToolbar())
.child(new AboutDialog())
.child(new HelpDialog())
.child(new RecentChangesDialog())

29
src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts
View File

@@ -26,9 +26,6 @@ const TPL = /*html*/`\
body.mobile .classic-toolbar-widget.visible {
display: flex;
align-items: flex-end;
position: absolute;
left: 0;
right: 0;
overflow-x: auto;
overscroll-behavior: none;
z-index: 500;
@@ -39,19 +36,6 @@ const TPL = /*html*/`\
height: 3px;
}
@media (max-width: 991px) {
body.mobile .classic-toolbar-widget.visible {
bottom: calc(var(--tab-bar-height) + var(--launcher-pane-height) + var(--mobile-bottom-offset));
}
}
@media (min-width: 991px) {
body.mobile .classic-toolbar-widget.visible {
bottom: 0;
left: 25%;
}
}
body.mobile .classic-toolbar-widget.dropdown-active {
height: 50vh;
}
@@ -94,10 +78,6 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
this.$widget = $(TPL);
this.contentSized();
// The virtual keyboard obscures the editing toolbar so we have to reposition by calculating the height of the keyboard.
window.visualViewport?.addEventListener("resize", () => this.#adjustPosition());
window.addEventListener("scroll", () => this.#adjustPosition());
// Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable.
this.observer.disconnect();
this.observer.observe(this.$widget[0], {
@@ -111,15 +91,6 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
this.$widget[0].classList.toggle("dropdown-active", dropdownActive);
}
#adjustPosition() {
let bottom = window.innerHeight - (window.visualViewport?.height || 0);
// When the keyboard is not visible, align it to the launcher bar instead.
bottom = Math.max(bottom, document.getElementById("mobile-bottom-bar")?.offsetHeight || 0);
this.$widget.css("bottom", `${bottom}px`);
}
async #shouldDisplay() {
if (!this.note || this.note.type !== "text") {
return false;

2
src/views/mobile.ejs
View File

@@ -5,7 +5,7 @@
<link rel="shortcut icon" href="favicon.ico">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
<meta name="theme-color" content="#fff">
<title>TriliumNext Notes</title>
<link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">