💄 UI: improve criteria panel layout - add shortcuts for search, sheet opening

5 files changed, 90 insertions, 17 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index cf7009ef9..f091aed85 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -1017,6 +1017,7 @@ function register_advanced_search(){
         if (key === "Enter") {
             $(".advanced-search-valid").click();
             e.stopPropagation();
+            $("#search-input-filter").focus();
             return false;
         }
     });
@@ -1042,6 +1043,69 @@ function register_advanced_search(){
         update_search_field();
         $("#search-input-filter").focus();
     });
+    // generic shortcuts
+    document.addEventListener('keydown', function(event) {
+        if (event.altKey) {
+            if (event.code === 'KeyC') {
+                $("#criteria-button").click();
+            }
+            else if (event.code === 'KeyL') {
+                $("#clear-search-button").click();
+                $("#id_search_vector").focus();
+            }
+            else if (event.code === 'KeyP') {
+                $("#pin-search-button").click();
+                $("#id_search_vector").focus();
+            }
+            else if (event.code === 'KeyS') {
+                $("#id_search_vector").focus();
+            }
+        }
+        else if (event.ctrlKey) {
+            if (event.code === 'ArrowLeft' && last_window) {
+                $("#" + last_window + " .previous_page").click()
+            }
+            else if (event.code === 'ArrowRight' && last_window) {
+                $("#" + last_window + " .next_page").click()
+            }
+            else if (event.code === 'Digit1') {
+                $(".form.search .display_details")[0].click();
+            }
+            else if (event.code === 'Digit2') {
+                $(".form.search .display_details")[1].click();
+            }
+            else if (event.code === 'Digit3') {
+                $(".form.search .display_details")[2].click();
+            }
+            else if (event.code === 'Digit4') {
+                $(".form.search .display_details")[3].click();
+            }
+            else if (event.code === 'Digit5') {
+                $(".form.search .display_details")[4].click();
+            }
+            else if (event.code === 'Digit6') {
+                $(".form.search .display_details")[5].click();
+            }
+            else if (event.code === 'Digit7') {
+                $(".form.search .display_details")[6].click();
+            }
+            else if (event.code === 'Digit8') {
+                $(".form.search .display_details")[7].click();
+            }
+            else if (event.code === 'Digit9') {
+                $(".form.search .display_details")[8].click();
+            }
+        }
+        else if (event.key == "Escape") {
+            if (last_window) {
+                hide_window(last_window);
+                last_window = "";
+            } else {
+                hide_window($(".card.sheet").last().attr('id'));
+            }
+            $(".card.sheet").last().get(0).scrollIntoView({behavior: 'smooth'});
+        }
+    });
 }
 
 
diff --git a/ishtar_common/templates/blocks/bs_form_snippet.html b/ishtar_common/templates/blocks/bs_form_snippet.html
index 509883e80..4cb32a535 100644
--- a/ishtar_common/templates/blocks/bs_form_snippet.html
+++ b/ishtar_common/templates/blocks/bs_form_snippet.html
@@ -55,7 +55,14 @@
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
-                <div class="form-group col-12" id="advanced-search-info"></div>
+                <div class="form-row col-12 inout-group">
+                    <div class="col-10" id="advanced-search-info"></div>
+                    <div class="col-2">
+                        <button type="button"
+                            class="btn btn-secondary advanced-search-clear w-100 m-1 p-2">
+                            {% trans "Clear" %}</button>
+                    </div>
+                </div>
                 <div class="row col-12 justify-content-center">
                     <div class="form-row col-md-8 pb-3">
                         <div class="input-group search-widget">
@@ -108,14 +115,12 @@
             <div class="form-group col-12">
                 <p class="text-center">
                     <button type="button"
-                            title="{% trans 'Enter to add the criteria' %}"
+                            title="{% trans 'Add the criteria [Enter]' %}"
                             class="btn btn-success advanced-search-valid">
+                        <i class="fa fa-plus" aria-hidden="true"></i>
                         {% trans "Add the criteria" %}</button>
-                    <button type="button"
-                            class="btn btn-secondary advanced-search-clear">
-                        {% trans "Clear" %}</button>
                     <button type="button" class="btn btn-primary"
-                            title="{% trans 'Esc to start the search' %}"
+                            title="{% trans 'Start the search [Esc]' %}"
                             data-dismiss="modal"><i class="fa fa-search" aria-hidden="true"></i> {% trans "Start the search" %}</button>
                 </p>
             </div>
diff --git a/ishtar_common/templates/ishtar/sheet.html b/ishtar_common/templates/ishtar/sheet.html
index a32ee2862..6dbe7aff0 100644
--- a/ishtar_common/templates/ishtar/sheet.html
+++ b/ishtar_common/templates/ishtar/sheet.html
@@ -41,13 +41,13 @@
               </h5>
           </div>
           <div class='col-2 text-center'>
-              <a href='#' class='previous_page'>
+              <a href='#' class='previous_page' title="{% trans 'Previous page [Ctrl+🡄]' %}">
                 <span class="fa-stack">
                   <i class="fa fa-circle fa-stack-2x"></i>
                   <i class="fa fa-arrow-left fa-stack-1x fa-inverse"></i>
                 </span>
               </a>
-              <a href='#' class='next_page'>
+              <a href='#' class='next_page' title="{% trans 'Next page [Ctrl+🡆]' %}">
                 <span class="fa-stack">
                   <i class="fa fa-circle fa-stack-2x"></i>
                   <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
@@ -56,7 +56,7 @@
           </div>
           <div class='col-1 text-right'>
             <a href='#' onclick='hide_window("{{window_id}}")'
-               title="{% trans 'Close' %}">
+               title="{% trans 'Close [Esc]' %}">
               <span class="fa-stack">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-times fa-stack-1x fa-inverse"></i>
diff --git a/ishtar_common/templates/widgets/search_input.html b/ishtar_common/templates/widgets/search_input.html
index d8ad26d8d..14249f4e8 100644
--- a/ishtar_common/templates/widgets/search_input.html
+++ b/ishtar_common/templates/widgets/search_input.html
@@ -3,18 +3,19 @@
            {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %} />
     <span class="input-group-append">
         <span class="input-group-text input-link bg-primary text-white"
-              title="{% trans 'Search' %}"
+              title="{% trans 'Start the search [Enter]' %}"
               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"
+                id="criteria-button"
                 data-target="#modal-advanced-search"
-                title="{% trans 'Criteria' %}">
+                title="{% trans 'Open the criteria panel [Alt+C]' %}">
             <i class="fa fa-cog" aria-hidden="true"></i>
         </button>
         <span class="input-group-text input-link disabled"
               id="clear-search-button"
-              title="{% trans 'Clear' %}">
+              title="{% trans 'Clear the search [Alt+L]' %}">
             <i class="fa fa-times" aria-hidden="true"></i>
         </span>
         <span class="input-group-text input-sep">
@@ -22,7 +23,7 @@
         <span class="input-group-text input-link"
               id="pin-search-button"
               data-item-type="{{pin_model}}"
-              title="{% trans 'Pin the current search' %}">
+              title="{% trans 'Pin the current search [Alt+P]' %}">
             <i class="fa fa-thumb-tack" aria-hidden="true"></i>
         </span>
         <a class="input-group-text input-link async-link disabled"
diff --git a/ishtar_common/views_item.py b/ishtar_common/views_item.py
index 156c12184..2974ac7c1 100644
--- a/ishtar_common/views_item.py
+++ b/ishtar_common/views_item.py
@@ -3059,7 +3059,7 @@ def get_item(
                 datas = list(datas)[start:end]
         link_template = (
             "<a class='display_details' href='#' "
-            "onclick='load_window(\"{}\")'>"
+            "onclick='load_window(\"{}\")'{}>"
             '<i class="fa fa-info-circle" aria-hidden="true"></i><lock></a>'
         )
         link_ext_template = '<a href="{}" target="_blank">{}</a>'
@@ -3073,13 +3073,13 @@ def get_item(
                 curl = reverse("show-" + default_name, args=[999999, ""])
                 if not curl.endswith("/"):
                     curl += "/"
-                lnk = link_template.format(curl)
+                lnk = link_template.format(curl, "")
                 lnk = lnk.replace("999999", "<pk>")
                 if not has_locks:
                     lnk = lnk.replace("<lock>", "")
                 data = json.dumps(_format_geojson(datas, lnk, display_polygon))
                 return HttpResponse(data, content_type="application/json")
-            for data in datas:
+            for idx_data, data in enumerate(datas):
                 res = {
                     "id": data[0],
                 }
@@ -3102,7 +3102,10 @@ def get_item(
                         if not curl.endswith("/"):
                             curl += "/"
                         lnk_template = link_template
-                        lnk = lnk_template.format(curl)
+                        lnk_title = ""
+                        if idx_data < 9:
+                            lnk_title = f' title="[Ctrl+{idx_data+1}]"'
+                        lnk = lnk_template.format(curl, lnk_title)
                         if has_locks and data[-2]:
                             if data[-1] == current_user_id:
                                 lnk = lnk.replace("<lock>", own_lock)