mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2024-10-22 10:46:04 +03:00
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:
parent
01cc4ea90b
commit
e697d40382
4 changed files with 27 additions and 22 deletions
|
@ -527,8 +527,10 @@ ul.filterList {
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.filterList a {
|
||||
ul.filterList a,
|
||||
ul.filterList span.link {
|
||||
color: var(--color-text-default);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 4px 6px;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -169,24 +169,30 @@ window.qBittorrent.ContextMenu = (function() {
|
|||
}.bind(this));
|
||||
|
||||
elem.addEvent('touchstart', function(e) {
|
||||
e.preventDefault();
|
||||
clearTimeout(this.touchstartTimer);
|
||||
this.hide();
|
||||
|
||||
const touchstartEvent = e;
|
||||
this.touchstartTimer = setTimeout(function() {
|
||||
this.touchstartTimer = -1;
|
||||
this.triggerMenu(touchstartEvent, elem);
|
||||
}.bind(this), this.options.touchTimer);
|
||||
this.touchStartAt = performance.now();
|
||||
this.touchStartEvent = e;
|
||||
}.bind(this));
|
||||
elem.addEvent('touchend', function(e) {
|
||||
e.preventDefault();
|
||||
clearTimeout(this.touchstartTimer);
|
||||
this.touchstartTimer = -1;
|
||||
const now = performance.now();
|
||||
const touchStartAt = this.touchStartAt;
|
||||
const touchStartEvent = this.touchStartEvent;
|
||||
|
||||
this.touchStartAt = null;
|
||||
this.touchStartEvent = null;
|
||||
|
||||
const isTargetUnchanged = (Math.abs(e.event.pageX - touchStartEvent.event.pageX) <= 10) && (Math.abs(e.event.pageY - touchStartEvent.event.pageY) <= 10);
|
||||
if (((now - touchStartAt) >= this.options.touchTimer) && isTargetUnchanged) {
|
||||
this.triggerMenu(touchStartEvent, elem);
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
addTarget: function(t) {
|
||||
// prevent long press from selecting this text
|
||||
t.style.setProperty('user-select', 'none');
|
||||
t.style.setProperty('-webkit-user-select', 'none');
|
||||
|
||||
this.targets[this.targets.length] = t;
|
||||
this.setupEventListeners(t);
|
||||
},
|
||||
|
@ -238,18 +244,16 @@ window.qBittorrent.ContextMenu = (function() {
|
|||
lastShownContextMenu.hide();
|
||||
this.fx.start(1);
|
||||
this.fireEvent('show');
|
||||
this.shown = true;
|
||||
lastShownContextMenu = this;
|
||||
return this;
|
||||
},
|
||||
|
||||
//hide the menu
|
||||
hide: function(trigger) {
|
||||
if (this.shown) {
|
||||
if (lastShownContextMenu && (lastShownContextMenu.menu.style.visibility !== 'hidden')) {
|
||||
this.fx.start(0);
|
||||
//this.menu.fade('out');
|
||||
this.fireEvent('hide');
|
||||
this.shown = false;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
|
|
@ -775,7 +775,6 @@ window.qBittorrent.DynamicTable = (function() {
|
|||
this._this.deselectAll();
|
||||
this._this.selectRow(this.rowId);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
tr.addEvent('keydown', function(event) {
|
||||
switch (event.key) {
|
||||
|
|
Loading…
Reference in a new issue