From 804e4571d927c26bdf8ee8defe4c22ff4731538b Mon Sep 17 00:00:00 2001 From: Osma Ahvenlampi Date: Wed, 14 Jun 2023 17:23:56 +0300 Subject: [PATCH 1/7] tweak the behavior of status context menu --- src/components/status.jsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index 25490917..6b9def2c 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -682,9 +682,13 @@ function Status({ x: 0, y: 0, }); - const bindLongPress = useLongPress( + const bindLongPressContext = useLongPress( (e) => { const { clientX, clientY } = e.touches?.[0] || e; + // link detection copied from onContextMenu because here it works + const link = e.target.closest('a'); + if (link && /^https?:\/\//.test(link.getAttribute('href'))) return; + e.preventDefault(); setContextMenuAnchorPoint({ x: clientX, y: clientY, @@ -695,7 +699,7 @@ function Status({ threshold: 600, captureEvent: true, detect: 'touch', - cancelOnMovement: true, + cancelOnMovement: 4, // true allows movement of up to 25 pixels }, ); @@ -716,6 +720,7 @@ function Status({ } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`} onMouseEnter={debugHover} onContextMenu={(e) => { + // FIXME: this code isn't getting called on Chrome at all? if (!showContextMenu) return; if (e.metaKey) return; // console.log('context menu', e); @@ -728,7 +733,7 @@ function Status({ }); setIsContextMenuOpen(true); }} - {...(showContextMenu ? bindLongPress() : {})} + {...(showContextMenu ? bindLongPressContext() : {})} > {showContextMenu && ( { setShowPeek(true); }, @@ -1862,7 +1867,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) { threshold: 600, captureEvent: true, detect: 'touch', - cancelOnMovement: true, + cancelOnMovement: 4, // true allows movement of up to 25 pixels }, ); @@ -1875,7 +1880,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) { e.preventDefault(); setShowPeek(true); }} - {...bindLongPress()} + {...bindLongPressPeek()} >
Date: Thu, 15 Jun 2023 18:03:37 +0800 Subject: [PATCH 2/7] Fix nav menu overlapping tab bar Also allow custom padding into safeBoundingBoxPadding function --- src/components/nav-menu.jsx | 10 +++++++++- ...ng-box-padding.jsx => safe-bounding-box-padding.js} | 8 ++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) rename src/utils/{safe-bounding-box-padding.jsx => safe-bounding-box-padding.js} (78%) diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx index 7ac55fb8..116a8618 100644 --- a/src/components/nav-menu.jsx +++ b/src/components/nav-menu.jsx @@ -6,6 +6,7 @@ import { useLongPress } from 'use-long-press'; import { useSnapshot } from 'valtio'; import { api } from '../utils/api'; +import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding'; import states from '../utils/states'; import store from '../utils/store'; @@ -52,6 +53,13 @@ function NavMenu(props) { const buttonRef = useRef(); const [menuState, setMenuState] = useState(undefined); + const boundingBoxPadding = safeBoundingBoxPadding([ + 0, + 0, + snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0, + 0, + ]); + return ( <>