proxmox-mirrors/pmg-gui
1
0
Fork 0
mirror of https://git.proxmox.com/git/pmg-gui synced 2025-10-04 09:51:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Stefan Sterz 2023-03-09 09:00:48 +01:00 committed by Thomas Lamprecht
parent 4685066c73
commit 926bfe7a89
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/ext6-pmg.css
View File

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

15
js/SpamInfoGrid.js
View File

@ -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',