From 02a2e48fb60ec36b317497e21cf8df56b40aa73c Mon Sep 17 00:00:00 2001
From: Vsevolod Stakhov <vsevolod@highsecure.ru>
Date: Wed, 2 Nov 2016 17:09:50 +0000
Subject: [PATCH] [WebUI] Improve visual representation of symbols table

---
 interface/css/rspamd.css |  8 ++++++++
 interface/index.html     |  2 +-
 interface/js/rspamd.js   | 22 +++++++++++-----------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index eb6c9c0c8..62501df48 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -552,3 +552,11 @@ td.maps-cell {
     width: auto;
     border: 1px solid grey;
 }
+
+.scorebar-spam {
+	background-color: rgba(240, 0, 0, 0.1);
+}
+
+.scorebar-ham {
+	background: rgba(100, 230, 80, 0.1)
+}
diff --git a/interface/index.html b/interface/index.html
index 611f86290..502e5791c 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -149,8 +149,8 @@
 					<div class="widget-content nopadding">
 						<table class="table table-log table-hover" id="symbolsTable">
 							<thead>
-								<th title="Symbol">Symbol name</th>
 								<th title="Group">Group</th>
+								<th title="Symbol">Symbol</th>
 								<th title="Description">Description</th>
 								<th title="Score">Score</th>
 								<th title="Hits">Hits</th>
diff --git a/interface/js/rspamd.js b/interface/js/rspamd.js
index 96add8257..77fe5e867 100644
--- a/interface/js/rspamd.js
+++ b/interface/js/rspamd.js
@@ -681,9 +681,9 @@
                             }
                             var label;
                             if (item.weight < 0) {
-                                label = 'label-success';
+                                label_class = 'scorebar-ham';
                             } else {
-                                label = 'label-danger';
+                                label_class = 'scorebar-spam';
                             }
 
                             if (!item.time) {
@@ -693,15 +693,15 @@
                                 item.frequency = 0;
                             }
                             items.push('<tr>' +
-                                '<td data-order="' + item.symbol + '"><strong>' + item.symbol + '</strong></td>' +
                                 '<td data-order="' + group.group + '"><div class="cell-overflow" tabindex="1" title="' + group.group + '">' + group.group + '</div></td>' +
+                                '<td data-order="' + item.symbol + '"><strong>' + item.symbol + '</strong></td>' +
                                 '<td data-order="' + item.description + '"><div class="cell-overflow" tabindex="1" title="' + item.description + '">' + item.description + '</div></td>' +
-                                '<td data-order="' + item.weight + '"><input class="numeric" data-role="numerictextbox" autocomplete="off" "type="number" class="input" min="' +
+                                '<td data-order="' + item.weight + '"><input class="numeric ' + label_class +
+                                '" data-role="numerictextbox" autocomplete="off" "type="number" class="input" min="' +
                                 min + '" max="' +
                                 max + '" step="' + decimalStep(item.weight) +
                                 '" tabindex="1" value="' + Number(item.weight).toFixed(3) +
-                                '" id="_sym_' + item.symbol + '"><span class="label ' + label + '">●' +
-                                '</span></td>' +
+                                '" id="_sym_' + item.symbol + '"></span></td>' +
                                 '<td data-order="' + item.frequency + '">' + item.frequency + '</td>' +
                                 '<td data-order="' + item.time + '">' + Number(item.time).toFixed(2) + 'ms</td>' +
                                 '<td><button type="button" class="btn btn-primary btn-sm">Save</button></td>' +
@@ -715,16 +715,16 @@
                         "paging": false,
                         "orderMulti": true,
                         "order": [
-                            [1, "asc"],
                             [0, "asc"],
+                            [1, "asc"],
                             [3, "desc"]
                         ],
                         "info": false,
                         "columns": [
-                            {"width": "25%", "searchable": true, "orderable": true},
-                            {"width": "10%", "searchable": true, "orderable": true},
-                            {"width": "25%", "searchable": false, "orderable": false},
-                            {"width": "10%", "searchable": false, "orderable": true, "type": "num"},
+                            {"width": "7%", "searchable": true, "orderable": true},
+                            {"width": "20%", "searchable": true, "orderable": true},
+                            {"width": "30%", "searchable": false, "orderable": false},
+                            {"width": "7%", "searchable": false, "orderable": true, "type": "num"},
                             {"searchable": false, "orderable": true, "type": "num"},
                             {"searchable": false, "orderable": true, "type": "num"},
                             {"width": "5%", "searchable": false, "orderable": false, "type": "html"}
-- 
2.39.5