From 34f74a285fe65bd18431f65f72d0a5998f11751c Mon Sep 17 00:00:00 2001
From: Veiko Aasa <veiko17@disroot.org>
Date: Wed, 3 Feb 2021 11:55:12 +0200
Subject: [PATCH] plinth: Show running spinner when app installation is in
 progress

Add running spinner before every app installation step text, this
makes the fact that installation is in progress visually more noticeable.

Tested when installing the mediawiki app, the running spinner is shown
on every installation step.

Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Horizontally align the text and spinner by the spinner inline]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 plinth/modules/upgrades/static/upgrades.css       | 15 ---------------
 .../templates/update-firstboot-progress.html      |  5 -----
 .../upgrades/templates/upgrades_configure.html    |  5 -----
 plinth/templates/setup.html                       |  3 +++
 static/themes/default/css/main.css                | 12 ++++++++++++
 5 files changed, 15 insertions(+), 25 deletions(-)
 delete mode 100644 plinth/modules/upgrades/static/upgrades.css

diff --git a/plinth/modules/upgrades/static/upgrades.css b/plinth/modules/upgrades/static/upgrades.css
deleted file mode 100644
index b08713ca1..000000000
--- a/plinth/modules/upgrades/static/upgrades.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
-# SPDX-License-Identifier: AGPL-3.0-or-later
-*/
-
-.warning {
-    color: var(--warning-color);
-}
-
-.processing {
-    color: var(--progress-color);
-}
-
-.normal {
-    color: var(--neutral-dark-color);
-}
diff --git a/plinth/modules/upgrades/templates/update-firstboot-progress.html b/plinth/modules/upgrades/templates/update-firstboot-progress.html
index 14f57c968..0f3c16155 100644
--- a/plinth/modules/upgrades/templates/update-firstboot-progress.html
+++ b/plinth/modules/upgrades/templates/update-firstboot-progress.html
@@ -7,11 +7,6 @@
 {% load i18n %}
 {% load static %}
 
-{% block page_head %}
-  <link type="text/css" rel="stylesheet"
-        href="{% static 'upgrades/upgrades.css' %}"/>
-{% endblock %}
-
 {% block content %}
   <h2>{% trans "Update" %}</h2>
 
diff --git a/plinth/modules/upgrades/templates/upgrades_configure.html b/plinth/modules/upgrades/templates/upgrades_configure.html
index 7e870b0de..19835c4cc 100644
--- a/plinth/modules/upgrades/templates/upgrades_configure.html
+++ b/plinth/modules/upgrades/templates/upgrades_configure.html
@@ -7,11 +7,6 @@
 {% load i18n %}
 {% load static %}
 
-{% block page_head %}
-  <link type="text/css" rel="stylesheet"
-        href="{% static 'upgrades/upgrades.css' %}"/>
-{% endblock %}
-
 {% block status %}
   {{ block.super}}  {% comment %} To extend instead of overwrite {% endcomment %}
 
diff --git a/plinth/templates/setup.html b/plinth/templates/setup.html
index 665e92fce..2846a0145 100644
--- a/plinth/templates/setup.html
+++ b/plinth/templates/setup.html
@@ -68,15 +68,18 @@
 
     {% if setup_current_operation.step == 'pre' %}
       <div class="installing install-state-pre">
+        <span class="fa fa-refresh fa-spin processing"></span>
         {% trans "Performing pre-install operation" %}
       </div>
     {% elif setup_current_operation.step == 'post' %}
       <div class="installing install-state-post">
+        <span class="fa fa-refresh fa-spin processing"></span>
         {% trans "Performing post-install operation" %}
       </div>
     {% elif setup_current_operation.step == 'install' %}
       {% with transaction=setup_current_operation.transaction %}
         <div class="installing install-state-installing">
+          <span class="fa fa-refresh fa-spin processing"></span>
           {% blocktrans trimmed with package_names=transaction.package_names|join:", " status=transaction.status_string %}
             Installing {{ package_names }}: {{ status }}
           {% endblocktrans %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index b97dc3464..a742b690a 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -889,6 +889,18 @@ img.notification-icon {
     border-left-color: var(--info-color)
 }
 
+.warning {
+    color: var(--warning-color);
+}
+
+.processing {
+    color: var(--progress-color);
+}
+
+.normal {
+    color: var(--neutral-dark-color);
+}
+
 /* Two different notifications for each small and one for large screens */
 .notifications-dropdown {
     display: none;