Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
Combine SubtleWebHover and SubtleHover, default to web only for all cases (#9188)
authored by
Eric Bailey
and committed by
GitHub
8a301316
69421d1f
+49
-79
+2
-2
src/components/Post/Embed/index.tsx
+2
-2
src/components/Post/Embed/index.tsx
···
23
23
import {PostAlerts} from '#/components/moderation/PostAlerts'
24
24
import {RichText} from '#/components/RichText'
25
25
import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
26
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
26
+
import {SubtleHover} from '#/components/SubtleHover'
27
27
import * as bsky from '#/types/bsky'
28
28
import {
29
29
type Embed as TEmbed,
···
284
284
childContainerStyle={[a.pt_sm]}>
285
285
{({active}) => (
286
286
<>
287
-
{!active && <SubtleWebHover hover={hover} style={[a.rounded_md]} />}
287
+
{!active && <SubtleHover hover={hover} style={[a.rounded_md]} />}
288
288
<Link
289
289
style={[!active && a.p_md]}
290
290
hoverStyle={{borderColor: pal.colors.borderLinkHover}}
+27
-3
src/components/SubtleHover.tsx
+27
-3
src/components/SubtleHover.tsx
···
1
1
import {View} from 'react-native'
2
2
3
+
import {isTouchDevice} from '#/lib/browser'
4
+
import {isNative, isWeb} from '#/platform/detection'
3
5
import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
4
6
5
-
export function SubtleHover({style, hover}: ViewStyleProp & {hover: boolean}) {
7
+
export function SubtleHover({
8
+
style,
9
+
hover,
10
+
web = true,
11
+
native = false,
12
+
}: ViewStyleProp & {hover: boolean; web?: boolean; native?: boolean}) {
6
13
const t = useTheme()
7
14
8
15
let opacity: number
···
18
25
break
19
26
}
20
27
21
-
return (
28
+
const el = (
22
29
<View
23
30
style={[
24
31
a.absolute,
25
32
a.inset_0,
26
33
a.pointer_events_none,
27
34
a.transition_opacity,
28
-
t.atoms.bg_contrast_25,
35
+
t.atoms.bg_contrast_50,
29
36
style,
30
37
{opacity: hover ? opacity : 0},
31
38
]}
32
39
/>
33
40
)
41
+
42
+
if (hover) {
43
+
console.log({
44
+
isWeb,
45
+
web,
46
+
isNative,
47
+
native,
48
+
})
49
+
}
50
+
51
+
if (isWeb && web) {
52
+
return isTouchDevice ? null : el
53
+
} else if (isNative && native) {
54
+
return el
55
+
}
56
+
57
+
return null
34
58
}
-5
src/components/SubtleWebHover.tsx
-5
src/components/SubtleWebHover.tsx
-49
src/components/SubtleWebHover.web.tsx
-49
src/components/SubtleWebHover.web.tsx
···
1
-
import {StyleSheet, View} from 'react-native'
2
-
3
-
import {isTouchDevice} from '#/lib/browser'
4
-
import {useTheme, type ViewStyleProp} from '#/alf'
5
-
6
-
export function SubtleWebHover({
7
-
style,
8
-
hover,
9
-
}: ViewStyleProp & {hover: boolean}) {
10
-
const t = useTheme()
11
-
if (isTouchDevice) {
12
-
return null
13
-
}
14
-
let opacity = 0.5
15
-
switch (t.name) {
16
-
case 'dark':
17
-
opacity = 0.4
18
-
break
19
-
case 'dim':
20
-
opacity = 0.45
21
-
break
22
-
case 'light':
23
-
opacity = 0.5
24
-
break
25
-
}
26
-
return (
27
-
<View
28
-
style={[
29
-
t.atoms.bg_contrast_25,
30
-
styles.container,
31
-
{opacity: hover ? opacity : 0},
32
-
style,
33
-
]}
34
-
/>
35
-
)
36
-
}
37
-
38
-
const styles = StyleSheet.create({
39
-
container: {
40
-
position: 'absolute',
41
-
left: 0,
42
-
right: 0,
43
-
bottom: 0,
44
-
top: 0,
45
-
pointerEvents: 'none',
46
-
// @ts-ignore web only
47
-
transition: '0.15s ease-in-out opacity',
48
-
},
49
-
})
+5
-5
src/screens/PostThread/components/ThreadItemPost.tsx
+5
-5
src/screens/PostThread/components/ThreadItemPost.tsx
···
41
41
import {PostControls} from '#/components/PostControls'
42
42
import {RichText} from '#/components/RichText'
43
43
import * as Skele from '#/components/Skeleton'
44
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
44
+
import {SubtleHover} from '#/components/SubtleHover'
45
45
import {Text} from '#/components/Typography'
46
46
47
47
export type ThreadItemPostProps = {
···
246
246
const {isActive: live} = useActorStatus(post.author)
247
247
248
248
return (
249
-
<SubtleHover>
249
+
<SubtleHoverWrapper>
250
250
<ThreadItemPostOuterWrapper item={item} overrides={overrides}>
251
251
<PostHider
252
252
testID={`postThreadItem-by-${post.author.handle}`}
···
339
339
</View>
340
340
</PostHider>
341
341
</ThreadItemPostOuterWrapper>
342
-
</SubtleHover>
342
+
</SubtleHoverWrapper>
343
343
)
344
344
})
345
345
346
-
function SubtleHover({children}: {children: ReactNode}) {
346
+
function SubtleHoverWrapper({children}: {children: ReactNode}) {
347
347
const {
348
348
state: hover,
349
349
onIn: onHoverIn,
···
354
354
onPointerEnter={onHoverIn}
355
355
onPointerLeave={onHoverOut}
356
356
style={a.pointer}>
357
-
<SubtleWebHover hover={hover} />
357
+
<SubtleHover hover={hover} />
358
358
{children}
359
359
</View>
360
360
)
+5
-5
src/screens/PostThread/components/ThreadItemTreePost.tsx
+5
-5
src/screens/PostThread/components/ThreadItemTreePost.tsx
···
40
40
import {PostControls} from '#/components/PostControls'
41
41
import {RichText} from '#/components/RichText'
42
42
import * as Skele from '#/components/Skeleton'
43
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
43
+
import {SubtleHover} from '#/components/SubtleHover'
44
44
import {Text} from '#/components/Typography'
45
45
46
46
/**
···
310
310
311
311
return (
312
312
<ThreadItemTreePostOuterWrapper item={item}>
313
-
<SubtleHover>
313
+
<SubtleHoverWrapper>
314
314
<PostHider
315
315
testID={`postThreadItem-by-${post.author.handle}`}
316
316
href={postHref}
···
381
381
</View>
382
382
</ThreadItemTreePostInnerWrapper>
383
383
</PostHider>
384
-
</SubtleHover>
384
+
</SubtleHoverWrapper>
385
385
</ThreadItemTreePostOuterWrapper>
386
386
)
387
387
})
388
388
389
-
function SubtleHover({children}: {children: React.ReactNode}) {
389
+
function SubtleHoverWrapper({children}: {children: React.ReactNode}) {
390
390
const {
391
391
state: hover,
392
392
onIn: onHoverIn,
···
397
397
onPointerEnter={onHoverIn}
398
398
onPointerLeave={onHoverOut}
399
399
style={[a.flex_1, a.pointer]}>
400
-
<SubtleWebHover hover={hover} />
400
+
<SubtleHover hover={hover} />
401
401
{children}
402
402
</View>
403
403
)
+2
-2
src/view/com/notifications/NotificationFeedItem.tsx
+2
-2
src/view/com/notifications/NotificationFeedItem.tsx
···
66
66
import * as MediaPreview from '#/components/MediaPreview'
67
67
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
68
68
import {Notification as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
69
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
69
+
import {SubtleHover} from '#/components/SubtleHover'
70
70
import {Text} from '#/components/Typography'
71
71
import {useSimpleVerificationState} from '#/components/verification'
72
72
import {VerificationCheck} from '#/components/verification/VerificationCheck'
···
613
613
}}>
614
614
{({hovered}) => (
615
615
<>
616
-
<SubtleWebHover hover={hovered} />
616
+
<SubtleHover hover={hovered} />
617
617
<View style={[styles.layoutIcon, a.pr_sm]}>
618
618
{/* TODO: Prevent conditional rendering and move toward composable
619
619
notifications for clearer accessibility labeling */}
+2
-2
src/view/com/post/Post.tsx
+2
-2
src/view/com/post/Post.tsx
···
35
35
import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
36
36
import {PostControls} from '#/components/PostControls'
37
37
import {RichText} from '#/components/RichText'
38
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
38
+
import {SubtleHover} from '#/components/SubtleHover'
39
39
import * as bsky from '#/types/bsky'
40
40
41
41
export function Post({
···
167
167
onPointerLeave={() => {
168
168
setHover(false)
169
169
}}>
170
-
<SubtleWebHover hover={hover} />
170
+
<SubtleHover hover={hover} />
171
171
{showReplyLine && <View style={styles.replyLine} />}
172
172
<View style={styles.layout}>
173
173
<View style={styles.layoutAvi}>
+2
-2
src/view/com/posts/PostFeedItem.tsx
+2
-2
src/view/com/posts/PostFeedItem.tsx
···
58
58
import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
59
59
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
60
60
import {RichText} from '#/components/RichText'
61
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
61
+
import {SubtleHover} from '#/components/SubtleHover'
62
62
import * as bsky from '#/types/bsky'
63
63
64
64
interface FeedItemProps {
···
317
317
onPointerLeave={() => {
318
318
setHover(false)
319
319
}}>
320
-
<SubtleWebHover hover={hover} />
320
+
<SubtleHover hover={hover} />
321
321
<View style={{flexDirection: 'row', gap: 10, paddingLeft: 8}}>
322
322
<View style={{width: 42}}>
323
323
{isThreadChild && (
+2
-2
src/view/com/posts/ViewFullThread.tsx
+2
-2
src/view/com/posts/ViewFullThread.tsx
···
8
8
import {usePalette} from '#/lib/hooks/usePalette'
9
9
import {makeProfileLink} from '#/lib/routes/links'
10
10
import {useInteractionState} from '#/components/hooks/useInteractionState'
11
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
11
+
import {SubtleHover} from '#/components/SubtleHover'
12
12
import {Link} from '../util/Link'
13
13
import {Text} from '../util/text/Text'
14
14
···
33
33
noFeedback
34
34
onPointerEnter={onHoverIn}
35
35
onPointerLeave={onHoverOut}>
36
-
<SubtleWebHover
36
+
<SubtleHover
37
37
hover={hover}
38
38
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
39
39
style={{top: 8, bottom: -5}}
+2
-2
src/view/com/util/load-latest/LoadLatestBtn.tsx
+2
-2
src/view/com/util/load-latest/LoadLatestBtn.tsx
···
14
14
import {useInteractionState} from '#/components/hooks/useInteractionState'
15
15
import {ArrowTop_Stroke2_Corner0_Rounded as ArrowIcon} from '#/components/icons/Arrow'
16
16
import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
17
-
import {SubtleWebHover} from '#/components/SubtleWebHover'
17
+
import {SubtleHover} from '#/components/SubtleHover'
18
18
19
19
export function LoadLatestBtn({
20
20
onPress,
···
91
91
targetScale={0.9}
92
92
onPointerEnter={onHoverIn}
93
93
onPointerLeave={onHoverOut}>
94
-
<SubtleWebHover hover={hovered} style={[a.rounded_full]} />
94
+
<SubtleHover hover={hovered} style={[a.rounded_full]} />
95
95
<ArrowIcon
96
96
size="md"
97
97
style={[