Add subtle web hover to interactive rows (#5989)

* Add subtle web hover to interactive rows

* Adjust numbers

* Ignore touch devices
This commit is contained in:
dan
2024-10-29 21:42:37 +00:00
committed by GitHub
parent c8f264b78b
commit ba802eb0f2
8 changed files with 152 additions and 43 deletions
+11 -1
View File
@@ -51,6 +51,7 @@ import {Link as NewLink} from '#/components/Link'
import * as MediaPreview from '#/components/MediaPreview'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {Notification as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {FeedSourceCard} from '../feeds/FeedSourceCard'
import {Post} from '../post/Post'
import {Link, TextLink} from '../util/Link'
@@ -129,6 +130,8 @@ let FeedItem = ({
]
}, [item, moderationOpts])
const [hover, setHover] = React.useState(false)
if (item.subjectUri && !item.subject && item.type !== 'feedgen-like') {
// don't render anything if the target post was deleted or unfindable
return <View />
@@ -285,7 +288,14 @@ let FeedItem = ({
onToggleAuthorsExpanded()
}
}}
onBeforePress={onBeforePress}>
onBeforePress={onBeforePress}
onPointerEnter={() => {
setHover(true)
}}
onPointerLeave={() => {
setHover(false)
}}>
<SubtleWebHover hover={hover} />
<View style={[styles.layoutIcon, a.pr_sm]}>
{/* TODO: Prevent conditional rendering and move toward composable
notifications for clearer accessibility labeling */}