Merge pull request #9820 from Piccirello/webui-col-icon

Show icon in WebUI sorted column

src/webui/www/private/css/dynamicTable.css

@@ -77,6 +77,17 @@ tr.dynamicTableHeader {
     white-space: nowrap;
 }
 
+.dynamicTable th.sorted {
+    background-image: url(../images/qbt-theme/go-down.svg);
+    background-position: right;
+    background-repeat: no-repeat;
+    background-size: 15px;
+}
+
+.dynamicTable th.sorted.reverse {
+    background-image: url(../images/qbt-theme/go-up.svg);
+}
+
 .dynamicTable td img.flags {
     height: 1.25em;
     vertical-align: middle;

src/webui/www/private/scripts/dynamicTable.js

@@ -56,6 +56,7 @@ var DynamicTable = new Class({
         this.setupCommonEvents();
         this.setupHeaderEvents();
         this.setupHeaderMenu();
+        this.setSortedColumnIcon(this.sortedColumn, null, (this.reverseSort === '1'));
     },
 
     setupCommonEvents: function() {
@@ -403,6 +404,7 @@ var DynamicTable = new Class({
             th.innerHTML = this.columns[i].caption;
             th.setAttribute('style', 'width: ' + this.columns[i].width + 'px;' + this.columns[i].style);
             th.columnName = this.columns[i].name;
+            th.addClass('column_' + th.columnName);
             if ((this.columns[i].visible == '0') || this.columns[i].force_hide)
                 th.addClass('invisible');
             else
@@ -447,18 +449,44 @@ var DynamicTable = new Class({
 
     setSortedColumn: function(column) {
         if (column != this.sortedColumn) {
+            var oldColumn = this.sortedColumn;
             this.sortedColumn = column;
             this.reverseSort = '0';
+            this.setSortedColumnIcon(column, oldColumn, false);
         }
         else {
             // Toggle sort order
             this.reverseSort = this.reverseSort == '0' ? '1' : '0';
+            this.setSortedColumnIcon(column, null, (this.reverseSort === '1'));
         }
         localStorage.setItem('sorted_column_' + this.dynamicTableDivId, column);
         localStorage.setItem('reverse_sort_' + this.dynamicTableDivId, this.reverseSort);
         this.updateTable(false);
     },
 
+    setSortedColumnIcon: function(newColumn, oldColumn, isReverse) {
+        var getCol = function(headerDivId, colName) {
+            var colElem = $$("#" + headerDivId + " .column_" + colName);
+            if (colElem.length == 1)
+                return colElem[0];
+            return null;
+        };
+
+        var colElem = getCol(this.dynamicTableFixedHeaderDivId, newColumn);
+        if (colElem !== null) {
+            colElem.addClass('sorted');
+            if (isReverse)
+                colElem.addClass('reverse');
+            else
+                colElem.removeClass('reverse');
+        }
+        var oldColElem = getCol(this.dynamicTableFixedHeaderDivId, oldColumn);
+        if (oldColElem !== null) {
+            oldColElem.removeClass('sorted');
+            oldColElem.removeClass('reverse');
+        }
+    },
+
     getSelectedRowId: function() {
         if (this.selectedRows.length > 0)
             return this.selectedRows[0];