feat(mobile): improve positioning of jump to note

TriliumNext · Jan 4, 2025 · 90ec791 · 90ec791
1 parent 57ed133
commit 90ec791
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/src/public/app/services/utils.ts b/src/public/app/services/utils.ts
@@ -269,6 +269,8 @@ async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true) {
     // @ts-ignore
     const keyboardActionsService = (await import("./keyboard_actions.js")).default;
     keyboardActionsService.updateDisplayedShortcuts($dialog);
+
+    return $dialog;
 }
 
 function isHtmlEmpty(html: string) {

diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js
@@ -46,7 +46,30 @@ export default class JumpToNoteDialog extends BasicWidget {
     }
 
     async jumpToNoteEvent() {
-        utils.openDialog(this.$widget);
+        const dialogPromise = utils.openDialog(this.$widget)
+        if (utils.isMobile()) {
+            dialogPromise.then(($dialog) => {
+                const el = $dialog.find(">.modal-dialog")[0];
+
+                function reposition() {
+                    const offset = 100;
+                    const modalHeight = window.visualViewport.height - offset;
+                    const safeAreaInsetBottom = window.visualViewport.height - window.innerHeight;
+                    el.style.height = `${modalHeight}px`;
+                    el.style.bottom = `${window.visualViewport.height - modalHeight - safeAreaInsetBottom - offset}px`;
+                }
+
+                this.$autoComplete.on("focus", () => {
+                    reposition();
+                });
+
+                window.visualViewport.addEventListener("resize", () => {
+                    reposition();
+                });
+
+                reposition();
+            });
+        }
 
         // first open dialog, then refresh since refresh is doing focus which should be visible
         this.refresh();

diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
@@ -1267,6 +1267,15 @@ body.mobile #launcher-pane .dropdown-menu.show {
     body.mobile .options-section table {
         word-break: break-all;
     }
+
+    body.mobile .jump-to-note-dialog .modal-content {
+        overflow-y: auto;
+    }
+
+    body.mobile .jump-to-note-dialog .modal-dialog .aa-dropdown-menu {
+        max-height: unset;
+        overflow: auto;
+    }
 }
 
 /* Mobile, tablet mode */