spam info grid: use monospace font for score and level names

[pmg-gui.git] / js / SpamInfoGrid.js

diff --git a/js/SpamInfoGrid.js b/js/SpamInfoGrid.js
index a1b3324fde50a8f2f6a24346b22eb991a38dfc3c..444b489b9ffc94e60bcad59416b6df575e3cdb9d 100644 (file)
--- a/js/SpamInfoGrid.js
+++ b/js/SpamInfoGrid.js
@@ -1,16 +1,15 @@
-Ext.define('PMG.grid.SpamInfoGrid',{
+Ext.define('PMG.grid.SpamInfoGrid', {
     extend: 'Ext.grid.GridPanel',
     xtype: 'pmgSpamInfoGrid',
 
-    hideHeaders: true,
-
     store: {
        autoDestroy: true,
-       fields: [ 'desc', 'name', { type: 'number', name: 'score' } ],
+       fields: ['desc', 'name', { type: 'number', name: 'score' }],
        proxy: {
            type: 'proxmox',
-           root: 'data.spaminfo'
-       }
+           root: 'data.spaminfo',
+       },
+       sorters: 'score',
     },
 
     setID: function(rec) {
@@ -28,7 +27,7 @@ Ext.define('PMG.grid.SpamInfoGrid',{
     hidden: true,
 
     features: [{
-       ftype: 'summary'
+       ftype: 'summary',
     }],
 
     columns: [
@@ -39,21 +38,41 @@ Ext.define('PMG.grid.SpamInfoGrid',{
            summaryType: 'count',
            summaryRenderer: function(value, summaryData, dataIndex, metaData) {
                return gettext('Spamscore');
-           }
+           },
+           tdCls: 'txt-monospace',
        },
        {
            text: gettext('Score'),
            dataIndex: 'score',
            align: 'right',
+           tdCls: 'txt-monospace',
+           renderer: function(score, metaData) {
+               if (score === 0) {
+                   return score;
+               }
+               let absScore = Math.abs(score);
+               let fontWeight = '400', background = score < 0 ? '#d7e9f6' : '#f3d6d7';
+               if (absScore >= 3) {
+                   fontWeight = '900';
+                   background = score < 0 ? '#ACD1EC' : '#E8B0B2';
+               } else if (absScore >= 1.5) {
+                   fontWeight = '600';
+               } else if (absScore <= 0.1) {
+                   fontWeight = '200';
+                   background = score < 0 ? '#EEF6FB' : '#FAEFF0';
+               }
+               metaData.tdStyle = `font-weight: ${fontWeight};background-color: ${background};`;
+               return score;
+           },
            summaryType: 'sum',
            summaryRenderer: function(value, summaryData, dataIndex, metaData) {
                return Ext.util.Format.round(value, 5);
-           }
+           },
        },
        {
            text: gettext('Description'),
            dataIndex: 'desc',
-           flex: 3
-       }
+           flex: 3,
+       },
     ],
 });