From b936a63db3bfad084fc608523c7999309ec882b9 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Tue, 26 Jan 2021 14:44:53 +0100
Subject: [PATCH] improvements to the search spec help button

---
 src/public/app/services/glob.js               |  6 +-----
 src/public/app/services/utils.js              | 21 ++++++++++++++++++-
 .../widgets/search_options/search_string.js   |  6 ++++--
 src/public/stylesheets/style.css              |  7 +++++++
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/public/app/services/glob.js b/src/public/app/services/glob.js
index 6692bf6ff..352032194 100644
--- a/src/public/app/services/glob.js
+++ b/src/public/app/services/glob.js
@@ -73,11 +73,7 @@ function setupGlobs() {
         libraryLoader.requireCss(`api/notes/download/${appCssNoteId}`);
     }
 
-    const wikiBaseUrl = "https://github.com/zadam/trilium/wiki/";
-
-    $(document).on("click", "*[data-help-page]", e => {
-        window.open(wikiBaseUrl + $(e.target).attr("data-help-page"), '_blank');
-    });
+    utils.initHelpButtons($(window));
 
     $("body").on("click", "a.external", function () {
         window.open($(this).attr("href"), '_blank');
diff --git a/src/public/app/services/utils.js b/src/public/app/services/utils.js
index aad45b500..6f9c97b3e 100644
--- a/src/public/app/services/utils.js
+++ b/src/public/app/services/utils.js
@@ -317,6 +317,23 @@ function timeLimit(promise, limitMs) {
     });
 }
 
+function initHelpDropdown($el) {
+    // stop inside clicks from closing the menu
+    const $dropdownMenu = $el.find('.help-dropdown .dropdown-menu');
+    $dropdownMenu.on('click', e => e.stopPropagation());
+
+    // previous propagation stop will also block help buttons from being opened so we need to re-init for this element
+    initHelpButtons($dropdownMenu);
+}
+
+const wikiBaseUrl = "https://github.com/zadam/trilium/wiki/"
+
+function initHelpButtons($el) {
+    $el.on("click", "*[data-help-page]", e => {
+        window.open(wikiBaseUrl + $(e.target).attr("data-help-page"), '_blank');
+    });
+}
+
 export default {
     reloadApp,
     parseDate,
@@ -355,5 +372,7 @@ export default {
     copySelectionToClipboard,
     isCKEditorInitialized,
     dynamicRequire,
-    timeLimit
+    timeLimit,
+    initHelpDropdown,
+    initHelpButtons
 };
diff --git a/src/public/app/widgets/search_options/search_string.js b/src/public/app/widgets/search_options/search_string.js
index d40908c54..43b2149e1 100644
--- a/src/public/app/widgets/search_options/search_string.js
+++ b/src/public/app/widgets/search_options/search_string.js
@@ -10,10 +10,10 @@ const TPL = `
         <input type="text" class="form-control search-string">
     </td>
     <td class="button-column">
-        <div class="dropdown">
+        <div class="dropdown help-dropdown">
           <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
           <div class="dropdown-menu dropdown-menu-right p-4" style="width: 500px;">
-            <strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>
+            <strong>Search syntax</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search syntax</button>
             <p>
             <ul>
                 <li>Just enter any text for full text search</li>
@@ -64,6 +64,8 @@ export default class SearchString extends AbstractSearchOption {
 
         this.$searchString.val(this.note.getLabelValue('searchString'));
 
+        utils.initHelpDropdown($option);
+
         return $option;
     }
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 0f4703da4..acae9be99 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -929,3 +929,10 @@ ul.fancytree-container li {
 .area-expander:hover .area-expander-text {
     color: var(--main-text-color);
 }
+
+.help-dropdown .dropdown-menu {
+    border-radius: 10px;
+    border-width: 2px;
+    box-shadow: 10px 10px 93px -25px black;
+    padding: 10px 15px 10px 15px !important;
+}