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

[Lukas Wagner]

Comments inline.

On 9/22/23 16:36, Philipp Hufnagl wrote:
> 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
Typo in 'notify'
> user administrators about user accounts that will expire soon
> 
> Signed-off-by: Philipp Hufnagl <p.hufnagl at 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);
                       ^
Typo, also same remarks as in the other patch.
> +	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%);

That particular color tone looks pretty out of place to me in dark mode.
In light mode, you use the same hue as other interface elements, is 
there a reason why you use a different color in dark mode?

Playing around a bit, hsl(205, 100%, 40%) or hsl(205, 100%, 45%) would 
look about right for me, that's the same hue as other elements,
while being a bit toned down (reduced lightness).

@sterzy, maybe you can provide some feedback as well?

Also, small bug: the hint-color seems to disappear when the 'expiry'
is clicked, only seems to affect dark mode.

>   
>   // 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;

-- 
- Lukas