zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Reduce hovercard false positives, add them to display names and handles (#3739) 

* Don't trigger hovercards on scroll

* Add display name / handle hovercards

* Increase hovercard delay
zio/stable
dan 2024-04-28 13:59:18 +01:00 committed by GitHub
parent 74cd1d4458
commit 3b4848ba59
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ProfileHoverCard/index.web.tsx
View File

@ -72,10 +72,10 @@ type Action =
| 'unhovered-long-enough'
| 'finished-animating-hide'
const SHOW_DELAY = 400
const SHOW_DELAY = 500
const SHOW_DURATION = 300
const HIDE_DELAY = 150
const HIDE_DURATION = 150
const HIDE_DURATION = 200
export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
const {refs, floatingStyles} = useFloating({
@ -244,12 +244,20 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
}
}, [prefetchProfileQuery, props.did])
const onPointerEnterTarget = React.useCallback(() => {
const didFireHover = React.useRef(false)
const onPointerMoveTarget = React.useCallback(() => {
prefetchIfNeeded()
dispatch('hovered-target')
// Conceptually we want something like onPointerEnter,
// but we want to ignore entering only due to scrolling.
// So instead we hover on the first onPointerMove.
if (!didFireHover.current) {
didFireHover.current = true
dispatch('hovered-target')
}
}, [prefetchIfNeeded])
const onPointerLeaveTarget = React.useCallback(() => {
didFireHover.current = false
dispatch('unhovered-target')
}, [])
@ -280,7 +288,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
return (
<div
ref={refs.setReference}
onPointerEnter={onPointerEnterTarget}
onPointerMove={onPointerMoveTarget}
onPointerLeave={onPointerLeaveTarget}
onMouseUp={onPress}
style={{

65
src/view/com/util/PostMeta.tsx
View File

@ -11,6 +11,7 @@ import {sanitizeHandle} from 'lib/strings/handles'
import {niceDate} from 'lib/strings/time'
import {TypographyVariant} from 'lib/ThemeContext'
import {isAndroid, isWeb} from 'platform/detection'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {TextLinkOnWebOnly} from './Link'
import {Text} from './text/Text'
import {TimeElapsed} from './TimeElapsed'
@ -58,37 +59,39 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
/>
</View>
)}
<Text
numberOfLines={1}
style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
<TextLinkOnWebOnly
type={opts.displayNameType || 'lg-bold'}
style={[pal.text]}
lineHeight={1.2}
disableMismatchWarning
text={
<>
{sanitizeDisplayName(
displayName,
opts.moderation?.ui('displayName'),
)}
</>
}
href={profileLink}
onBeforePress={onBeforePress}
onPointerEnter={onPointerEnter}
/>
<TextLinkOnWebOnly
type="md"
disableMismatchWarning
style={[pal.textLight, {flexShrink: 4}]}
text={'\xa0' + sanitizeHandle(handle, '@')}
href={profileLink}
onBeforePress={onBeforePress}
onPointerEnter={onPointerEnter}
anchorNoUnderline
/>
</Text>
<ProfileHoverCard inline did={opts.author.did}>
<Text
numberOfLines={1}
style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
<TextLinkOnWebOnly
type={opts.displayNameType || 'lg-bold'}
style={[pal.text]}
lineHeight={1.2}
disableMismatchWarning
text={
<>
{sanitizeDisplayName(
displayName,
opts.moderation?.ui('displayName'),
)}
</>
}
href={profileLink}
onBeforePress={onBeforePress}
onPointerEnter={onPointerEnter}
/>
<TextLinkOnWebOnly
type="md"
disableMismatchWarning
style={[pal.textLight, {flexShrink: 4}]}
text={'\xa0' + sanitizeHandle(handle, '@')}
href={profileLink}
onBeforePress={onBeforePress}
onPointerEnter={onPointerEnter}
anchorNoUnderline
/>
</Text>
</ProfileHoverCard>
{!isAndroid && (
<Text
type="md"