WebUI: Improve table scrolling and selection on mobile

This PR improves touch interaction with table rows that have a context menu. Previously, those rows couldn't be selected or scrolled on mobile. Additionally, this PR modifies the context menu to appear when the user removes their finger/touch, rather than the current behavior of appearing mid-touch. This allows us to only display the context menu if the user's finger remains on the same element, which should significantly reduce erroneous context menu triggering.

Closes #19819.
Closes #19820,
Closes #19823.
PR #20639.
This commit is contained in:
Thomas Piccirello 2024-04-08 23:33:10 -07:00 committed by GitHub
parent 01cc4ea90b
commit e697d40382
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 27 additions and 22 deletions

View file

@ -442,9 +442,9 @@ window.addEventListener("DOMContentLoaded", function() {
margin_left = (category_path.length - 1) * 20;
}
const html = `<a href="#" style="margin-left: ${margin_left}px;" onclick="setCategoryFilter(${hash}); return false;">`
const html = `<span class="link" href="#" style="margin-left: ${margin_left}px;" onclick="setCategoryFilter(${hash}); return false;">`
+ '<img src="images/view-categories.svg"/>'
+ window.qBittorrent.Misc.escapeHtml(display_name) + ' (' + count + ')' + '</a>';
+ window.qBittorrent.Misc.escapeHtml(display_name) + ' (' + count + ')' + '</span>';
const el = new Element('li', {
id: hash,
html: html
@ -524,9 +524,9 @@ window.addEventListener("DOMContentLoaded", function() {
tagFilterList.getChildren().each(c => c.destroy());
const createLink = function(hash, text, count) {
const html = `<a href="#" onclick="setTagFilter(${hash}); return false;">`
const html = `<span class="link" href="#" onclick="setTagFilter(${hash}); return false;">`
+ '<img src="images/tags.svg"/>'
+ window.qBittorrent.Misc.escapeHtml(text) + ' (' + count + ')' + '</a>';
+ window.qBittorrent.Misc.escapeHtml(text) + ' (' + count + ')' + '</span>';
const el = new Element('li', {
id: hash,
html: html
@ -602,9 +602,9 @@ window.addEventListener("DOMContentLoaded", function() {
trackerFilterList.getChildren().each(c => c.destroy());
const createLink = function(hash, text, count) {
const html = '<a href="#" onclick="setTrackerFilter(' + hash + ');return false;">'
const html = '<span class="link" href="#" onclick="setTrackerFilter(' + hash + ');return false;">'
+ '<img src="images/trackers.svg"/>'
+ window.qBittorrent.Misc.escapeHtml(text.replace("%1", count)) + '</a>';
+ window.qBittorrent.Misc.escapeHtml(text.replace("%1", count)) + '</span>';
const el = new Element('li', {
id: hash,
html: html