Merge pull request #2593 from moisseev/eslint

[WebUI] Colorize symbols

2 files changed, 47 insertions, 92 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 14bb4e669..7c6880f6c 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -30,12 +30,6 @@ textarea {
 	font-family:"Courier New", Courier, monospace;
 	}
 
-.login {
-	width:480px;
-	margin-top:120px;
-	margin-left:-240px;
-	}
-
 /* local overrides */
 .disconnect {
 	margin:9px 0 0;
@@ -75,9 +69,6 @@ input.action-scores {
   padding:2px 0;
   text-align:center;
 }
-.symbols-label {
-  font-size:11px !important;
-}
 
 /* history table */
 .table-log {
@@ -167,10 +158,34 @@ input.action-scores {
     font-weight: normal;
 }
 
-.btn-upload-trigger {
-	position:relative;
-	z-index:1;
-	}
+/* 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;
+}
+
 .upload-textarea,
 .scan-textarea {
 	width:100% !important;
@@ -186,18 +201,6 @@ input.action-scores {
   margin-right: -10px !important;
 	}
 
-.row-bordered {
-	margin-bottom:13px;
-	border-bottom:1px solid #cdcdcd;
-	}
-.symbol-description {
-	display:block;
-	margin:4px 0 0 6px;
-	font-size:10px;
-	font-weight:bold;
-	color:#666;
-	}
-
 .list-textarea {
 	width:100%;
 	height:360px;
@@ -375,44 +378,6 @@ td.maps-cell {
 .nopadding {
 	padding:0 !important;
 	}
-.activity-list {
-	list-style:none outside none;
-	margin:0;
-	}
-	.activity-list li {
-		border-bottom:1px solid #EEEEEE;
-		display:block;
-		}
-	.activity-list li:last-child {
-		border-bottom:medium none;
-		}
-		.activity-list li a {
-			color:#888888;
-			display:block;
-			padding:7px 10px;
-			}
-		.activity-list li a:hover {
-			background-color:#FBFBFB;
-			}
-			.activity-list li a span {
-				color:#AAAAAA;
-				font-size:11px;
-				font-style:italic;
-				}
-			.activity-list li a i {
-				margin-right:10px;
-				opacity:0.6;
-				vertical-align:middle;
-				}
-.recent-posts, .recent-comments, .recent-users {
-	margin:0;
-	padding:0;
-	}
-	.recent-posts li, .article-post li {
-		border-bottom:1px dotted #AEBDC8;
-		list-style:none outside none;
-		padding:10px;
-		}
 .modal-header {
 	height:auto;
 	padding:8px 15px 5px;
@@ -542,12 +507,6 @@ td.maps-cell {
 #scanForm button {
     margin-top: 10px;
     }
-#historyLog_wrapper div.row:first-child > div {
-    padding: 5px 20px 0 20px;
-    }
-#historyLog_wrapper div.row:last-child > div {
-    padding: 5px 20px 0 20px;
-    }
 
 #throughput div.widget-content {
     text-align: center;
@@ -673,21 +632,6 @@ input.radio {
 #clusterTable .col3 {
 	width: 50%;
 }
-table.dataTable thead .sorting {
-background: url("../img/asc.png") no-repeat center right;
-}
-table.dataTable thead .sorting_asc {
-background: url("../img/asc.png") no-repeat center right;
-}
-table.dataTable thead .sorting_desc {
-background: url("../img/desc.png") no-repeat center right;
-}
-table.dataTable thead .sorting_asc_disabled {
-background: url("../img/asc.png") no-repeat center right;
-}
-table.dataTable thead .sorting_desc_disabled {
-background: url("../img/desc.png") no-repeat center right;
-}
 
 #nprogress .bar {
 	height: 1px;
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