close search button

src/public/javascripts/services/search_notes.js

@@ -10,21 +10,26 @@ const $saveSearchButton = $("#save-search-button");
 const $searchBox = $("#search-box");
 const $searchResults = $("#search-results");
 const $searchResultsInner = $("#search-results-inner");
+const $closeSearchButton = $("#close-search-button");
 
 function showSearch() {
     $searchBox.show();
     $searchInput.focus();
 }
 
+function hideSearch() {
+    resetSearch();
+
+    $searchResults.hide();
+    $searchBox.hide();
+}
+
 function toggleSearch() {
     if ($searchBox.is(":hidden")) {
         showSearch();
     }
     else {
-        resetSearch();
+        hideSearch();
-
-        $searchResults.hide();
-        $searchBox.hide();
     }
 }
 
@@ -89,6 +94,8 @@ $resetSearchButton.click(resetSearch);
 
 $saveSearchButton.click(saveSearch);
 
+$closeSearchButton.click(hideSearch);
+
 export default {
     toggleSearch,
     resetSearch,

src/views/index.ejs

@@ -76,13 +76,21 @@
         <div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
           <div style="display: flex; align-items: center;">
             <input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
-            <button id="do-search-button" class="btn btn-sm" title="Search">Search</button>
+            <button id="do-search-button" class="btn btn-sm" title="Search (enter)" style="padding: 4px;">
+              <img src="/images/icons/search-20.png" alt="Search"/>
+            </button>
 
             &nbsp;
 
             <button id="save-search-button" class="btn btn-sm" title="Save search" style="padding: 4px;">
               <img src="/images/icons/save.png" alt="Save search"/>
             </button>
+
+            &nbsp;
+
+            <button id="close-search-button" class="btn btn-sm" title="Close search" style="padding: 4px;">
+              <img src="/images/icons/x.png" alt="Close search"/>
+            </button>
           </div>
         </div>
 
@@ -318,7 +326,7 @@
         <div style="display: flex; justify-content: space-between;">
           <button id="jump-to-note-button" class="btn btn-sm btn-primary">Jump <kbd>enter</kbd></button>
 
-          <button id="show-in-full-text-button" class="btn btn-sm">&lt;&lt; Show results in full text <kbd>ctrl+enter</kbd></button>
+          <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
         </div>
       </form>
     </div>