diff --git a/src/components/images/Gallery/index.tsx b/src/components/images/Gallery/index.tsx index c7e7b206e0..dfe7366d98 100644 --- a/src/components/images/Gallery/index.tsx +++ b/src/components/images/Gallery/index.tsx @@ -24,7 +24,7 @@ import {mergeRefs} from '#/lib/merge-refs' import {useA11y} from '#/state/a11y' import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal' import {AutoSizedImage} from '#/components/images/AutoSizedImage' import { @@ -376,6 +376,7 @@ function GalleryImage({ }) { const t = useTheme() const {t: l} = useLingui() + const [focused, setFocused] = useState(false) const containerRef = useAnimatedRef() const [aspectRatio, setAspectRatio] = useState(() => getAspectRatio(image.aspectRatio), @@ -397,6 +398,8 @@ function GalleryImage({ ref={itemRef} onPress={onPress} onPressIn={onPressIn} + onFocus={() => setFocused(true)} + onBlur={() => setFocused(false)} accessibilityRole="button" accessibilityLabel={image.alt || l`Image ${index + 1}`} accessibilityHint={l`Opens full image`} @@ -404,7 +407,16 @@ function GalleryImage({ color: utils.alpha(t.atoms.bg.backgroundColor, 0.2), foreground: true, }} - style={[a.rounded_md, a.overflow_hidden, t.atoms.bg_contrast_25]}> + style={[ + a.rounded_md, + a.overflow_hidden, + t.atoms.bg_contrast_25, + web({ + cursor: 'inherit', + outline: 0, + border: 0, + }), + ]}> ) : null} - + ) diff --git a/src/components/images/Gallery/usePointerHandlers.web.ts b/src/components/images/Gallery/usePointerHandlers.web.ts index adb6df9c70..b45044a9cb 100644 --- a/src/components/images/Gallery/usePointerHandlers.web.ts +++ b/src/components/images/Gallery/usePointerHandlers.web.ts @@ -11,8 +11,8 @@ const FLICK_MIN_VELOCITY = 0.1 const ADVANCE_THRESHOLD = 0.15 const FRAME_MS = 1000 / 60 const SETTLE_DURATION = 600 -const OVERSCROLL_RESISTANCE = 0.3 -const BOUNCE_DURATION = 400 +const OVERSCROLL_RESISTANCE = 0.4 +const BOUNCE_DURATION = 700 function whichByDistance( itemWidths: Map,