add quick search in mobile layout (#2360)

Co-authored-by: jasongwq <[email protected]>
zadam · Nov 20, 2021 · db9e35a · db9e35a
1 parent 7a383a1
commit db9e35a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
@@ -1,6 +1,7 @@
 import FlexContainer from "../widgets/containers/flex_container.js";
 import NoteTitleWidget from "../widgets/note_title.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
+import QuickSearchWidget from "../widgets/quick_search.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_buttons.js";
 import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
@@ -27,13 +28,19 @@ kbd {
     padding-right: 0.5em;
     color: var(--main-text-color);
 }
+.quick-search {
+    margin: 55px 0px 0px 0px;
+}
+.quick-search .dropdown-menu {
+    max-width: 350px;
+}
 </style>`;
 
 const FANCYTREE_CSS = `
 <style>
 .tree-wrapper {
     max-height: 100%;
-    margin-top: 55px;
+    margin-top: 0px;
     overflow-y: auto;
     contain: content;
     padding-left: 10px;
@@ -95,6 +102,7 @@ export default class MobileLayout {
                 .css('padding-left', 0)
                 .css('contain', 'content')
                 .child(new MobileGlobalButtonsWidget())
+                .child(new QuickSearchWidget())
                 .child(new NoteTreeWidget("main")
                     .cssBlock(FANCYTREE_CSS)))
             .child(new ScreenContainer("detail", "column")

diff --git a/src/public/app/widgets/quick_search.js b/src/public/app/widgets/quick_search.js
@@ -52,6 +52,20 @@ export default class QuickSearchWidget extends BasicWidget {
 
         this.$widget.find('.input-group-prepend').on('shown.bs.dropdown', () => this.search());
 
+        if(utils.isMobile()) {
+            this.$searchString.keydown(e =>{
+                if(e.which==13) {
+                    if (this.$dropdownMenu.is(":visible")) {
+                        this.search(); // just update already visible dropdown
+                    } else {
+                        this.$dropdownToggle.dropdown('show');
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            })
+        }
+
         utils.bindElShortcut(this.$searchString, 'return', () => {
             if (this.$dropdownMenu.is(":visible")) {
                 this.search(); // just update already visible dropdown