diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index 58f6f09e5..6b024783b 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/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; diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index d3bd80994..4e1f40fd0 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/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];