acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Combine SubtleWebHover and SubtleHover, default to web only for all cases

Browse Source
This commit is contained in:
Eric Bailey
2025-10-10 14:55:21 -05:00
parent 69421d1f33
commit 752a61deb1
11 changed files with 49 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post/Embed/index.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ import {ContentHider} from '#/components/moderation/ContentHider'
import {PostAlerts} from '#/components/moderation/PostAlerts'
import {RichText} from '#/components/RichText'
import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {SubtleHover} from '#/components/SubtleHover'
import * as bsky from '#/types/bsky'
import {
type Embed as TEmbed,
@@ -284,7 +284,7 @@ export function QuoteEmbed({
childContainerStyle={[a.pt_sm]}>
{({active}) => (
<>
{!active && <SubtleWebHover hover={hover} style={[a.rounded_md]} />}
{!active && <SubtleHover hover={hover} style={[a.rounded_md]} />}
<Link
style={[!active && a.p_md]}
hoverStyle={{borderColor: pal.colors.borderLinkHover}}
src/components/SubtleHover.tsx
+27 -3
View File
@@ -1,8 +1,15 @@
import {View} from 'react-native'
import {isTouchDevice} from '#/lib/browser'
import {isNative, isWeb} from '#/platform/detection'
import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
export function SubtleHover({style, hover}: ViewStyleProp & {hover: boolean}) {
export function SubtleHover({
style,
hover,
web = true,
native = false,
}: ViewStyleProp & {hover: boolean; web?: boolean; native?: boolean}) {
const t = useTheme()
let opacity: number
@@ -18,17 +25,34 @@ export function SubtleHover({style, hover}: ViewStyleProp & {hover: boolean}) {
break
}
return (
const el = (
<View
style={[
a.absolute,
a.inset_0,
a.pointer_events_none,
a.transition_opacity,
t.atoms.bg_contrast_25,
t.atoms.bg_contrast_50,
style,
{opacity: hover ? opacity : 0},
]}
/>
)
if (hover) {
console.log({
isWeb,
web,
isNative,
native,
})
}
if (isWeb && web) {
return isTouchDevice ? null : el
} else if (isNative && native) {
return el
}
return null
}
src/components/SubtleWebHover.tsx
-5
View File
@@ -1,5 +0,0 @@
import {type ViewStyleProp} from '#/alf'
export function SubtleWebHover({}: ViewStyleProp & {hover: boolean}) {
return null
}
src/components/SubtleWebHover.web.tsx
-49
View File
@@ -1,49 +0,0 @@
import {StyleSheet, View} from 'react-native'
import {isTouchDevice} from '#/lib/browser'
import {useTheme, type ViewStyleProp} from '#/alf'
export function SubtleWebHover({
style,
hover,
}: ViewStyleProp & {hover: boolean}) {
const t = useTheme()
if (isTouchDevice) {
return null
}
let opacity = 0.5
switch (t.name) {
case 'dark':
opacity = 0.4
break
case 'dim':
opacity = 0.45
break
case 'light':
opacity = 0.5
break
}
return (
<View
style={[
t.atoms.bg_contrast_25,
styles.container,
{opacity: hover ? opacity : 0},
style,
]}
/>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 0,
pointerEvents: 'none',
// @ts-ignore web only
transition: '0.15s ease-in-out opacity',
},
})
src/screens/PostThread/components/ThreadItemPost.tsx
+5 -5
View File
@@ -41,7 +41,7 @@ import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {PostControls} from '#/components/PostControls'
import {RichText} from '#/components/RichText'
import * as Skele from '#/components/Skeleton'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {SubtleHover} from '#/components/SubtleHover'
import {Text} from '#/components/Typography'
export type ThreadItemPostProps = {
@@ -246,7 +246,7 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
const {isActive: live} = useActorStatus(post.author)
return (
<SubtleHover>
<SubtleHoverWrapper>
<ThreadItemPostOuterWrapper item={item} overrides={overrides}>
<PostHider
testID={`postThreadItem-by-${post.author.handle}`}
@@ -339,11 +339,11 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
</View>
</PostHider>
</ThreadItemPostOuterWrapper>
</SubtleHover>
</SubtleHoverWrapper>
)
})
function SubtleHover({children}: {children: ReactNode}) {
function SubtleHoverWrapper({children}: {children: ReactNode}) {
const {
state: hover,
onIn: onHoverIn,
@@ -354,7 +354,7 @@ function SubtleHover({children}: {children: ReactNode}) {
onPointerEnter={onHoverIn}
onPointerLeave={onHoverOut}
style={a.pointer}>
<SubtleWebHover hover={hover} />
<SubtleHover hover={hover} />
{children}
</View>
)
src/screens/PostThread/components/ThreadItemTreePost.tsx
+5 -5
View File
@@ -40,7 +40,7 @@ import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {PostControls} from '#/components/PostControls'
import {RichText} from '#/components/RichText'
import * as Skele from '#/components/Skeleton'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {SubtleHover} from '#/components/SubtleHover'
import {Text} from '#/components/Typography'
/**
@@ -310,7 +310,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
return (
<ThreadItemTreePostOuterWrapper item={item}>
<SubtleHover>
<SubtleHoverWrapper>
<PostHider
testID={`postThreadItem-by-${post.author.handle}`}
href={postHref}
@@ -381,12 +381,12 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
</View>
</ThreadItemTreePostInnerWrapper>
</PostHider>
</SubtleHover>
</SubtleHoverWrapper>
</ThreadItemTreePostOuterWrapper>
)
})
function SubtleHover({children}: {children: React.ReactNode}) {
function SubtleHoverWrapper({children}: {children: React.ReactNode}) {
const {
state: hover,
onIn: onHoverIn,
@@ -397,7 +397,7 @@ function SubtleHover({children}: {children: React.ReactNode}) {
onPointerEnter={onHoverIn}
onPointerLeave={onHoverOut}
style={[a.flex_1, a.pointer]}>
<SubtleWebHover hover={hover} />
<SubtleHover hover={hover} />
{children}
</View>
)
src/view/com/notifications/NotificationFeedItem.tsx
+2 -2
View File
@@ -66,7 +66,7 @@ import {InlineLinkText, Link} 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 {SubtleHover} from '#/components/SubtleHover'
import {Text} from '#/components/Typography'
import {useSimpleVerificationState} from '#/components/verification'
import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -613,7 +613,7 @@ let NotificationFeedItem = ({
}}>
{({hovered}) => (
<>
<SubtleWebHover hover={hovered} />
<SubtleHover hover={hovered} />
<View style={[styles.layoutIcon, a.pr_sm]}>
{/* TODO: Prevent conditional rendering and move toward composable
notifications for clearer accessibility labeling */}
src/view/com/post/Post.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ import {PostRepliedTo} from '#/components/Post/PostRepliedTo'
import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {PostControls} from '#/components/PostControls'
import {RichText} from '#/components/RichText'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {SubtleHover} from '#/components/SubtleHover'
import * as bsky from '#/types/bsky'
export function Post({
@@ -167,7 +167,7 @@ function PostInner({
onPointerLeave={() => {
setHover(false)
}}>
<SubtleWebHover hover={hover} />
<SubtleHover hover={hover} />
{showReplyLine && <View style={styles.replyLine} />}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
src/view/com/posts/PostFeedItem.tsx
+2 -2
View File
@@ -58,7 +58,7 @@ import {PostControls} from '#/components/PostControls'
import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {RichText} from '#/components/RichText'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {SubtleHover} from '#/components/SubtleHover'
import * as bsky from '#/types/bsky'
interface FeedItemProps {
@@ -317,7 +317,7 @@ let FeedItemInner = ({
onPointerLeave={() => {
setHover(false)
}}>
<SubtleWebHover hover={hover} />
<SubtleHover hover={hover} />
<View style={{flexDirection: 'row', gap: 10, paddingLeft: 8}}>
<View style={{width: 42}}>
{isThreadChild && (
src/view/com/posts/ViewFullThread.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import {useLingui} from '@lingui/react'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {SubtleHover} from '#/components/SubtleHover'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
@@ -33,7 +33,7 @@ export function ViewFullThread({uri}: {uri: string}) {
noFeedback
onPointerEnter={onHoverIn}
onPointerLeave={onHoverOut}>
<SubtleWebHover
<SubtleHover
hover={hover}
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
style={{top: 8, bottom: -5}}
src/view/com/util/load-latest/LoadLatestBtn.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import {atoms as a, useLayoutBreakpoints, useTheme, web} from '#/alf'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {ArrowTop_Stroke2_Corner0_Rounded as ArrowIcon} from '#/components/icons/Arrow'
import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
import {SubtleWebHover} from '#/components/SubtleWebHover'
import {SubtleHover} from '#/components/SubtleHover'
export function LoadLatestBtn({
onPress,
@@ -91,7 +91,7 @@ export function LoadLatestBtn({
targetScale={0.9}
onPointerEnter={onHoverIn}
onPointerLeave={onHoverOut}>
<SubtleWebHover hover={hovered} style={[a.rounded_full]} />
<SubtleHover hover={hovered} style={[a.rounded_full]} />
<ArrowIcon
size="md"
style={[