From 53ee9c4ee2afab22c9cfd2625ba92af11a38c6fe Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Thu, 12 Mar 2026 14:15:37 -0700 Subject: [PATCH] ui: Use inline SVG icons for all spinners Tests: - All the icons appear as before in both light/dark themes. Signed-off-by: Sunil Mohan Adapa Reviewed-by: James Valleroy --- .../modules/networks/templates/wifi_scan.html | 3 +- .../templates/upgrades-dist-upgrade.html | 11 +++--- .../templates/upgrades_configure.html | 14 +++---- plinth/templates/first_setup.html | 3 +- plinth/templates/operation-notification.html | 2 +- plinth/templates/operations.html | 4 +- static/themes/default/css/main.css | 37 ++++++++++++++++--- 7 files changed, 53 insertions(+), 21 deletions(-) diff --git a/plinth/modules/networks/templates/wifi_scan.html b/plinth/modules/networks/templates/wifi_scan.html index a1c4737a1..69c0fad0c 100644 --- a/plinth/modules/networks/templates/wifi_scan.html +++ b/plinth/modules/networks/templates/wifi_scan.html @@ -5,6 +5,7 @@ {% load bootstrap %} {% load i18n %} +{% load plinth_extras %} {% block content %} @@ -31,7 +32,7 @@ {% trans "never" %} {% endif %} {% if device.scan_requested %} - + {% icon 'spinner' class='svg-icon spin' %} {% endif %}

diff --git a/plinth/modules/upgrades/templates/upgrades-dist-upgrade.html b/plinth/modules/upgrades/templates/upgrades-dist-upgrade.html index 6a20a3365..77e0ddfe3 100644 --- a/plinth/modules/upgrades/templates/upgrades-dist-upgrade.html +++ b/plinth/modules/upgrades/templates/upgrades-dist-upgrade.html @@ -6,6 +6,7 @@ {% load bootstrap %} {% load i18n %} {% load static %} +{% load plinth_extras %} {% block content %}

{% trans "Distribution Update" %}

@@ -26,16 +27,16 @@

{% if status.running %} -
-
- +
+
+ {% icon 'refresh' class='svg-icon spin text-info' %}
-

+

{% blocktrans trimmed %} Distribution update is currently running. This operation may take several hours. Most apps will be unavailable during this period. {% endblocktrans %} -

+
{% else %} {% if not status.updates_enabled or not status.dist_upgrade_enabled or not status.has_free_space or not status.current_codename %} diff --git a/plinth/modules/upgrades/templates/upgrades_configure.html b/plinth/modules/upgrades/templates/upgrades_configure.html index fc6a9b511..cf06f1276 100644 --- a/plinth/modules/upgrades/templates/upgrades_configure.html +++ b/plinth/modules/upgrades/templates/upgrades_configure.html @@ -17,17 +17,17 @@

{% trans "Status" %}

-
-
+
+
{% if is_busy %} - + {% icon 'refresh' class='svg-icon spin text-info' %} {% elif new_version %} - + {% icon 'frown-o' class='svg-icon text-warning' %} {% else %} - + {% icon 'smile-o' class='svg-icon text-body-tertiary' %} {% endif %}
-

+

{% blocktrans trimmed %} You are running {{ os_release }} and {{ box_name }} version {{ version }}. {% endblocktrans %} @@ -41,7 +41,7 @@ {% else %} {% blocktrans %}{{ box_name }} is up to date.{% endblocktrans %} {% endif %} -

+
{% endblock %} diff --git a/plinth/templates/first_setup.html b/plinth/templates/first_setup.html index e2ea9f9e0..2d7045a00 100644 --- a/plinth/templates/first_setup.html +++ b/plinth/templates/first_setup.html @@ -6,6 +6,7 @@ {% load bootstrap %} {% load i18n %} {% load static %} +{% load plinth_extras %} {% block body_class %} no-brand @@ -20,7 +21,7 @@ no-brand {% if is_first_setup_running %} {% endif %} diff --git a/plinth/templates/operation-notification.html b/plinth/templates/operation-notification.html index e524cb0be..753e7f0fd 100644 --- a/plinth/templates/operation-notification.html +++ b/plinth/templates/operation-notification.html @@ -10,7 +10,7 @@ {% if data.state == "waiting" %} {% icon 'clock-o' %} {% elif data.state == "running" %} - + {% icon 'refresh' class='svg-icon spin' %} {% elif data.state == "completed" %} {% endif %} diff --git a/plinth/templates/operations.html b/plinth/templates/operations.html index 12529c42c..fc45b307b 100644 --- a/plinth/templates/operations.html +++ b/plinth/templates/operations.html @@ -2,9 +2,11 @@ # SPDX-License-Identifier: AGPL-3.0-or-later {% endcomment %} +{% load plinth_extras %} + {% for operation in operations %}
- + {% icon 'refresh' class='svg-icon spin' %} {{ operation.translated_message }}
{% endfor %} diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index 95ecc7ffb..1a804e5d2 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -364,6 +364,24 @@ footer { margin: 0.125em 0.25em; } +@keyframes spin { + 0% { + transform: none; + } + 100% { + transform: rotate(1turn); + } +} + +.svg-icon.spin { + animation: spin 2s infinite linear; +} + +.svg-icon[data-icon-name="spinner"].spin { + /* Spin in discrete steps of 8 */ + animation: spin 1s infinite steps(8); +} + /* * Bootstrap extensions */ @@ -675,11 +693,7 @@ footer { */ .firstboot-spinner { text-align: center; -} - -.firstboot-spinner span.fa { - float: none; - margin: auto; + font-size: 4em; } .next-steps { @@ -1077,3 +1091,16 @@ textarea.log { width: 80%; } } + +/* + * Upgrades app pages + */ +.upgrades-status-icon, +.upgrades-dist-upgrade-running-icon { + font-size: 3rem; +} + +.upgrades-status-icon svg, +.upgrades-dist-upgrade-running-icon svg { + margin-left: 0; +}