short search help in the tooltip

src/public/javascripts/services/note_detail_search.js

@@ -4,8 +4,11 @@ import searchNotesService from "./search_notes.js";
 const $searchString = $("#search-string");
 const $component = $('#note-detail-search');
 const $refreshButton = $('#note-detail-search-refresh-results-button');
+const $help = $("#note-detail-search-help");
 
 function show() {
+    $help.html(searchNotesService.getHelpText());
+
     $component.show();
 
     try {

src/public/javascripts/services/search_notes.js

@@ -3,7 +3,6 @@ import treeCache from "./tree_cache.js";
 import server from './server.js';
 import infoService from "./info.js";
 
-const $tree = $("#tree");
 const $searchInput = $("input[name='search-text']");
 const $resetSearchButton = $("#reset-search-button");
 const $doSearchButton = $("#do-search-button");
@@ -13,20 +12,36 @@ const $searchResults = $("#search-results");
 const $searchResultsInner = $("#search-results-inner");
 const $closeSearchButton = $("#close-search-button");
 
+const helpText = `
+<strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>
+<p>
+<ul>
+    <li>Just enter any text for full text search</li>
+    <li><code>@abc</code> - returns notes with label abc</li>
+    <li><code>@year=2019</code> - matches notes with label <code>year</code> having value <code>2019</code></li>
+    <li><code>@rock @pop</code> - matches notes which have both <code>rock</code> and <code>pop</code> labels</li>
+    <li><code>@rock or @pop</code> - only one of the labels must be present</li>
+    <li><code>@year&lt;=2000</code> - numerical comparison (also &gt;, &gt;=, &lt;).</li>
+    <li><code>@dateCreated>=MONTH-1</code> - notes created in the last month</li>
+    <li><code>=handler</code> - will execute script defined in <code>handler</code> relation to get results</li>
+</ul>
+</p>`;
+
 function showSearch() {
     $searchBox.slideDown();
-    $searchInput.focus();
 
     $searchBox.tooltip({
         trigger: 'focus',
         html: true,
-        title: 'Hello! <a href="http://google.com" class="external">google</a>',
+        title: helpText,
         placement: 'right',
         delay: {
             show: 500, // necessary because sliding out may cause wrong position
-            hide: 500
+            hide: 200
         }
     });
+
+    $searchInput.focus();
 }
 
 function hideSearch() {
@@ -49,10 +64,6 @@ function resetSearch() {
     $searchInput.val("");
 }
 
-function getTree() {
-    return $tree.fancytree('getTree');
-}
-
 async function doSearch(searchText) {
     if (searchText) {
         $searchInput.val(searchText);
@@ -61,6 +72,14 @@ async function doSearch(searchText) {
         searchText = $searchInput.val();
     }
 
+    if (searchText.trim().length === 0) {
+        infoService.showMessage("Please enter search criteria first.");
+
+        $searchInput.focus();
+
+        return;
+    }
+
     const results = await server.get('search/' + encodeURIComponent(searchText));
 
     $searchResultsInner.empty();
@@ -151,5 +170,6 @@ export default {
     showSearch,
     refreshSearch,
     doSearch,
-    init
+    init,
+    getHelpText: () => helpText
 };

src/public/stylesheets/style.css

@@ -28,6 +28,7 @@
     --active-item-background-color: #ccc;
     --menu-text-color: black;
     --menu-background-color: white;
+    --tooltip-background-color: #f8f8f8;
 }
 
 body.theme-black {
@@ -51,6 +52,7 @@ body.theme-black {
     --active-item-background-color: #ccc;
     --menu-text-color: white;
     --menu-background-color: #222;
+    --tooltip-background-color: black;
 }
 
 body.theme-black a, body.theme-black a:visited {
@@ -82,6 +84,7 @@ body.theme-dark {
     --active-item-background-color: #ccc;
     --menu-text-color: white;
     --menu-background-color: #222;
+    --tooltip-background-color: #333;
 }
 
 body.theme-dark a, body.theme-dark a:visited {
@@ -684,22 +687,20 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     padding: 20px;
 }
 
-/* this should help with tooltip flickering */
+.tooltip {
-/*.tooltip {*/
+    font-size: var(--main-font-size) !important;
-/*    pointer-events: none;*/
+}
-/*}*/
 
 .tooltip-inner {
-    background-color: var(--accented-background-color) !important;
+    background-color: var(--tooltip-background-color) !important;
-    max-width: 400px;
+    max-width: 500px;
     /* height needs to stay small because tooltip has problem when it can't fit to either top or bottom of the cursor */
     max-height: 300px;
     overflow: hidden;
-    font-size: var(--main-font-size);
-    color: var(--main-text-color);
     border: 1px solid var(--main-border-color);
     border-radius: 5px;
     text-align: left;
+    color: var(--main-text-color) !important;
 }
 
 .tooltip-inner img {

src/views/details/search.ejs

@@ -11,32 +11,5 @@
 
     <br />
 
-    <h4>Help</h4>
+    <div id="note-detail-search-help"></div>
-    <p>
-    <ul>
-        <li>
-            <code>@abc</code> - matches notes with label abc</li>
-        <li>
-            <code>@!abc</code> - matches notes without abc label (maybe not the best syntax)</li>
-        <li>
-            <code>@abc=true</code> - matches notes with label abc having value true</li>
-        <li><code>@abc!=true</code></li>
-        <li>
-            <code>@"weird label"="weird value"</code> - works also with whitespace inside names values</li>
-        <li>
-            <code>@abc and @def</code> - matches notes with both abc and def</li>
-        <li>
-            <code>@abc @def</code> - AND relation is implicit when specifying multiple labels</li>
-        <li>
-            <code>@abc or @def</code> - OR relation</li>
-        <li>
-            <code>@abc&lt;=5</code> - numerical comparison (also &gt;, &gt;=, &lt;).</li>
-        <li>
-            <code>some search string @abc @def</code> - combination of fulltext and label search - both of them need to match (OR not supported)</li>
-        <li>
-            <code>@abc @def some search string</code> - same combination</li>
-    </ul>
-
-    <button class="btn btn-sm" type="button" data-help-page="Search">Complete help on search</button>
-    </p>
 </div>