From a4cac1fcab7d033fdd3a35174c825e925c3eb4a7 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Tue, 10 Jul 2018 13:34:38 +0200
Subject: UI: improve layout and action for search

---
 ishtar_common/forms_common.py                      |  8 ++--
 ishtar_common/static/js/ishtar.js                  |  7 ++-
 ishtar_common/static/media/styles.css              | 21 ---------
 .../templates/blocks/bs_field_snippet.html         |  2 +-
 .../templates/ishtar/forms/search_query.html       | 18 ++++----
 ishtar_common/templates/widgets/search_input.html  | 39 +++++++++++------
 scss/custom.scss                                   | 50 +++++++++++++++++++++-
 7 files changed, 94 insertions(+), 51 deletions(-)

diff --git a/ishtar_common/forms_common.py b/ishtar_common/forms_common.py
index 43652ba07..397b87815 100644
--- a/ishtar_common/forms_common.py
+++ b/ishtar_common/forms_common.py
@@ -1280,11 +1280,11 @@ AuthorFormset.form_slug = "authors"
 
 
 class SearchQueryForm(forms.Form):
-    query = forms.CharField(max_length=None, label=_(u"Query"), disabled=True,
-                            initial='*')
-    search_query = forms.ChoiceField(label=_(u"Search query"), required=False,
+    query = forms.CharField(max_length=None, label=_(u"Query"), initial='*',
+                            widget=forms.HiddenInput)
+    search_query = forms.ChoiceField(label="", required=False,
                                      choices=[])
-    label = forms.CharField(max_length=None, label=_(u"Name"), required=False)
+    label = forms.CharField(label="", max_length=None, required=False)
     is_alert = forms.BooleanField(label=_(u"Is an alert"), required=False)
     create_or_update = forms.ChoiceField(
         choices=(('create', _(u"Create")),
diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 0df286c26..81d080801 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -266,10 +266,13 @@ $(document).ready(function(){
     });
     $("a.async-link").click(manage_async_link);
     $(".chosen-select").chosen();
-    $(".clear-search").click(function(){
+    $("#clear-search-button").click(function(){
         $(this).parent().parent().children('input').prop("value", "");
         enable_save();
     });
+    $("#submit-search").click(function(){
+        $(".search_button").click();
+    });
 });
 
 $(document).on("click", '#to_bottom_arrow', function(){
@@ -540,8 +543,10 @@ function get_label_from_input(input){
 var enable_save = function(){
     if ($(".search-widget input").val()){
         $("#save-search-button").removeClass('disabled');
+        $("#clear-search-button").removeClass('disabled');
     } else {
         $("#save-search-button").addClass('disabled');
+        $("#clear-search-button").addClass('disabled');
     }
 }
 
diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index 6860ca93c..b5e8bab48 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -25,10 +25,6 @@ html{
     height: auto;
 }
 
-.form-group span label {
-    display: inline-block;
-}
-
 
 #window-fixed-menu.hidden #window-fixed-menu-list{
     display: none;
@@ -39,23 +35,6 @@ html{
     font-size: 0.9em;
 }
 
-.form-group label{
-    display: block;
-}
-
-.form-group li label {
-    display: inline-block;
-}
-
-.form-group li .form-control {
-    width: auto;
-}
-
-.form-group li input[type="radio"].form-control,
-.form-group li input[type="checkbox"].form-control{
-    display: inline;
-}
-
 #id_parcel_0, #id_parcel_1, #id_parcel_2{
     width: 30%;
     display: inline-block;
diff --git a/ishtar_common/templates/blocks/bs_field_snippet.html b/ishtar_common/templates/blocks/bs_field_snippet.html
index a164c81d8..6a6ea5360 100644
--- a/ishtar_common/templates/blocks/bs_field_snippet.html
+++ b/ishtar_common/templates/blocks/bs_field_snippet.html
@@ -1,7 +1,7 @@
 {% load i18n %}
     <div class="form-group {% if field.field.widget.attrs.cols %}col-lg-12{% else %}col-lg-6{% endif %}{% if field.errors %} is-invalid{% endif %}{% if field.field.required %} required{% endif %}"
          data-alt-name="{{field.field.alt_name}}">
-        {{ field.label_tag }}
+        {% if field.label %}{{ field.label_tag }}{% endif %}
         {% if field.help_text %}
         <div class="input-group">
         {% endif %}
diff --git a/ishtar_common/templates/ishtar/forms/search_query.html b/ishtar_common/templates/ishtar/forms/search_query.html
index e842fd591..ff51d483d 100644
--- a/ishtar_common/templates/ishtar/forms/search_query.html
+++ b/ishtar_common/templates/ishtar/forms/search_query.html
@@ -2,7 +2,7 @@
 <div class="modal-dialog modal-sm" id="save-search-div">
     <div class="modal-content">
         <div class="modal-header">
-            <h5>{% trans "Save search" %}</h5>
+            <h5>{% trans "Bookmark search" %}</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
             </button>
@@ -11,7 +11,7 @@
               action="{% url 'save-search-query' app_label model %}"
               method="post"
               id="save-search-form">
-            <div class="modal-body form-row">
+            <div class="modal-body form-row-modal">
               {% csrf_token %}
 
               <div class='form'>
@@ -29,11 +29,6 @@
                 </div>{% endif %}
                 {% endfor %}
 
-                <div class="form-row">
-                    <div class="form-group col-lg-12">
-                        {{form.query}}
-                    </div>
-                </div>
                 {% if form.search_query %}
                 <div class="form-row">
                     <input type="radio" name="create_or_update" value="create"
@@ -50,9 +45,12 @@
                         {% endwith %}
                     </div>
                     <div class="form-row">
-                        {% with form.is_alert as field %}
-                        {% include "blocks/bs_field_snippet.html" %}
-                        {% endwith %}
+                        <div class="form-group col-lg-12">
+                            <span>
+                                {{form.is_alert}}
+                                <label for="{{form.is_alert.auto_id}}">{{form.is_alert.label}}</label>
+                            </span>
+                        </div>
                     </div>
                 </div>
                 {% if form.search_query %}
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();
diff --git a/scss/custom.scss b/scss/custom.scss
index f92499ee7..03d42f0ce 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -29,6 +29,27 @@ label {
     min-height: 1.5rem;
 }
 
+.form-group span label {
+    display: inline-block;
+}
+
+.form-group label{
+    display: block;
+}
+
+.form-group li label {
+    display: inline-block;
+}
+
+.form-group li .form-control {
+    width: auto;
+}
+
+.form-group li input[type="radio"].form-control,
+.form-group li input[type="checkbox"].form-control{
+    display: inline;
+}
+
 pre {
     white-space: pre-wrap;
 }
@@ -51,6 +72,11 @@ pre {
     background-color: $gray-200;
 }
 
+.form-row-modal{
+    padding: 0.5rem 2rem;
+}
+
+
 .form-group .select2-container--default .select2-selection--multiple {
     border: $input-border-width solid $input-border-color;
 }
@@ -404,15 +430,35 @@ div#foot a:hover {
     overflow: auto;
 }
 
-.clear-search{
+.input-link{
+    color: $gray-600;
+}
+
+.input-link.disabled{
     color: $gray-500;
 }
 
-.clear-search:hover{
+.input-link:hover{
     color: $gray-800;
 	cursor: pointer;
 }
 
+.input-link.disabled:hover{
+    color: $gray-500;
+	cursor: not-allowed;
+}
+
+.input-sep{
+    background-color: #fff;
+    padding: 0.3rem;
+}
+
+/* search */
+
+.search_button{
+    display: none;
+}
+
 /* lightgallery */
 
 .lightgallery-captions{
-- 
cgit v1.2.3