From f004939f50c3c9b1fa27db105d2bb48fdc921259 Mon Sep 17 00:00:00 2001
From: Alice Kile <buoyantair@protonmail.com>
Date: Tue, 5 Nov 2019 16:03:24 +0530
Subject: [PATCH] show app icons in apps page

- restructure the template markup so as to show the icon towards the
  left of the app heading and description.
- if condition to provide backwards compatiblity to system apps using
  setup.html.
- deluge and matrixsynapse modules have a new property that will be used
  for accessing the icon file name. (to be replicated across all other
  modules *weew*)

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/setup.html          | 44 +++++++++++++++++++++-------
 static/themes/default/css/plinth.css | 28 ++++++++++++++++++
 2 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/plinth/templates/setup.html b/plinth/templates/setup.html
index a79d3f414..03f75ca67 100644
--- a/plinth/templates/setup.html
+++ b/plinth/templates/setup.html
@@ -36,18 +36,42 @@
 
 {% block content %}
 
-  <h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
+  {% if setup_helper.module.icon_filename %}
+    <header class="app-header">
+      <figure>
+        <img src="{% static 'theme/icons/' %}{{ setup_helper.module.icon_filename }}.svg"/>
+        <figcaption>{{ setup_helper.module.name  }}</figcaption>
+      </figure>
+      <section class="app-description">
+        <h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
+    
+        {% for paragraph in setup_helper.module.description %}
+          <p>{{ paragraph|safe }}</p>
+        {% endfor %}
 
-  {% for paragraph in setup_helper.module.description %}
-    <p>{{ paragraph|safe }}</p>
-  {% endfor %}
+        {% if setup_helper.module.manual_page %}
+          <p class="manual-page">
+            <a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
+              {% trans 'Learn more...' %}
+            </a>
+          </p>
+        {% endif %}
+      </section>
+    </header>
+  {% else %}
+    <h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
 
-  {% if setup_helper.module.manual_page %}
-    <p class="manual-page">
-      <a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
-        {% trans 'Learn more...' %}
-      </a>
-    </p>
+    {% for paragraph in setup_helper.module.description %}
+      <p>{{ paragraph|safe }}</p>
+    {% endfor %}
+
+    {% if setup_helper.module.manual_page %}
+      <p class="manual-page">
+        <a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
+          {% trans 'Learn more...' %}
+        </a>
+      </p>
+    {% endif %}
   {% endif %}
 
   {% include "toolbar.html" with clients=setup_helper.module.clients %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index b38a3e28c..2ea12ad95 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -505,9 +505,11 @@ a.menu_link_active {
     left: 6%;
     transform: translateY(-50%);
 }
+
 .toggle-button--toggled {
     background: #337ab7;
 }
+
 .toggle-button--toggled::before {
     content: '';
     position: absolute;
@@ -535,3 +537,29 @@ a.menu_link_active {
 .btn-toolbar .button-extra-actions {
     float: right;
 }
+
+.app-header {
+    display: grid;
+    grid-template-columns: 0.2fr 1fr;
+    column-gap: 20px;
+    margin-bottom: 20px;
+}
+
+.app-header > figure {
+    margin-top: 25px;
+}
+
+.app-header > figure img {
+    width: 100%;
+}
+
+.app-header > figure figcaption {
+    text-align: center;
+    opacity: 0.5;
+    padding: 10px;
+    font-size: 12px;
+}
+
+.app-description {
+    grid-column: 2;
+}