From abbd0b50ebf4b810d5fa35a3a4ef6905dcff59b1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 26 Aug 2023 17:03:09 +0300 Subject: [PATCH 01/11] jump to note list: Use a fixed container instead of dropdown --- src/public/app/services/note_autocomplete.js | 9 ++++++++- src/public/app/widgets/dialogs/jump_to_note.js | 8 +++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/public/app/services/note_autocomplete.js b/src/public/app/services/note_autocomplete.js index 526bc6dce..1cc86f0fe 100644 --- a/src/public/app/services/note_autocomplete.js +++ b/src/public/app/services/note_autocomplete.js @@ -137,8 +137,15 @@ function initNoteAutocomplete($el, options) { return false; }); + let autocompleteOptions = {}; + if (options.container) { + autocompleteOptions.dropdownMenuContainer = options.container; + } else { + autocompleteOptions.appendTo = document.querySelector('body'); + } + $el.autocomplete({ - appendTo: document.querySelector('body'), + ...autocompleteOptions, hint: false, autoselect: true, // openOnFocus has to be false, otherwise re-focus (after return from note type chooser dialog) forces diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js index 385730260..765d77e22 100644 --- a/src/public/app/widgets/dialogs/jump_to_note.js +++ b/src/public/app/widgets/dialogs/jump_to_note.js @@ -20,6 +20,8 @@ const TPL = `
+ +
@@ -40,6 +42,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 +59,10 @@ export default class JumpToNoteDialog extends BasicWidget { } async refresh() { - noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {hideGoToSelectedNoteButton: true}) + noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, { + 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) { From eea29aba0e35d03cdcc5cf658ee7c68c16317381 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 26 Aug 2023 17:07:04 +0300 Subject: [PATCH 02/11] jump to note list: Don't close jump to note results on lost focus --- src/public/app/services/note_autocomplete.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/public/app/services/note_autocomplete.js b/src/public/app/services/note_autocomplete.js index 1cc86f0fe..e4d1e463a 100644 --- a/src/public/app/services/note_autocomplete.js +++ b/src/public/app/services/note_autocomplete.js @@ -140,8 +140,9 @@ function initNoteAutocomplete($el, options) { let autocompleteOptions = {}; if (options.container) { autocompleteOptions.dropdownMenuContainer = options.container; + autocompleteOptions.debug = true; // don't close on blur } else { - autocompleteOptions.appendTo = document.querySelector('body'); + autocompleteOptions.appendTo = document.querySelector('body'); } $el.autocomplete({ From ae9af8ea23920d08cf882675ab4d1a76e0aa2144 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 26 Aug 2023 17:19:44 +0300 Subject: [PATCH 03/11] jump to note list: Use a proper height to the container --- src/public/app/widgets/dialogs/jump_to_note.js | 2 +- src/public/stylesheets/style.css | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js index 765d77e22..e743e1380 100644 --- a/src/public/app/widgets/dialogs/jump_to_note.js +++ b/src/public/app/widgets/dialogs/jump_to_note.js @@ -21,7 +21,7 @@ const TPL = `
+
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 71931b1c5..562985526 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -504,6 +504,12 @@ 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; + max-height: 40vh; + overflow: scroll; +} + .algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint { width: 100%; } From 4bba0aa842b047583549d4552171f9d46df93ca3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 26 Aug 2023 17:24:29 +0300 Subject: [PATCH 04/11] jump to note list: Re-enable styling --- src/public/stylesheets/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 562985526..106d5b01f 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -526,18 +526,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); } From af4d0c3ba602c00de292aaf0445dd52acdf8f734 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 26 Aug 2023 17:48:12 +0300 Subject: [PATCH 05/11] jump to note list: Improve layout slightly --- src/public/app/services/note_autocomplete.js | 3 +-- src/public/app/widgets/dialogs/jump_to_note.js | 14 ++++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/public/app/services/note_autocomplete.js b/src/public/app/services/note_autocomplete.js index e4d1e463a..0bedd2e02 100644 --- a/src/public/app/services/note_autocomplete.js +++ b/src/public/app/services/note_autocomplete.js @@ -141,12 +141,11 @@ function initNoteAutocomplete($el, options) { if (options.container) { autocompleteOptions.dropdownMenuContainer = options.container; autocompleteOptions.debug = true; // don't close on blur - } else { - autocompleteOptions.appendTo = document.querySelector('body'); } $el.autocomplete({ ...autocompleteOptions, + appendTo: document.querySelector('body'), hint: false, autoselect: true, // openOnFocus has to be false, otherwise re-focus (after return from note type chooser dialog) forces diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js index e743e1380..3f3355433 100644 --- a/src/public/app/widgets/dialogs/jump_to_note.js +++ b/src/public/app/widgets/dialogs/jump_to_note.js @@ -8,19 +8,17 @@ const TPL = `
-
Jump to note
- -
-
-
- +
+ +
+
From 52b5711ecdd5957fddd2b91756ee986ff610395b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Mon, 28 Aug 2023 21:51:40 +0300 Subject: [PATCH 06/11] jump to note: Add "Create and link child note" --- src/public/app/widgets/dialogs/jump_to_note.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js index 3f3355433..f3bf3e9bf 100644 --- a/src/public/app/widgets/dialogs/jump_to_note.js +++ b/src/public/app/widgets/dialogs/jump_to_note.js @@ -58,6 +58,7 @@ export default class JumpToNoteDialog extends BasicWidget { async refresh() { noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, { + allowCreatingNotes: true, hideGoToSelectedNoteButton: true, container: this.$results }) From 8c247ba7c6076f77b12e286a6af16cf1951665de Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Mon, 28 Aug 2023 22:12:14 +0300 Subject: [PATCH 07/11] jump to note list: Improve layout --- src/public/stylesheets/style.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 106d5b01f..7cda1dec6 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -505,8 +505,7 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th } .algolia-autocomplete-container .aa-dropdown-menu { - position: inherit !important; - max-height: 40vh; + position: inherit !important; overflow: scroll; } @@ -1075,3 +1074,15 @@ textarea { position: relative; top: 8px; } + +.jump-to-note-dialog .modal-body { + padding: 0 1rem; +} + +.jump-to-note-results .aa-dropdown-menu { + max-height: 40vh; +} + +.jump-to-note-results .aa-suggestions { + padding: 1rem 0; +} From c6e8966ecdc4cc8593ced911775f5fff0116be73 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Mon, 28 Aug 2023 22:15:36 +0300 Subject: [PATCH 08/11] jump to note: Improve position of close button --- src/public/app/widgets/dialogs/jump_to_note.js | 6 ++---- src/public/stylesheets/style.css | 5 +++++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/public/app/widgets/dialogs/jump_to_note.js b/src/public/app/widgets/dialogs/jump_to_note.js index f3bf3e9bf..c6bfed2e7 100644 --- a/src/public/app/widgets/dialogs/jump_to_note.js +++ b/src/public/app/widgets/dialogs/jump_to_note.js @@ -8,10 +8,8 @@ const TPL = `
-
-
- -
+
+