Show icon in WebUI sorted column

This commit is contained in:
Thomas Piccirello 2018-11-05 02:51:23 -05:00
parent a57a026f4c
commit 555382779c
2 changed files with 39 additions and 0 deletions

View File

@ -77,6 +77,17 @@ tr.dynamicTableHeader {
white-space: nowrap; 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 { .dynamicTable td img.flags {
height: 1.25em; height: 1.25em;
vertical-align: middle; vertical-align: middle;

View File

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