public inbox for pmg-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Stefan Sterz <s.sterz@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables
Date: Thu,  9 Mar 2023 09:00:48 +0100	[thread overview]
Message-ID: <20230309080048.29218-1-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com>

by using css variables for the colored grid items in the spam info
grid, changing these colors based on media queries etc. is possible.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 css/ext6-pmg.css   | 10 ++++++++++
 js/SpamInfoGrid.js | 15 +++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 3c47fd9..2f999f4 100644
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -1,3 +1,13 @@
+/* color variables (e.g. for the spam info grid) */
+:root {
+    --pmg-spam-high-neg: #ACD1EC;
+    --pmg-spam-high-pos: #E8B0B2;
+    --pmg-spam-mid-neg: #d7e9f6;
+    --pmg-spam-mid-pos: #f3d6d7;
+    --pmg-spam-low-neg: #EEF6FB;
+    --pmg-spam-low-pos: #FAEFF0;
+}
+
 /* overwrite to use full black for enabled buttons */
 .x-btn-inner-default-toolbar-small {
     font: 300 12px/16px helvetica, arial, verdana, sans-serif;
diff --git a/js/SpamInfoGrid.js b/js/SpamInfoGrid.js
index a806ea3..00d6f97 100644
--- a/js/SpamInfoGrid.js
+++ b/js/SpamInfoGrid.js
@@ -44,22 +44,25 @@ Ext.define('PMG.grid.SpamInfoGrid', {
 	    dataIndex: 'score',
 	    align: 'right',
 	    tdCls: 'txt-monospace',
-	    renderer: function(score, metaData) {
+	    renderer: function(score, meta) {
 		if (score === 0) {
 		    return score;
 		}
-		let absScore = Math.abs(score);
-		let fontWeight = '400', background = score < 0 ? '#d7e9f6' : '#f3d6d7';
+
+		let absScore = Math.abs(score), fontWeight = '400';
+		let background = score < 0 ? "--pmg-spam-mid-neg" : "--pmg-spam-mid-pos";
+
 		if (absScore >= 3) {
 		    fontWeight = '900';
-		    background = score < 0 ? '#ACD1EC' : '#E8B0B2';
+		    background = score < 0 ? "--pmg-spam-high-neg" : "--pmg-spam-high-pos";
 		} else if (absScore >= 1.5) {
 		    fontWeight = '600';
 		} else if (absScore <= 0.1) {
 		    fontWeight = '200';
-		    background = score < 0 ? '#EEF6FB' : '#FAEFF0';
+		    background = score < 0 ? "--pmg-spam-low-neg" : "--pmg-spam-low-pos";
 		}
-		metaData.tdStyle = `font-weight: ${fontWeight};background-color: ${background};`;
+
+		meta.tdStyle = `font-weight: ${fontWeight};background-color: var(${background});`;
 		return score;
 	    },
 	    summaryType: 'sum',
-- 
2.30.2





  parent reply	other threads:[~2023-03-09  8:01 UTC|newest]

Thread overview: 22+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36   ` [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching Stefan Sterz
2023-03-08 16:36   ` [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
2023-03-08 16:37   ` [pmg-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 17:04 ` [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
2023-03-09  8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
2023-03-10 10:14   ` Dominik Csapak
2023-03-10 10:24     ` Stefan Sterz
2023-03-15 15:42   ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09  8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
2023-03-15 15:42   ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09  8:00 ` Stefan Sterz [this message]
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background Stefan Sterz
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching Stefan Sterz
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine Stefan Sterz
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle Stefan Sterz
2023-03-09  8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
2023-03-23 16:11   ` [pmg-devel] applied: " Thomas Lamprecht

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20230309080048.29218-1-s.sterz@proxmox.com \
    --to=s.sterz@proxmox.com \
    --cc=pmg-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal