[pve-devel] [PATCH proxmox-widget-toolkit v1 1/2] fix #4546: css: Inform user administrator about user accounts expiring soon

[Philipp Hufnagl <p.hufnagl@proxmox.com>]

Adds a new css class to underlay information urgency in table columns
for dark and light mode. This underlay color then is used to notifiy
user administrators about user accounts that will expire soon

Signed-off-by: Philipp Hufnagl <p.hufnagl@proxmox.com>
---
 src/Utils.js                                    | 6 +++++-
 src/css/ext6-pmx.css                            | 4 ++++
 src/proxmox-dark/scss/abstracts/_variables.scss | 1 +
 src/proxmox-dark/scss/proxmox/_general.scss     | 5 +++++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/Utils.js b/src/Utils.js
index f269607..a7ded2a 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -174,10 +174,14 @@ utilities: {
 	return value ? Proxmox.Utils.enabledText : Proxmox.Utils.disabledText;
     },
 
-    format_expire: function(date) {
+    format_expire: function(date, meta) {
 	if (!date) {
 	    return Proxmox.Utils.neverText;
 	}
+	let expieWariningThreshold = Ext.Date.add(new Date(), Ext.Date.DAY, 7);
+	if (expieWariningThreshold >= date) {
+	    meta.tdCls += 'proxmox-hint-row';
+	}
 	return Ext.Date.format(date, "Y-m-d");
     },
 
diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 2ffd2a8..439f3a0 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -76,6 +76,10 @@
     background-color: #f3d6d7;
 }
 
+.proxmox-hint-row {
+    background-color: #5eb9ff;
+}
+
 .proxmox-warning-row {
     background-color: #f5e5d8;
 }
diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
index cac51eb..8bcae09 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -26,6 +26,7 @@ $background-darker: hsl(0deg, 0%, 15%);
 $background-darkest: hsl(0deg, 0%, 10%);
 $background-invalid: hsl(360deg, 60%, 20%);
 $background-warning: hsl(40deg, 100%, 20%);
+$background-hint: hsl(233deg, 99%, 60%);
 
 // Buttons
 $neutral-button-color: hsl(0deg, 0%, 25%);
diff --git a/src/proxmox-dark/scss/proxmox/_general.scss b/src/proxmox-dark/scss/proxmox/_general.scss
index c319f6d..8b2a4d0 100644
--- a/src/proxmox-dark/scss/proxmox/_general.scss
+++ b/src/proxmox-dark/scss/proxmox/_general.scss
@@ -25,6 +25,11 @@ div[id^="versioninfo-"] + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"]
   background-color: $background-warning;
 }
 
+// Info rows, e.g. when an user account expires soon
+.proxmox-hint-row {
+  background-color: $background-hint;
+}
+
 // Disabled rows (e.g. disabled repos in Repository view)
 .proxmox-disabled-row td {
   color: $text-color-inactive;
-- 
2.39.2