WebUI: Add ability to toggle alternating row colors in tables

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

@@ -6,9 +6,7 @@
     v 0.4
 
 **************************************************************/
-
+.altRowColors tbody tr:nth-child(odd of :not(.invisible)) {
-.dynamicTable tbody tr:nth-child(even),
-.dynamicTable tbody tr.alt {
     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);
 }

src/webui/www/private/rename_files.html

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

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

@@ -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) {

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

@@ -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() {
+        setupAltRow: function() {
-            if (!MUI.ieLegacySupport)
+            const useAltRowColors = (LocalPreferences.get("use_alt_row_colors", "true") === "true");
-                return;
+            if (useAltRowColors)
-
+                document.getElementById(this.dynamicTableDivId).classList.add("altRowColors");
-            const trs = this.tableBody.getElements("tr");
-            trs.each((el, i) => {
-                if (i % 2)
-                    el.addClass("alt");
-                else
-                    el.removeClass("alt");
-            });
         },
 
         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

src/webui/www/private/scripts/prop-files.js

@@ -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();
     };
 
     /**

src/webui/www/private/scripts/prop-peers.js

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

src/webui/www/private/scripts/prop-trackers.js

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

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

@@ -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);

src/webui/www/private/views/log.html

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

src/webui/www/private/views/preferences.html

@@ -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;

src/webui/www/private/views/searchplugins.html

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