[WebUI] Colorize symbols

2 files changed, 47 insertions, 8 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 14bb4e669..e7bea45a7 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -167,6 +167,34 @@ input.action-scores {
     font-weight: normal;
 }
 
+/* Symbols coloring */
+.symbol-default {
+    border-radius: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+.symbol-default:hover {
+    background-color: #E6E6E6;
+}
+.symbol-negative {
+    background-color: #EEF9E7;
+}
+.symbol-positive {
+    background-color: #FBE9E5;
+}
+.symbol-special {
+    background-color: #E2E9FE;
+}
+.symbol-negative:hover {
+    background-color: #DCF9D3;
+}
+.symbol-positive:hover {
+    background-color: #FBD6D1;
+}
+.symbol-special:hover {
+    background-color: #CDDBFF;
+}
+
 .btn-upload-trigger {
 	position:relative;
 	z-index:1;
diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index 184be994c..8717d2e8e 100644
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -177,24 +177,36 @@ define(["jquery", "footable", "humanize"],
                         return {full:full, shrt:shrt};
                     }
 
+                    function get_symbol_class(name, score) {
+                        if (name.match(/^GREYLIST$/)) {
+                            return "symbol-special";
+                        }
+
+                        if (score < 0) {
+                            return "symbol-negative";
+                        } else if (score > 0) {
+                            return "symbol-positive";
+                        }
+                        return null;
+                    }
+
                     preprocess_item(item);
                     Object.keys(item.symbols).forEach(function (key) {
-                        var str = null;
                         var sym = item.symbols[key];
+                        sym.str = '<span class="symbol-default ' + get_symbol_class(sym.name, sym.score) + '"><strong>';
 
                         if (sym.description) {
-                            str = "<strong><abbr data-sym-key=\"" + key + "\">" + sym.name + "</abbr></strong>(" + sym.score + ")";
-
+                            sym.str += '<abbr data-sym-key="' + key + '">' +
+                                sym.name + "</abbr></strong> (" + sym.score + ")</span>";
                             // Store description for tooltip
                             symbolDescriptions[key] = sym.description;
                         } else {
-                            str = "<strong>" + sym.name + "</strong>(" + sym.score + ")";
+                            sym.str += sym.name + "</strong> (" + sym.score + ")</span>";
                         }
 
                         if (sym.options) {
-                            str += "[" + sym.options.join(",") + "]";
+                            sym.str += " [" + sym.options.join(",") + "]";
                         }
-                        sym.str = str;
                     });
                     unsorted_symbols.push(item.symbols);
                     item.symbols = sort_symbols(item.symbols, compare_function);
@@ -204,8 +216,7 @@ define(["jquery", "footable", "humanize"],
                             sortValue: item.unix_time
                         }
                     };
-                    var scan_time = item.time_real.toFixed(3) + " / " +
-                item.time_virtual.toFixed(3);
+                    var scan_time = item.time_real.toFixed(3) + " / " + item.time_virtual.toFixed(3);
                     item.scan_time = {
                         options: {
                             sortValue: item.time_real