From aaf5d6dbe12c5b564c709c107403dac505553591 Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@thoughtworks.com>
Date: Thu, 16 Nov 2017 15:46:00 +0530
Subject: [PATCH] Convert collapsible list to collapsible table

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/modules/syncthing/manifest.py |  12 +--
 plinth/templates/clients.html        | 136 +++++++++++++--------------
 static/themes/default/css/plinth.css |   4 +-
 3 files changed, 72 insertions(+), 80 deletions(-)

diff --git a/plinth/modules/syncthing/manifest.py b/plinth/modules/syncthing/manifest.py
index 837cad950..76977f86b 100644
--- a/plinth/modules/syncthing/manifest.py
+++ b/plinth/modules/syncthing/manifest.py
@@ -36,14 +36,6 @@ clients = [{
         'type': 'package',
         'format': 'homebrew',
         'name': 'syncthing',
-    }, {
-        'type':
-            'download',
-        'os':
-            'all',
-        'url':
-            'https://github.com/syncthing/syncthing/releases/tag/v{}'
-            .format(metadata['syncthing']['version'])
     }, {
         'type': 'download',
         'os': Desktop_OS.GNU_LINUX.value,
@@ -73,7 +65,7 @@ clients = [{
         'store_name':
             Store.GOOGLE_PLAY.value,
         'fully_qualified_name':
-            'com.nutomic.syncthingandroid',
+            metadata['syncthing']['android-package-id'],
         'url':
             'https://play.google.com/store/apps/details?id={}'
             .format(metadata['syncthing']['android-package-id'])
@@ -85,7 +77,7 @@ clients = [{
         'store_name':
             Store.F_DROID.value,
         'fully_qualified_name':
-            'com.nutomic.syncthingandroid',
+            metadata['syncthing']['android-package-id'],
         'url':
             'https://f-droid.org/packages/{}'
             .format(metadata['syncthing']['android-package-id'])
diff --git a/plinth/templates/clients.html b/plinth/templates/clients.html
index ad54c01e1..805c1da13 100644
--- a/plinth/templates/clients.html
+++ b/plinth/templates/clients.html
@@ -19,88 +19,88 @@
 
 {% load i18n %}
 {% load plinth_extras %}
+{% load static %}
 
 {% if clients  %}
   <p>
-    <button type="button" class="btn btn-default collapsed"
+    <button id="collapsible-button" type="button" class="btn btn-default collapsed"
             data-toggle="collapse" data-target="#clients">
         Client Apps
     </button>
   </p>
 
-<div id="clients" class="collapse">
-{% if clients|has_web_clients %}
-<div class="clients-info">
-  <p class="heading">{% trans "Web Clients" %}:
-  <ul>
+  <table id="clients" class="table table-bordered table-hover collapse">
+      {% if clients|has_web_clients %}
     {% for client in clients %}
       {% if client|has_web_clients %}
         {% for platform in client.platforms %}
           {% if platform.type == 'web' %}
-          <li>
-            <span><a href="{{ platform.relative_url }}">{{ client.name}}</a></span>
-          </li>
-          {% endif %}
-        {% endfor %}
+       <tr>
+          <th> Web </th>
+          <td> {{ client.name }} </td>
+          <td>
+              <a href="{{ platform.relative_url }}">
+                  <button type="button" class="btn btn-success">Launch</button>
+              </a>
+          </td>
+       </tr>
+       {% endif %}
+       {% endfor %}
+       {% endif %}
+       {% endfor %}
+       {% endif %}
+
+       {% if clients|has_desktop_clients %}
+       {% for client in clients %}
+       {% if client|has_desktop_clients %}
+      <tr>
+          <th> Desktop </th>
+          <td> {{ client.name }} </td>
+          <td>
+              <div class ="row">
+                  {% for platform in client.platforms %}
+                  {% if platform.type == 'download' %}
+                  <div class="col-md-2 col-xs-4">
+                      <a href="{{ platform.url }}">
+                          {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
+                          <img class="os-icon" src="{% static icon %}" />
+                          {% endwith %}
+                      </a>
+                  </div>
+                  {% endif %}
+                  {% endfor %}
+              </div>
+          </td>
+      </tr>
       {% endif %}
-    {% endfor %}
-  </ul>
-</div>
-{% endif %}
-
-{% if clients|has_desktop_clients %}
-<div class="clients-info">
-  {% load static %}
-  <p class="heading">{% trans "Desktop Clients" %}:
-    <ul>
-      {% for client in clients %}
-        {% if client|has_desktop_clients %}
-        <li class="col-md-12 col-xs-12"> <span> {{ client.name }} </span> </li>
-        <div class ="row">
-          {% for platform in client.platforms %}
-            {% if platform.type == 'download' %}
-          <div class="col-md-1 col-xs-2">
-              <a href="{{ platform.url }}">
-                  {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
-                    <img class="os-icon" src="{% static icon %}" />
-                  {% endwith %}
-              </a>
-          </div>
-          {% endif %}
-          {% endfor %}
-        </div>
-        {% endif %}
-        {% endfor %}
-    </ul>
-</div>
-{% endif %}
-
-{% if clients|has_mobile_clients %}
-<div class="clients-info">
-    {% load static %}
-    <p class="heading">{% trans "Mobile Clients" %}:</p>
-    <ul>
-        {% for client in clients %}
-        {% if client|has_mobile_clients %}
-        <li class="col-md-12 col-xs-12"><span>{{ client.name }}</span></li>
-        <div class="row">
-            {% for platform in client.platforms %}
-            {% if platform.type == 'store' and platform.os == 'android' %}
-            <div class="col-md-2 col-xs-4">
-                <a href="{{ platform.url }}">
-                  {% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
-                    <img class="os-icon" src="{% static icon %}" />
-                  {% endwith %}
-              </a>
-            </div>
-        {% endif %}
       {% endfor %}
-      </div>
       {% endif %}
-    {% endfor %}
-    </ul>
-</div>
-  {% endif %}
 
-</div>
+      {% if clients|has_mobile_clients %}
+      {% for client in clients %}
+      {% if client|has_mobile_clients %}
+      <tr>
+          <th> Mobile </th>
+          <td> {{ client.name }} </td>
+          <td>
+              <div class="row">
+                  {% for platform in client.platforms %}
+                  {% if platform.type == 'store' and platform.os == 'android' %}
+                  <div class="col-md-2 col-xs-4">
+                      <a href="{{ platform.url }}">
+                          {% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
+                          <img class="os-icon" src="{% static icon %}" />
+                          {% endwith %}
+                      </a>
+                  </div>
+                  {% endif %}
+                  {% endfor %}
+              </div>
+          </td>
+      </tr>
+      {% endif %}
+      {% endfor %}
+      {% endif %}
+  </table>
+
 {% endif %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index cc467f9be..82b6c364a 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -152,14 +152,14 @@ footer license-info p{
 
 
 /* Icon when collapsible content is shown */
-.btn:after {
+#collapsible-button:after {
     font-family: "Glyphicons Halflings";
     content: "\e114";
     margin-left: 5px;
 }
 
 /* Icon when collapsible content is hidden */
-.btn.collapsed:after {
+#collapsible-button.collapsed:after {
     content: "\e080";
 }