UI: improve layout and action for search

1 files changed, 27 insertions, 12 deletions

diff --git a/ishtar_common/templates/widgets/search_input.html b/ishtar_common/templates/widgets/search_input.html
index ddb62969f..01e49e93b 100644
--- a/ishtar_common/templates/widgets/search_input.html
+++ b/ishtar_common/templates/widgets/search_input.html
@@ -1,28 +1,38 @@
 {% load i18n %}<div class="input-group search-widget">
-    <span class="input-group-prepend">
-      <span class="input-group-text">
-         <i class="fa fa-search" aria-hidden="true"></i>
-      </span>
-    </span>
     <input type="{{ widget.type }}" name="{{ widget.name }}"
            {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %} />
     <span class="input-group-append">
-        <button type="button" class="btn btn-secondary" data-toggle="modal"
+        <span class="input-group-text input-link"
+              title="{% trans 'Search' %}"
+              id="submit-search">
+            <i class="fa fa-search" aria-hidden="true"></i>
+        </span>
+        <button type="button" class="input-group-text input-link" data-toggle="modal"
                 data-target="#modal-advanced-search"
                 title="{% trans 'Criteria' %}">
             <i class="fa fa-cogs" aria-hidden="true"></i>
         </button>
-        <a type="button" class="async-link btn btn-secondary disabled"
+        <span class="input-group-text input-link disabled"
+              id="clear-search-button"
+              title="{% trans 'Clear' %}">
+            <i class="fa fa-times" aria-hidden="true"></i>
+        </span>
+        <span class="input-group-text input-sep">
+        </span>
+        <a class="input-group-text input-link async-link disabled"
            id="save-search-button"
            data-target="#modal-dynamic-form"
            data-modal-open="#modal-dynamic-form"
-           title="{% trans 'Save search' %}"
+           title="{% trans 'Bookmark save' %}"
            href="{% url 'save-search-query' 'archaeological-operations' 'operation'%}">
-            <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            <i class="fa fa-star-o" aria-hidden="true"></i>
         </a>
-        <span class="input-group-text clear-search">
-            <i class="fa fa-times" aria-hidden="true"></i>
+        <span class="input-group-text input-link disabled"
+              title="{% trans 'Load bookmark' %}"
+              id="load-bookmark">
+            <i class="fa fa-bookmark" aria-hidden="true"></i>
         </span>
+
     </span>
 </div>
 
@@ -30,10 +40,15 @@
 
 $(document).ready(function(){
     $(".search-widget input").keypress(function(e) {
-        if (e.which == 13) {
+        var key = e.key;
+        if (key === "Enter") {
             $(".search_button").click();
             $(this).focus();
         }
+        if (key === "Escape") {
+            $("#clear-search-button").click();
+            $(this).focus();
+        }
     });
     $(".search-widget input").keyup(function(e) {
         enable_save();