toolbar: Rewamp toolbar code for simplicity and to fix issues

- Fix problems with turbolinks. Closes: #1712.

- Remove unnecessary nesting of <button> inside <a> and use simple bootstrap
  recommendation for button.

- Add a external site icon for the 'Launch web client' button. Borrowed from
  clients presentation table.

- Add rel="noopener and noreferrer" for security. Borrowed from clients
  presentation table.

- Use font awesome instead of glyphicons.

- Use toolbar styling recommended by bootstrap.

- Fix showing/hiding of launch button and clients button. Closes: #1719.
  Closes #1713. Closes #1714.

- Place entire contents of toolbar in <section> for correct semantics.

- Add missing end of line to file.

- Hide is_relative_url() method unnecessarily exposed as templatetag.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/templates/app.html

@@ -57,7 +57,7 @@
     </p>
   {% endif %}
 
-  {% include "toolbar.html" with clients=clients enabled=is_enabled diagnostics_module_name=diagnostics_module_name %}
+  {% include "toolbar.html" with enabled=is_enabled %}
 
   {% block subsubmenu %}
     {% if subsubmenu %}

plinth/templates/toolbar.html

@@ -23,83 +23,54 @@
 {% load static %}
 
 {% block toolbar %}
-  {% if clients %}
-    <div class="toolbar toolbar-default">
-      <div class="toolbar-heading">
-        <section class="toolbar-title">
 
-          {% if clients|get_self_hosted_web_apps|length == 1 and clients|length == 1 %}
+  <section class="toolbar">
+    <div class="btn-toolbar" role="toolbar">
 
-            <a
+        {% if clients %}
-              {% if enabled %}
+          {% with client_platforms=clients|clients_get_platforms %}
-                href='{{ clients|get_self_hosted_web_apps|first|lookup:"url" }}'
+            {% if client_platforms.web|length == 1 %}
-              {% endif %}
+              <a target='_blank' rel="noopener noreferrer"
-              target='_blank'
+                 class="btn btn-primary" role="button" data-turbolinks="false"
-            >
+                 {% if not enabled %} disabled="disabled"
-              <button
+                 {% else %} href="{{ client_platforms.web.0.url }}"
-                role="button"
+                 {% endif %} data-turbolinks="false">
-                type="button"
-                class="btn btn-primary"
-                {% if not enabled %}
-                  disabled="disabled"
-                {% endif %}
-              >
                 {% trans "Launch web client" %}
-              </button>
+                <span class="fa fa-external-link"></span>
-            </a>
+              </a>
-
-          {% elif clients|get_self_hosted_web_apps|length == 1 %}
-            <button type="button" class="btn btn-default collapsed collapsible-button"
-                  data-toggle="collapse" data-target="#clients">
-              <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
-              {% trans "Client Apps" %}
-            </button>
-            <a
-              {% if enabled %}
-                href='{{ clients|get_self_hosted_web_apps|first|lookup:"url" }}'
-              {% endif %}
-              target='_blank'
-            >
-              <button
-                role="button"
-                type="button"
-                class="btn btn-primary"
-                {% if not enabled %}
-                  disabled="disabled"
-                {% endif %}
-              >
-                {% trans "Launch web client" %}
-              </button>
-            </a>
-          {% else %}
-            <button type="button" class="btn btn-default collapsed collapsible-button"
-                  data-toggle="collapse" data-target="#clients">
-              <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
-              {% trans "Client Apps" %}
-            </button>
-          {% endif %}
-
-          {% block diagnostics %}
-            {% if diagnostics_module_name %}
-            <!-- Single button -->
-              <div class="btn-group">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  <span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="caret"></span>
-                </button>
-                <div class="dropdown-menu">
-                  {% include "diagnostics_button.html" with module=diagnostics_module_name enabled=is_enabled %}
-                </div>
-              </div>
-              
             {% endif %}
-          {% endblock %}
-    
-        </section>
-      </div>
-      <div class="toolbar-body">
-        {% include "clients.html" with clients=clients enabled=is_enabled %}
-      </div>
-    </div>
 
-  {% endif %}
+            {% if client_platforms.web|length > 1 or client_platforms.other %}
-{% endblock toolbar %}
+              <button type="button" data-toggle="collapse" data-target="#clients"
+                      class="btn btn-default collapsed collapsible-button">
+                <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+                {% trans "Client Apps" %}
+              </button>
+            {% endif %}
+          {% endwith %}
+        {% endif %}
+
+        {% if diagnostics_module_name %}
+          <!-- Single button -->
+          <div class="btn-group button-extra-actions">
+            <button type="button" class="btn btn-default dropdown-toggle"
+                    data-toggle="dropdown" aria-haspopup="true"
+                    aria-expanded="false">
+              <span class="fa fa-cog" aria-hidden="true"></span>
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li>
+                {% include "diagnostics_button.html" with module=diagnostics_module_name enabled=is_enabled %}
+              </li>
+            </ul>
+          </div>
+        {% endif %}
+
+    </div>
+    <div class="toolbar-collapsed-content">
+      {% include "clients.html" with clients=clients enabled=is_enabled %}
+    </div>
+  </section>
+
+{% endblock toolbar %}

plinth/templatetags/plinth_extras.py

@@ -76,30 +76,22 @@ def lookup(dictionary, key):
     return dictionary[key]
 
 
-@register.filter(name='is_relative_url')
+def _is_relative_url(url):
-def is_relative_url(url):
+    """Check if the given link is relative or not."""
-    """Check if the given link is relative or not"""
+    parsed_url = urlparse(str(url))
-    parsed_url = urlparse(url)
     return not parsed_url.netloc
 
 
-@register.filter(name='get_self_hosted_web_apps')
+@register.filter(name='clients_get_platforms')
-def get_self_hosted_web_apps(clients):
+def clients_get_platforms(clients):
-    """Get a list of self hosted web apps"""
+    """Return lists of self hosted platforms and all other platforms."""
-    clients_with_web_platforms = list(
+    other = []
-        filter(
+    web = []
-            lambda c: len(
+    for client in clients:
-                list(filter(lambda p: p['type'] == 'web', c['platforms']))),
+        for platform in client['platforms']:
-            clients))
+            if platform['type'] == 'web' and _is_relative_url(platform['url']):
-    clients_with_self_hosted_apps = list(
+                web.append(platform)
-        filter(
+            else:
-            lambda c: len(
+                other.append(platform)
-                list(
-                    filter(lambda p: is_relative_url(p['url']), c['platforms'])
-                )), clients_with_web_platforms))
-    mapped_list = list(
-        map(
-            lambda c: list(filter(lambda p: p['type'] == 'web', c['platforms'])
-                           ), clients_with_self_hosted_apps))
 
-    return [elm for clnt in mapped_list for elm in clnt]
+    return {'web': web, 'other': other}