WebUI: Add checkboxes for easy selection on mobile #22892

userwiths · 2025-06-20T11:16:34Z

Closes #22701

Without checkboxes, mobile users cannot search and then select multiple tasks to delete.

I assume tasks refers to torrents until told otherwise.

Screenshots

Desktop

Mobile

Summary

Adds a setting that when turned ON renders a left most column that represents a checkbox in the torrents table

The state of this checkbox updates on torrent select/deselect to highlight the currently selected torrents

Checking/Unchecking the box allows for easier management of multiple torrents through a touch-screen device where selecting multiple non sequential torrents is more difficult than when using a mouse.

Notes

The condition for updating a row's content relies on a change in the response its getting from the server. Here we try to change that by introducting the jsManaged (boolean) attribute in to the column object, which would be false by default, but in case it is true we will trigger the column's updateTd regardless of change in server response.
DynamicTable.selectAll & DynamicTable.deselectAll did not trigger the event (onSelectedRowChanged) that selectRow and its related do, might have been done with performance in mind, dont have that much torrents to test with. Made it fire the events in order to be able to detect selection of all torrents.
Added an early return on the touchstart event of dynamicTableDiv. On desktop all was good, but on mobile this event fires together with the checkbox click and effectively deselects the selected row causing the checkbox to "blink" on for a second and then become unchecked again.

glassez · 2025-06-21T13:36:07Z

I wouldn't expect WebUI exclusive feature touches main (server) app in any way. Why not store this setting at the WebUI side?

userwiths · 2025-06-22T15:23:18Z

Agreed, latest version introduces this option only in the WebUI and does not change any server/app files.

Chocobo1

https://github.com/qbittorrent/qBittorrent/blob/master/CONTRIBUTING.md#opening-a-pull-request
Provide screenshots for UI related changes.

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

Chocobo1 · 2025-07-12T11:40:24Z

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

@@ -585,6 +587,8 @@ window.qBittorrent.DynamicTable ??= (() => {
            column["onVisibilityChange"] = null;
            column["staticWidth"] = null;
            column["calculateBuffer"] = () => 0;
+            column["jsManaged"] = false;


What do you mean jsManaged?

Yeah im on board if there are better design ideas.

jsManaged for me means Managed by JS code and not provided from C++/QT/APP

The default columns are being supplied from the src/webui/api/serialize/serialize_torrent.cpp.

The other approach (PR22131) is to have a "js" column (not supplied by serialize) with dataProperties the properties that when changed would force it to update.

My introduction of jsManaged is because

We do not get info from serialize for which torrent is selected.

The checkbox is independent of the other torrent properties (no dataProperties to show when a refresh of the checkbox is needed)

So i went with a quick flag that would show that this column is managed by JS code, and its update function (updateTd) should be called.

jsManaged bears no meaning of how it is used or its context. Nobody thinks about C++/QT/APP in this context or reading this code. It is a bad name.
Furthermore, why do you need a property when you can just look up LocalPreferences.get("use_checkbox") within updateRow()?

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

Chocobo1 · 2025-07-12T11:46:28Z

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

+                    htmlInput.type = "checkbox";
+                    htmlInput.className = "selectRowCheckbox";
+                    htmlInput.checked = self.isRowSelected(row.rowId);


Shouldn't you put these in if (htmlInput === null) body?

I agree for type and className, once we render the checkbox it would already have them.

I do think that checked must remain outside of htmlInput === null as we need to update the state of existing checkboxes too to represent the currently selected torrents.

Chocobo1 · 2025-07-12T11:46:54Z

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

+                    htmlInput.className = "selectRowCheckbox";
+                    htmlInput.checked = self.isRowSelected(row.rowId);
+
+                    if (td.firstElementChild === null) {


Shouldn't it be merged with if (htmlInput === null)?

I dont think so.

It is outside of htmlInput === null so that it can append the newly created checkbox if it does not exist.

td.firstElementChild === null - if true that row did not have a checkbox and we add one to it, otherwise the changes were already applied to the checkbox through the htmlInput

I still don't follow. Let me ask another way.
Please point out what is wrong with the following code:

if (LocalPreferences.get("use_checkbox", "false") === "true") { this.columns["selected"].updateTd = (td, row) => { let htmlInput = td.firstElementChild; if (htmlInput === null) { htmlInput = document.createElement("input"); htmlInput.type = "checkbox"; htmlInput.className = "selectRowCheckbox"; htmlInput.addEventListener("click", (e) => { e.stopPropagation(); if (htmlInput.checked) this.selectRow(row.rowId); else this.deselectRow(row.rowId); }); td.append(htmlInput); } htmlInput.checked = this.isRowSelected(row.rowId); }; }

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

Adds a setting that when turned `ON` renders a left most column that represents a checkbox in the torrents table The state of this checkbox updates on torrent select/deselect to highlight the currently selected torrents Checking/Unchecking the box allows for easier management of multiple torrents through a touch-screen device where selecting multiple non sequential torrents differs from using a mouse.

Chocobo1 · 2025-07-13T13:40:28Z

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

@@ -163,6 +163,9 @@ window.qBittorrent.DynamicTable ??= (() => {
            }, true);

            this.dynamicTableDiv.addEventListener("touchstart", (e) => {
+                // ignore touch events on checkboxes, otherwise breaks on mobile
+                if (e.target.classList.contains("selectRowCheckbox"))
+                    return;


Suggested change

return;

return;

Chocobo1 · 2025-07-13T13:44:58Z

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

@@ -3031,6 +3036,8 @@
            }
            settings["alternative_webui_enabled"] = alternative_webui_enabled;
            settings["alternative_webui_path"] = webui_files_location_textarea;
+            settings["use_checkbox"] = document.getElementById("useCheckbox").checked;


why are you sending this setting to qbt server?

Chocobo1 · 2025-07-13T14:04:24Z

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

+                    htmlInput.className = "selectRowCheckbox";
+                    htmlInput.checked = self.isRowSelected(row.rowId);
+
+                    if (td.firstElementChild === null) {


I still don't follow. Let me ask another way.
Please point out what is wrong with the following code:

if (LocalPreferences.get("use_checkbox", "false") === "true") { this.columns["selected"].updateTd = (td, row) => { let htmlInput = td.firstElementChild; if (htmlInput === null) { htmlInput = document.createElement("input"); htmlInput.type = "checkbox"; htmlInput.className = "selectRowCheckbox"; htmlInput.addEventListener("click", (e) => { e.stopPropagation(); if (htmlInput.checked) this.selectRow(row.rowId); else this.deselectRow(row.rowId); }); td.append(htmlInput); } htmlInput.checked = this.isRowSelected(row.rowId); }; }

Chocobo1 · 2025-07-13T14:09:53Z

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

@@ -585,6 +587,8 @@ window.qBittorrent.DynamicTable ??= (() => {
            column["onVisibilityChange"] = null;
            column["staticWidth"] = null;
            column["calculateBuffer"] = () => 0;
+            column["jsManaged"] = false;


jsManaged bears no meaning of how it is used or its context. Nobody thinks about C++/QT/APP in this context or reading this code. It is a bad name.
Furthermore, why do you need a property when you can just look up LocalPreferences.get("use_checkbox") within updateRow()?

userwiths force-pushed the feat/add-checkboxes-22701 branch from 2e6d301 to 538116e Compare June 20, 2025 11:19

glassez requested a review from a team June 21, 2025 13:36

userwiths force-pushed the feat/add-checkboxes-22701 branch from 538116e to 5629b07 Compare June 22, 2025 15:18

Piccirello mentioned this pull request Jun 25, 2025

Add Mobile Friendly WebUI #8887

Open

xavier2k6 added the WebUI WebUI-related issues/changes label Jun 25, 2025

Chocobo1 reviewed Jul 12, 2025

View reviewed changes

userwiths force-pushed the feat/add-checkboxes-22701 branch from 5629b07 to 37bf7b3 Compare July 12, 2025 14:16

Chocobo1 reviewed Jul 13, 2025

View reviewed changes

Uh oh!

WebUI: Add checkboxes for easy selection on mobile #22892

Are you sure you want to change the base?

WebUI: Add checkboxes for easy selection on mobile #22892

Uh oh!

Conversation

userwiths commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots

Summary

Notes

Uh oh!

glassez commented Jun 21, 2025

Uh oh!

userwiths commented Jun 22, 2025

Uh oh!

Chocobo1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

userwiths commented Jun 20, 2025 •

edited

Loading