mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

touchscreen longpress displays context menu (#4104)

Browse source 
Fixes the issue where long press would not open up
context menu in a virtualized table and tab bar because
it was handled in mousedown events that longpress on a
touchscreen does not dispatch.

This behavior is still observed in the scrollable area
of the reader and the note editor.

Addresses: zotero#4094
This commit is contained in:
abaevbog 2024-05-13 19:03:29 -04:00 • committed by GitHub
parent 31616af2af
commit 7091fa3a58
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

20
chrome/content/zotero/components/tabBar.jsx
View file

@ -111,15 +111,8 @@ const TabBar = forwardRef(function (props, ref) {
function handleTabMouseDown(event, id) { function handleTabMouseDown(event, id) {
// Don't select tab if it'll be closed with middle button click on mouse up // Don't select tab if it'll be closed with middle button click on mouse up
if (event.button === 1) { // or on right-click
return; if ([1, 2].includes(event.button)) {
}
if (event.button === 2) {
let { screenX, screenY } = event;
// Popup gets immediately closed without this
setTimeout(() => {
props.onContextMenu(screenX, screenY, id);
}, 0);
return; return;
} }
@ -130,6 +123,14 @@ const TabBar = forwardRef(function (props, ref) {
event.stopPropagation(); event.stopPropagation();
} }
function handleContextMenu(event, id) {
let { screenX, screenY } = event;
// Popup gets immediately closed without this
setTimeout(() => {
props.onContextMenu(screenX, screenY, id);
});
}
function handleTabClick(event, id) { function handleTabClick(event, id) {
if (event.button === 1) { if (event.button === 1) {
props.onTabClose(id); props.onTabClose(id);
@ -270,6 +271,7 @@ const TabBar = forwardRef(function (props, ref) {
className={cx('tab', { selected, dragging: dragging && id === dragIDRef.current })} className={cx('tab', { selected, dragging: dragging && id === dragIDRef.current })}
draggable={true} draggable={true}
onMouseDown={(event) => handleTabMouseDown(event, id)} onMouseDown={(event) => handleTabMouseDown(event, id)}
onContextMenu={(event) => handleContextMenu(event, id)}
onClick={(event) => handleTabClick(event, id)} onClick={(event) => handleTabClick(event, id)}
onAuxClick={(event) => handleTabClick(event, id)} onAuxClick={(event) => handleTabClick(event, id)}
onDragStart={(event) => handleDragStart(event, id, index)} onDragStart={(event) => handleDragStart(event, id, index)}

15
chrome/content/zotero/components/virtualized-table.jsx
View file

@ -718,18 +718,20 @@ class VirtualizedTable extends React.Component {
_handleMouseDown = async (e, index) => { _handleMouseDown = async (e, index) => {
const modifierClick = e.shiftKey || e.ctrlKey || e.metaKey; const modifierClick = e.shiftKey || e.ctrlKey || e.metaKey;
if (e.button == 2) {
if (!modifierClick && !this.selection.isSelected(index)) {
this._onSelection(index, false, false);
}
this.props.onItemContextMenu(e, e.screenX, e.screenY);
}
// All modifier clicks handled in mouseUp per mozilla itemtree convention // All modifier clicks handled in mouseUp per mozilla itemtree convention
if (!modifierClick && !this.selection.isSelected(index)) { if (!modifierClick && !this.selection.isSelected(index)) {
this._onSelection(index, false, false); this._onSelection(index, false, false);
} }
this.focus(); this.focus();
} }
_handleContextMenu = async (e, index) => {
if (!this.selection.isSelected(index)) {
this._onSelection(index, false, false);
}
this.props.onItemContextMenu(e, e.screenX, e.screenY);
this.focus();
}
_handleMouseUp = async (e, index) => { _handleMouseUp = async (e, index) => {
const shiftSelect = e.shiftKey; const shiftSelect = e.shiftKey;
@ -1148,6 +1150,7 @@ class VirtualizedTable extends React.Component {
node.addEventListener('dragstart', e => this._onDragStart(e, index), { passive: true }); node.addEventListener('dragstart', e => this._onDragStart(e, index), { passive: true });
node.addEventListener('dragend', e => this._onDragEnd(e, index), { passive: true }); node.addEventListener('dragend', e => this._onDragEnd(e, index), { passive: true });
node.addEventListener('mousedown', e => this._handleMouseDown(e, index), { passive: true }); node.addEventListener('mousedown', e => this._handleMouseDown(e, index), { passive: true });
node.addEventListener('contextmenu', e => this._handleContextMenu(e, index), { passive: true });
node.addEventListener('mouseup', e => this._handleMouseUp(e, index), { passive: true }); node.addEventListener('mouseup', e => this._handleMouseUp(e, index), { passive: true });
node.addEventListener('dblclick', e => this._activateNode(e, [index]), { passive: true }); node.addEventListener('dblclick', e => this._activateNode(e, [index]), { passive: true });
} }