[pbs-devel] [PATCH widget-toolkit 2/2] ui: moved common loading spinner classes

[pbs-devel] [PATCH widget-toolkit 2/2] ui: moved common loading spinner classes

[Gabriel Goller]

The css classes for the loading spinner were identical in pve and pbs,
moved them here.
Added the new `x-grid-row-loading-left` class to the dark mode filter.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 src/css/ext6-pmx.css                                 | 12 ++++++++++++
 src/proxmox-dark/scss/proxmox/_loadingindicator.scss |  4 +++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 2ffd2a8..88db0ef 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -348,3 +348,15 @@ div.right-aligned {
     color: #555;
 }
 /* action column fix end */
+
+/* loading in task list */
+.x-grid-row-loading {
+    background: no-repeat center center;
+    background-image:url(../extjs/theme-crisp/resources/images/loadmask/loading.gif);
+}
+
+.x-grid-row-loading-left > * {
+    display: flex;
+    text-align: left;
+    gap: 10px;
+}
diff --git a/src/proxmox-dark/scss/proxmox/_loadingindicator.scss b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
index 69fd962..df4f51b 100644
--- a/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
+++ b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
@@ -1,5 +1,6 @@
 // loading spinners
 .x-grid-row-loading,
+.x-grid-row-loading-left,
 .x-treelist-item-loading .x-treelist-item-icon,
 .x-treelist-nav .x-treelist-item-loading .x-treelist-item-icon,
 .x-mask-msg-text,
@@ -8,7 +9,8 @@
   color: black;
 }
 
-.x-keyboard-mode .x-grid-item-focused.x-grid-row-loading {
+.x-keyboard-mode .x-grid-item-focused.x-grid-row-loading,
+.x-keyboard-mode .x-grid-item-focused.x-grid-row-loading-left  {
   background-color: invert($selection-background-color, $weight: 90%);
 
   .x-grid-cell-inner::before {
-- 
2.39.2

[pbs-devel] [PATCH proxmox-backup] ui: align loading spinner to the left, added label

[Gabriel Goller]

Moved the spinner in the Task View (and in other components that show
the status) to the left (`text-align: left`) so that the style matches
with the 'OK' and 'Error: ...' text shown in that grid-row. Also added a
label 'Running' (considers translations).
Note: The `x-grid-row-loading` and new `x-grid-row-loading-left` classes have
been moved to the `proxmox-widget-toolkit` repo.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 www/Utils.js         | 4 ++--
 www/css/ext6-pbs.css | 6 ------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/www/Utils.js b/www/Utils.js
index 2eca600e..e92af6c6 100644
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -205,8 +205,8 @@ Ext.define('PBS.Utils', {
 	}
 
 	if (!record.data['last-run-endtime']) {
-	    metadata.tdCls = 'x-grid-row-loading';
-	    return '';
+	    metadata.tdCls = 'x-grid-row-loading-left';
+	    return `<img src="extjs/theme-crisp/resources/images/loadmask/loading.gif" />${gettext('Running')}`;
 	}
 
 	let parsed = Proxmox.Utils.parse_task_status(value);
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index 5fd65d25..a437ffae 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -79,12 +79,6 @@
     color: black;
 }
 
-/* loading in task list */
-.x-grid-row-loading {
-    background: no-repeat center center;
-    background-image:url(../extjs/theme-crisp/resources/images/loadmask/loading.gif);
-}
-
 /* displayfield minheight is wrong */
 .x-form-display-field-default {
     min-height: 20px;
-- 
2.39.2

[pbs-devel] [PATCH pve-manager] ui: align spinner to the left, added label

[Gabriel Goller]

Moved the spinner in the task and replication view to the left, so it is
aligned correctly with the 'OK' and 'Error: ...' text.
Removed 'x-grid-row-loading' class as it has been moved to the
`proxmox-widget-toolkit` repo.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 www/css/ext6-pve.css             | 6 ------
 www/manager6/dc/Tasks.js         | 3 ++-
 www/manager6/grid/Replication.js | 4 ++--
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index edae462b..237500bb 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -78,12 +78,6 @@
     content: "\f115";
 }
 
-/* loading in task list */
-.x-grid-row-loading {
-    background: no-repeat center center;
-    background-image:url(../ext6/theme-crisp/resources/images/loadmask/loading.gif);
-}
-
 /* console icon in task list */
 .x-grid-row-console {
     background: no-repeat center center;
diff --git a/www/manager6/dc/Tasks.js b/www/manager6/dc/Tasks.js
index 5344ede4..1a35c183 100644
--- a/www/manager6/dc/Tasks.js
+++ b/www/manager6/dc/Tasks.js
@@ -120,7 +120,8 @@ Ext.define('PVE.dc.Tasks', {
 		    renderer: function(value, metaData, record) {
 			if (record.data.pid) {
 			    if (record.data.type !== "vncproxy") {
-				metaData.tdCls = "x-grid-row-loading";
+				metaData.tdCls = "x-grid-row-loading-left";
+				return `<img src="js/extjs/theme-crisp/resources/images/loadmask/loading.gif" />${gettext('Running')}`;
 			    }
 			    return "";
 			}
diff --git a/www/manager6/grid/Replication.js b/www/manager6/grid/Replication.js
index 30cd6718..29af4aa3 100644
--- a/www/manager6/grid/Replication.js
+++ b/www/manager6/grid/Replication.js
@@ -329,8 +329,8 @@ Ext.define('PVE.grid.ReplicaView', {
 		    flex: 1,
 		    renderer: function(value, metadata, record) {
 			if (record.data.pid) {
-			    metadata.tdCls = 'x-grid-row-loading';
-			    return '';
+			    metadata.tdCls = "x-grid-row-loading-left";
+			    return `<img src="js/extjs/theme-crisp/resources/images/loadmask/loading.gif" />${gettext('Running')}`;
 			}
 
 			let icons = [], states = [];
-- 
2.39.2