mirror of
https://github.com/qbittorrent/qBittorrent
synced 2025-07-16 02:03:07 -07: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
|
@ -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;
|
||||
},
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue