From efcc8041493a91108942beeb1233bfe0db4a080a Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Tue, 13 Mar 2018 20:02:00 -0400
Subject: [PATCH] redesign search buttons

---
 src/public/javascripts/search_tree.js | 32 ++++++++++++++++++---------
 src/views/index.ejs                   | 11 ++++++---
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/public/javascripts/search_tree.js b/src/public/javascripts/search_tree.js
index 59386099a..fd73ee093 100644
--- a/src/public/javascripts/search_tree.js
+++ b/src/public/javascripts/search_tree.js
@@ -3,7 +3,9 @@
 const searchTree = (function() {
     const $tree = $("#tree");
     const $searchInput = $("input[name='search-text']");
-    const $resetSearchButton = $("button#reset-search-button");
+    const $resetSearchButton = $("#reset-search-button");
+    const $doSearchButton = $("#do-search-button");
+    const $saveSearchButton = $("#save-search-button");
     const $searchBox = $("#search-box");
 
     $resetSearchButton.click(resetSearch);
@@ -30,7 +32,20 @@ const searchTree = (function() {
         return $tree.fancytree('getTree');
     }
 
-    $searchInput.keyup(async e => {
+    async function doSearch() {
+        const searchText = $searchInput.val();
+
+        const noteIds = await server.get('notes?search=' + encodeURIComponent(searchText));
+
+        for (const noteId of noteIds) {
+            await noteTree.expandToNote(noteId, {noAnimation: true, noEvents: true});
+        }
+
+        // Pass a string to perform case insensitive matching
+        getTree().filterBranches(node => noteIds.includes(node.data.noteId));
+    }
+
+    $searchInput.keyup(e => {
         const searchText = $searchInput.val();
 
         if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(searchText) === "") {
@@ -39,17 +54,14 @@ const searchTree = (function() {
         }
 
         if (e && e.which === $.ui.keyCode.ENTER) {
-            const noteIds = await server.get('notes?search=' + encodeURIComponent(searchText));
-
-            for (const noteId of noteIds) {
-                await noteTree.expandToNote(noteId, {noAnimation: true, noEvents: true});
-            }
-
-            // Pass a string to perform case insensitive matching
-            getTree().filterBranches(node => noteIds.includes(node.data.noteId));
+            doSearch();
         }
     }).focus();
 
+    $doSearchButton.click(doSearch);
+
+    $saveSearchButton.click(() => alert("Save search"));
+
     $(document).bind('keydown', 'ctrl+s', e => {
         toggleSearch();
 
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 226f4b059..55d51008b 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -58,9 +58,14 @@
 
       <div id="search-box" class="hide-toggle" style="grid-area: search; display: none; padding: 10px; margin-top: 10px;">
         <div style="display: flex; align-items: center;">
-          <label>Search:</label>
-          <input name="search-text" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
-          <button id="reset-search-button" class="btn btn-sm" title="Reset search">&times;</button>
+          <input name="search-text" placeholder="Search text, attributes" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
+          <button id="do-search-button" class="btn btn-primary btn-sm" title="Search">Search</button>
+        </div>
+
+        <div style="display: flex; align-items: center; justify-content: space-evenly; margin-top: 10px;">
+          <button id="reset-search-button" class="btn btn-sm" title="Reset search">Reset search</button>
+
+          <button id="save-search-button" class="btn btn-sm" title="Save search">Save search</button>
         </div>
       </div>