spam-info-grid: style the spam info grid via css variables

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>
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by:  Dominik Csapak <d.csapak@proxmox.com>

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 3c47fd98299117406516704fa3ccfd9c099eae34..2f999f4fe0b47a56d279cf751822f4bb5b3b0b41 100644 (file)
--- 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 a806ea30578d9479d521a7f45d4428829d624cf3..00d6f97341e08969daec68d063a007fedd7ce98c 100644 (file)
--- 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',