diff --git a/src/public/app/layouts/mobile_layout.ts b/src/public/app/layouts/mobile_layout.ts index e7cea7576..f131c0c4f 100644 --- a/src/public/app/layouts/mobile_layout.ts +++ b/src/public/app/layouts/mobile_layout.ts @@ -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()) diff --git a/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts b/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts index 81b8a1d97..bb121f365 100644 --- a/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts +++ b/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts @@ -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; diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs index c1a99ea86..3edaec86a 100644 --- a/src/views/mobile.ejs +++ b/src/views/mobile.ejs @@ -5,7 +5,7 @@ - + TriliumNext Notes