UI: adapt shortcut menu

5 files changed, 139 insertions, 92 deletions

diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index c9dfde974..b2f0b055c 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -56,9 +56,9 @@
 </head>
 <body{% if current_theme%} id='{{current_theme}}'{%endif%}>
     {% include "navbar.html" %}
-    {% if not reminders %}<div id="context-menu" class="navbar navbar-expand-lg"></div>
-    {% else %}
-<div id="reminder"><h5>{% trans "Current items" %}</h5>
+    <div id="context-menu" class="navbar navbar-expand-lg"></div>
+    {% if reminders %}
+    <div id="reminder"><h5>{% trans "Current items" %}</h5>
 {% for lbl, value in reminders %}
 <p><strong class='lbl'>{{lbl}}{% trans ":"%}</strong> <span class='value'>{{value}}</span></p>
 {% endfor %}
diff --git a/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html b/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html
index cd7bf88f8..953b0ef40 100644
--- a/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html
+++ b/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html
@@ -1,49 +1,54 @@
+{% extends "ishtar/blocks/base_shortcut_menu.html" %}
 {% load i18n %}
-{% if menu %}
-<form method="post" action="{% url 'update-current-item' %}">
-<fieldset id='shortcut-menu'>
-<span class="fa-stack short-menu-close">
-  <i class="fa fa-circle fa-stack-2x"></i>
-  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
-</span>
-<span class="fa-stack short-menu-open">
-  <i class="fa fa-circle fa-stack-2x"></i>
-  <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
-</span>
+{% block short_content %}
 <div class="short-menu-buttons btn-group" role="group">
-  <button type="button" class="btn" id='short-menu-simple' title="{% trans 'Simple menu limited to your own items. Be careful only the last 100 items are displayed.' %}">{% trans "simple" %}</button>
-  <button type="button" class="btn btn-selected" id='short-menu-advanced' title="{% trans 'Advanced menu' %}">{% trans "advanced" %}</button>
+    <button type="button" class="btn btn-secondary"
+            id='short-menu-simple' title="{% trans 'Simple menu limited to your own items. Be careful only the last 100 items are displayed.' %}">{% trans "simple" %}</button>
+    <button type="button" class="btn btn-secondary active" id='short-menu-advanced' title="{% trans 'Advanced menu' %}">{% trans "advanced" %}</button>
 </div>
-<div id='action_current_items'>
-<p><i class="icon fa fa-thumb-tack fa-2x" aria-hidden="true" title="{% trans 'Pin an item in order to constrain default searches with this item. By default only your items are displayed. New created and modified items are auto-pin.' %}"></i></p>
-<p>
-<a href='' onclick='return activate_own_search();' class='activate_own_search{% if SHORTCUT_SEARCH == 'all' %} disabled{% endif %}'><i class="icon fa fa-user" aria-hidden="true" title="{% trans 'Search within my items' %}"></i></a>
-<a href='' class='activate_all_search{% if SHORTCUT_SEARCH == 'own' %} disabled{% endif %}' onclick='return activate_all_search();'><i class="icon fa fa-users" aria-hidden="true" title="{% trans 'Search within all items' %}"></i></a>
-</p>
-<p>
-<a href='' onclick='return load_shortcut_menu();' class='disabled'><i class="icon fa fa-2x fa-refresh" aria-hidden="true" title="{% trans 'Refresh menu' %}"></i></a>
-</p>
+<div id='action_current_items' class="btn-group" role="group">
+    <button type="button" onclick='return activate_own_search();'
+           title="{% trans 'Search within my items' %}"
+           class='btn btn-secondary activate_own_search{% if SHORTCUT_SEARCH == "own" %} active{% endif %}'>
+        <i class="icon fa fa-user" aria-hidden="true"></i>
+    </button>
+    <button type="button" onclick='return activate_all_search();'
+           title="{% trans 'Search within all items' %}"
+           class='btn btn-secondary activate_all_search{% if SHORTCUT_SEARCH == "all" %} active{% endif %}'>
+        <i class="icon fa fa-users" aria-hidden="true"></i>
+    </button>
+    {% comment %}
+    <p>
+        <a href='' onclick='return load_shortcut_menu();' class='disabled'><i class="icon fa fa-2x fa-refresh" aria-hidden="true" title="{% trans 'Refresh menu' %}"></i></a>
+    </p>
+    {% endcomment %}
 </div>
-<table id='current_items'>
-{% for lbl, model_name, current, widget in menu %}
-<tr>
-    <td><label for="current_{{model_name}}">{{lbl}}</label></td>
-    <td>
-        {{widget|safe}}
-    </td>{% with 'show-'|add:model_name as model_url%}
-    <td><a href='#' onclick='load_current_window("{% url model_url current %}", "{{model_name}}");' class='display_details'><i class="fa fa-info-circle" aria-hidden="true"></i></a></td>
-    <td><span class='disabled pin-action' onclick='$.get("{% url 'unpin' model_name %}", function(){load_shortcut_menu();});' title="{% trans 'Unpin' %}">
-            <i class="fa fa-times"></i>
-    </span></td>
-    {% endwith %}
-</tr>
-{% endfor %}
-</table>
-</fieldset>
-</form>
-<script type='text/javascript'>
+<p id='current_items'>
+    {% for lbl, model_name, current, widget in menu %}
+      <div class="form-group row">
+          <label for="current_{{model_name}}"
+                 class="col-sm-4 col-form-label">{{lbl}}</label>
+          <div class="col-sm-6">
+              {{widget|safe}}
+          </div>
+          {% with 'show-'|add:model_name as model_url%}
+          <div class="col-sm-2">
+              <a href='#' onclick='load_current_window("{% url model_url current %}", "{{model_name}}");' class='display_details'>
+                  <i class="fa fa-info-circle" aria-hidden="true"></i>
+              </a>
+              <a href='#'
+                 class='disabled pin-action text-danger'
+                 onclick='$.get("{% url "unpin" model_name %}", function(){load_shortcut_menu();});' title="{% trans 'Unpin' %}">
+                  <i class="fa fa-times"></i>
+              </a>
+          </div>
+          {% endwith %}
+      </div>
+    </tr>
+    {% endfor %}
+</p>
+{% endblock %}
+
+{% block short_extrajs %}
 var advanced_menu = true;
-{% if SHORTCUT_SHOW == 'off' %}var shortcut_menu_hide = true;
-{% else %}var shortcut_menu_hide = false;{% endif %}
-</script>
-{% endif %}
+{% endblock %}
diff --git a/ishtar_common/templates/ishtar/blocks/base_shortcut_menu.html b/ishtar_common/templates/ishtar/blocks/base_shortcut_menu.html
new file mode 100644
index 000000000..95e030b85
--- /dev/null
+++ b/ishtar_common/templates/ishtar/blocks/base_shortcut_menu.html
@@ -0,0 +1,46 @@
+{% load i18n %}
+{% if current_menu or menu %}
+{% comment %}
+<button class="navbar-toggler" type="button"
+        data-toggle="collapse" data-target="#navbar-shortcut"
+        aria-controls="navbar-shortcut" aria-expanded="false"
+        aria-label="{% trans 'Toggle navigation' %}">
+    <span class="navbar-toggler-icon"></span>
+</button>
+{% endcomment %}
+<div class="navbar-collapse collapse justify-content-end">
+    <ul class="navbar-nav" id="navbar-shortcut">
+      <li class="nav-item">
+          <ol class="breadcrumb">
+                {% for lbl in current_selected_labels %}
+                <li class="breadcrumb-item">{{lbl}}</li>
+                {% empty %}
+                {% trans "No default selection" %}
+                {% endfor %}
+          </ol>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-toggle="dropdown"
+           href="#" role="button" aria-haspopup="true"
+           id="dropdown-toggle-shortcut-menu">
+            <i class="icon fa fa-thumb-tack fa-2x" aria-hidden="true" title="{% trans 'Pin an item in order to constrain default searches with this item. By default only your items are displayed. New created and modified items are auto-pin.' %}"></i>
+        </a>
+        <div id="shortcut-menu" class="dropdown-menu dropdown-menu-right">
+            <form method="post" action="{% url 'update-current-item' %}">
+                <h4>{% trans "Default selection" %}</h4>
+                {% block short_content %}
+                {% endblock %}
+            </form>
+        </div>
+      </li>
+    </ul>
+</div>
+
+<script type='text/javascript'>
+{% if SHORTCUT_SHOW == 'off' %}var shortcut_menu_hide = true;
+{% else %}var shortcut_menu_hide = false;{% endif %}
+{% block short_extrajs %}
+{% endblock %}
+</script>
+
+{% endif %}
diff --git a/ishtar_common/templates/ishtar/blocks/shortcut_menu.html b/ishtar_common/templates/ishtar/blocks/shortcut_menu.html
index 5a811ddf0..10113aa59 100644
--- a/ishtar_common/templates/ishtar/blocks/shortcut_menu.html
+++ b/ishtar_common/templates/ishtar/blocks/shortcut_menu.html
@@ -1,47 +1,43 @@
+{% extends "ishtar/blocks/base_shortcut_menu.html" %}
 {% load i18n %}
-{% if current_menu %}
-<div class="nav-item dropdown navbar-expand-lg navbar-collapse justify-content-end">
-    <ul class="navbar-nav">
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" data-toggle="dropdown"
-           href="#" role="button" aria-haspopup="true">
-            {% trans "Default selection" %}
-            <i class="icon fa fa-thumb-tack fa-2x" aria-hidden="true" title="{% trans 'Pin an item in order to constrain default searches with this item. By default only your items are displayed. New created and modified items are auto-pin.' %}"></i>
-        </a>
-        <div id="shortcut-menu" class="dropdown-menu dropdown-menu-right">
-                <form method="post" action="{% url 'update-current-item' %}">
-
-                    <div class="short-menu-buttons btn-group" role="group">
-                        <button type="button" class="btn btn-selected" id='short-menu-simple' title="{% trans 'Simple menu limited to your own items. Be careful only the last 100 items are displayed.' %}">{% trans "simple" %}</button>
-                        <button type="button" class="btn" id='short-menu-advanced' title="{% trans 'Advanced menu' %}">{% trans "advanced" %}</button>
-                    </div>
-                    <div>
-                        <table id='current_items'>
-                            {% for lbl, model_name, main_cls, items in current_menu %}
-                            <tr>
-                                <td><label for="current_{{model_name}}">{{lbl}}</label></td>
-                                <td>
-                                    <select class='{{main_cls}} chosen-select' id='current_{{model_name}}'>
-                                        <option class='normal' value=''>--</option>
-                                        {% for val, label, selected, cls in items %}<option{% if cls %} class='{{cls}}'{% endif %} value='{{val}}'{% if selected %} selected="selected"{% endif %}>{% ifequal cls 'basket' %}&#xf291; {% endifequal %}{% ifequal cls 'green' %}&#xf058; {% endifequal %}{% ifequal cls 'orange' %}&#xf06a; {% endifequal %}{% ifequal cls 'red' %}&#xf071; {% endifequal %}{{label}}</option>
-                                        {% endfor %}</select>
-                                </td>{% with 'show-'|add:model_name as model_url%}
-                                <td><a href='#' onclick='load_current_window("{% url model_url 0 %}", "{{model_name}}");' class='display_details'><i class="fa fa-info-circle" aria-hidden="true"></i></a></td>
-                                <td><span class='pin-action' onclick='$.get("{% url 'unpin' model_name %}", function(){load_shortcut_menu();});' title="{% trans 'Unpin' %}">
-                                    <i class="fa fa-times"></i>
-                                    </span></td>
-                                {% endwith %}
-                            </tr>
-                            {% endfor %}
-                        </table>
-                    </div>
-                </form>
+{% block short_content %}
+<div class="short-menu-buttons btn-group" role="group">
+    <button type="button" class="btn btn-secondary active"
+            id='short-menu-simple' title="{% trans 'Simple menu limited to your own items. Be careful only the last 100 items are displayed.' %}">{% trans "simple" %}</button>
+    <button type="button" class="btn btn-secondary" id='short-menu-advanced' title="{% trans 'Advanced menu' %}">{% trans "advanced" %}</button>
+</div>
+<div>
+    <p class="alert alert-info mt-2">
+        {% trans 'Simple menu limited to your own items. Be careful only the last 100 items are displayed.' %}
+    </p>
+    <p id='current_items'>
+        {% for lbl, model_name, main_cls, items in current_menu %}
+        <div class="form-group row">
+            <label for="current_{{model_name}}"
+                class="col-sm-4 col-form-label">{{lbl}}</label>
+            <div class="col-sm-6">
+                <select class='{{main_cls}} chosen-select' id='current_{{model_name}}'>
+                    <option class='normal' value=''>--</option>
+                    {% for val, label, selected, cls in items %}<option{% if cls %} class='{{cls}}'{% endif %} value='{{val}}'{% if selected %} selected="selected"{% endif %}>{% ifequal cls 'basket' %}&#xf291; {% endifequal %}{% ifequal cls 'green' %}&#xf058; {% endifequal %}{% ifequal cls 'orange' %}&#xf06a; {% endifequal %}{% ifequal cls 'red' %}&#xf071; {% endifequal %}{{label}}</option>
+                    {% endfor %}</select>
+            </div>
+            {% with 'show-'|add:model_name as model_url%}
+            <div class="col-sm-2">
+                <a href='#' onclick='load_current_window("{% url model_url 0 %}", "{{model_name}}");' class='display_details'>
+                    <i class="fa fa-info-circle" aria-hidden="true"></i></a>
+                <a href='#'
+                   class='disabled pin-action text-danger'
+                   onclick='$.get("{% url "unpin" model_name %}", function(){load_shortcut_menu();});' title="{% trans 'Unpin' %}">
+                    <i class="fa fa-times"></i>
+                </a>
+            </div>
+            {% endwith %}
         </div>
-      </li>
-    </ul>
+        {% endfor %}
+    </p>
 </div>
-<script type='text/javascript'>var advanced_menu = false;
-{% if SHORTCUT_SHOW == 'off' %}var shortcut_menu_hide = true;
-{% else %}var shortcut_menu_hide = false;{% endif %}
-</script>
-{% endif %}
+{% endblock %}
+
+{% block short_extrajs %}
+var advanced_menu = false;
+{% endblock %}
diff --git a/ishtar_common/templates/navbar.html b/ishtar_common/templates/navbar.html
index 0f6036a6c..a5c135a59 100644
--- a/ishtar_common/templates/navbar.html
+++ b/ishtar_common/templates/navbar.html
@@ -9,7 +9,7 @@
     <button class="navbar-toggler" type="button"
             data-toggle="collapse" data-target="#navbar-actions"
             aria-controls="navbar-actions" aria-expanded="false"
-            aria-label="Toggle navigation">
+            aria-label="{% trans 'Toggle navigation' %}">
         <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse justify-content-end" id="navbar-actions">