Merge pull request #4202 from eliandoran/feature/jump_to_note_list

Use a list instead of dropdown for jump-to-note

src/public/app/services/note_autocomplete.js

@@ -106,7 +106,7 @@ function initNoteAutocomplete($el, options) {
     $el.addClass("note-autocomplete-input");
 
     const $clearTextButton = $("<a>")
-            .addClass("input-group-text input-clearer-button bx bx-x")
+            .addClass("input-group-text input-clearer-button bx bxs-tag-x")
             .prop("title", "Clear text field");
 
     const $showRecentNotesButton = $("<a>")
@@ -137,7 +137,14 @@ function initNoteAutocomplete($el, options) {
         return false;
     });
 
+    let autocompleteOptions = {};
+    if (options.container) {
+        autocompleteOptions.dropdownMenuContainer = options.container;
+        autocompleteOptions.debug = true;   // don't close on blur
+    }
+
     $el.autocomplete({
+        ...autocompleteOptions,
         appendTo: document.querySelector('body'),
         hint: false,
         autoselect: true,

src/public/app/widgets/dialogs/jump_to_note.js

@@ -8,18 +8,16 @@ const TPL = `<div class="jump-to-note-dialog modal mx-auto" tabindex="-1" role="
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Jump to note</h5>
+                <div class="input-group">
+                    <input class="jump-to-note-autocomplete form-control" placeholder="search for note by its name">
+                </div>
+
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <div class="form-group">
+                <div class="algolia-autocomplete-container jump-to-note-results"></div>
-                    <label for="jump-to-note-autocomplete">Note</label>
-                    <div class="input-group">
-                        <input class="jump-to-note-autocomplete form-control" placeholder="search for note by its name">
-                    </div>
-                </div>
             </div>
             <div class="modal-footer">
                 <button class="show-in-full-text-button btn btn-sm">Search in full text <kbd>Ctrl+Enter</kbd></button>
@@ -40,6 +38,7 @@ export default class JumpToNoteDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete");
+        this.$results = this.$widget.find(".jump-to-note-results");
         this.$showInFullTextButton = this.$widget.find(".show-in-full-text-button");
         this.$showInFullTextButton.on('click', e => this.showInFullText(e));
 
@@ -56,7 +55,11 @@ export default class JumpToNoteDialog extends BasicWidget {
     }
 
     async refresh() {
-        noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {hideGoToSelectedNoteButton: true})
+        noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {
+            allowCreatingNotes: true,
+            hideGoToSelectedNoteButton: true,
+            container: this.$results
+        })
             // clear any event listener added in previous invocation of this function
             .off('autocomplete:noteselected')
             .on('autocomplete:noteselected', function (event, suggestion, dataset) {

src/public/stylesheets/style.css

@@ -504,6 +504,11 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     z-index: 2000 !important;
 }
 
+.algolia-autocomplete-container .aa-dropdown-menu {
+    position: inherit !important;    
+    overflow: auto;
+}
+
 .algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
     width: 100%;
 }
@@ -520,18 +525,18 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     margin: 0;
 }
 
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
+.aa-dropdown-menu .aa-suggestion {
     cursor: pointer;
     padding: 5px;
     margin: 0;
 }
 
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion p {
+.aa-dropdown-menu .aa-suggestion p {
     padding: 0;
     margin: 0;
 }
 
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
+.aa-dropdown-menu .aa-suggestion.aa-cursor {
     color: var(--active-item-text-color);
     background-color: var(--active-item-background-color);
 }
@@ -1069,3 +1074,20 @@ textarea {
     position: relative;
     top: 8px;
 }
+
+.jump-to-note-dialog .modal-header {
+    align-items: center;
+    padding-bottom: 1rem !important;
+}
+
+.jump-to-note-dialog .modal-body {
+    padding: 0;
+}
+
+.jump-to-note-results .aa-dropdown-menu {
+    max-height: 40vh;
+}
+
+.jump-to-note-results .aa-suggestions {
+    padding: 1rem;
+}