github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-07-12 08:16:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

WebUI: Add ability to toggle alternating row colors in tables

Browse source
This commit is contained in:
skomerko 2024-07-28 09:02:15 +02:00
parent 69a829dfb0
commit b67495464d
11 changed files with 40 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/webui/www/private/css/dynamicTable.css
View file

@ -6,9 +6,7 @@
v 0.4
**************************************************************/
.dynamicTable tbody tr:nth-child(even),
.dynamicTable tbody tr.alt {
.altRowColors tbody tr:nth-child(odd of :not(.invisible)) {
background-color: var(--color-background-default);
}
@ -16,12 +14,12 @@
padding: 4px 2px;
}
.dynamicTable tbody tr.selected {
.dynamicTableDiv table.dynamicTable tbody tr.selected {
background-color: var(--color-background-blue);
color: var(--color-text-white);
}
.dynamicTable tbody tr:hover {
.dynamicTableDiv table.dynamicTable tbody tr:hover {
background-color: var(--color-background-hover);
color: var(--color-text-white);
}

1
src/webui/www/private/rename_files.html
View file

@ -380,7 +380,6 @@
bulkRenameFilesTable.populateTable(rootNode);
bulkRenameFilesTable.updateTable(false);
bulkRenameFilesTable.altRow();
if (selectedRows !== undefined)
bulkRenameFilesTable.reselectRows(selectedRows);

1
src/webui/www/private/scripts/client.js
View file

@ -845,7 +845,6 @@ window.addEventListener("DOMContentLoaded", () => {
});
}
torrentsTable.updateTable(full_update);
torrentsTable.altRow();
if (response["server_state"]) {
const tmp = response["server_state"];
for (const k in tmp) {

54
src/webui/www/private/scripts/dynamicTable.js
View file

@ -88,6 +88,7 @@ window.qBittorrent.DynamicTable ??= (() => {
this.setupHeaderEvents();
this.setupHeaderMenu();
this.setSortedColumnIcon(this.sortedColumn, null, (this.reverseSort === "1"));
this.setupAltRow();
},
setupCommonEvents: function() {
@ -566,17 +567,10 @@ window.qBittorrent.DynamicTable ??= (() => {
return this.selectedRows.contains(rowId);
},
altRow: function() {
if (!MUI.ieLegacySupport)
return;
const trs = this.tableBody.getElements("tr");
trs.each((el, i) => {
if (i % 2)
el.addClass("alt");
else
el.removeClass("alt");
});
setupAltRow: function() {
const useAltRowColors = (LocalPreferences.get("use_alt_row_colors", "true") === "true");
if (useAltRowColors)
document.getElementById(this.dynamicTableDivId).classList.add("altRowColors");
},
selectAll: function() {
@ -2147,25 +2141,6 @@ window.qBittorrent.DynamicTable ??= (() => {
this.updateGlobalCheckbox();
},
altRow: function() {
let addClass = false;
const trs = this.tableBody.getElements("tr");
trs.each((tr) => {
if (tr.hasClass("invisible"))
return;
if (addClass) {
tr.addClass("alt");
tr.removeClass("nonAlt");
}
else {
tr.removeClass("alt");
tr.addClass("nonAlt");
}
addClass = !addClass;
});
},
_sortNodesByColumn: function(nodes, column) {
nodes.sort((row1, row2) => {
// list folders before files when sorting by name
@ -2496,25 +2471,6 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns["availability"].updateTd = displayPercentage;
},
altRow: function() {
let addClass = false;
const trs = this.tableBody.getElements("tr");
trs.each((tr) => {
if (tr.hasClass("invisible"))
return;
if (addClass) {
tr.addClass("alt");
tr.removeClass("nonAlt");
}
else {
tr.removeClass("alt");
tr.addClass("nonAlt");
}
addClass = !addClass;
});
},
_sortNodesByColumn: function(nodes, column) {
nodes.sort((row1, row2) => {
// list folders before files when sorting by name

5
src/webui/www/private/scripts/prop-files.js
View file

@ -474,7 +474,6 @@ window.qBittorrent.PropFiles ??= (() => {
torrentFilesTable.populateTable(rootNode);
torrentFilesTable.updateTable(false);
torrentFilesTable.altRow();
if (selectedFiles.length > 0)
torrentFilesTable.reselectRows(selectedFiles);
@ -703,12 +702,10 @@ window.qBittorrent.PropFiles ??= (() => {
const expandNode = function(node) {
_collapseNode(node, false, false, false);
torrentFilesTable.altRow();
};
const collapseNode = function(node) {
_collapseNode(node, true, false, false);
torrentFilesTable.altRow();
};
const expandAllNodes = function() {
@ -718,7 +715,6 @@ window.qBittorrent.PropFiles ??= (() => {
_collapseNode(child, false, true, false);
});
});
torrentFilesTable.altRow();
};
const collapseAllNodes = function() {
@ -728,7 +724,6 @@ window.qBittorrent.PropFiles ??= (() => {
_collapseNode(child, true, true, false);
});
});
torrentFilesTable.altRow();
};
/**

1
src/webui/www/private/scripts/prop-peers.js
View file

@ -90,7 +90,6 @@ window.qBittorrent.PropPeers ??= (() => {
});
}
torrentPeersTable.updateTable(full_update);
torrentPeersTable.altRow();
if (response["show_flags"]) {
if (show_flags !== response["show_flags"]) {

1
src/webui/www/private/scripts/prop-trackers.js
View file

@ -108,7 +108,6 @@ window.qBittorrent.PropTrackers ??= (() => {
});
torrentTrackersTable.updateTable(false);
torrentTrackersTable.altRow();
if (selectedTrackers.length > 0)
torrentTrackersTable.reselectRows(selectedTrackers);

2
src/webui/www/private/scripts/search.js
View file

@ -343,7 +343,6 @@ window.qBittorrent.Search ??= (() => {
// must restore all filters before calling updateTable
searchResultsTable.updateTable();
searchResultsTable.altRow();
// must reselect rows after calling updateTable
if (rowsToSelect.length > 0)
@ -823,7 +822,6 @@ window.qBittorrent.Search ??= (() => {
$("numSearchResultsTotal").textContent = searchResultsTable.getRowIds().length;
searchResultsTable.updateTable();
searchResultsTable.altRow();
}
setupSearchTableEvents(true);

1
src/webui/www/private/views/log.html
View file

@ -405,7 +405,6 @@
}
tableInfo[curTab].instance.updateTable();
tableInfo[curTab].instance.altRow();
updateLabelCount(curTab);
}

9
src/webui/www/private/views/preferences.html
View file

@ -7,6 +7,12 @@
</select>
</fieldset>
<fieldset class="settings">
<legend>QBT_TR(Transfer list)QBT_TR[CONTEXT=OptionsDialog]</legend>
<div class="formRow" style="margin-bottom: 3px;">
<input type="checkbox" id="useAltRowColorsInput">
<label for="useAltRowColorsInput">QBT_TR(Use alternating row colors)QBT_TR[CONTEXT=OptionsDialog]</label>
</div>
<fieldset class="settings">
<legend>QBT_TR(Action on double-click)QBT_TR[CONTEXT=OptionsDialog]</legend>
<table>
@ -32,6 +38,7 @@
</tbody>
</table>
</fieldset>
</fieldset>
<fieldset class="settings">
<legend>
@ -2070,6 +2077,7 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
// Behavior tab
$("dblclickDownloadSelect").value = LocalPreferences.get("dblclick_download", "1");
$("dblclickCompleteSelect").value = LocalPreferences.get("dblclick_complete", "1");
document.getElementById("useAltRowColorsInput").checked = (LocalPreferences.get("use_alt_row_colors", "true") === "true");
$("filelog_checkbox").checked = pref.file_log_enabled;
$("filelog_save_path_input").value = pref.file_log_path;
$("filelog_backup_checkbox").checked = pref.file_log_backup_enabled;
@ -2480,6 +2488,7 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
// Behavior tab
LocalPreferences.set("dblclick_download", $("dblclickDownloadSelect").value);
LocalPreferences.set("dblclick_complete", $("dblclickCompleteSelect").value);
LocalPreferences.set("use_alt_row_colors", document.getElementById("useAltRowColorsInput").checked.toString());
settings["file_log_enabled"] = $("filelog_checkbox").checked;
settings["file_log_path"] = $("filelog_save_path_input").value;
settings["file_log_backup_enabled"] = $("filelog_backup_checkbox").checked;

1
src/webui/www/private/views/searchplugins.html
View file

@ -223,7 +223,6 @@
}
searchPluginsTable.updateTable();
searchPluginsTable.altRow();
// add event listeners
setupSearchPluginTableEvents(true);