forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
add subtle web hover to "View full thread" (#6256)
authored by
Samuel Newman
and committed by
GitHub
df3f7128
b60629af
+29
-7
+3
-1
src/components/SubtleWebHover.tsx
+3
-1
src/components/SubtleWebHover.tsx
+7
-5
src/components/SubtleWebHover.web.tsx
+7
-5
src/components/SubtleWebHover.web.tsx
···
2
2
import {StyleSheet, View} from 'react-native'
3
3
4
4
import {isTouchDevice} from '#/lib/browser'
5
-
import {useTheme} from '#/alf'
5
+
import {useTheme, ViewStyleProp} from '#/alf'
6
6
7
-
export function SubtleWebHover({hover}: {hover: boolean}) {
7
+
export function SubtleWebHover({
8
+
style,
9
+
hover,
10
+
}: ViewStyleProp & {hover: boolean}) {
8
11
const t = useTheme()
9
12
if (isTouchDevice) {
10
13
return null
···
26
29
style={[
27
30
t.atoms.bg_contrast_25,
28
31
styles.container,
29
-
{
30
-
opacity: hover ? opacity : 0,
31
-
},
32
+
{opacity: hover ? opacity : 0},
33
+
style,
32
34
]}
33
35
/>
34
36
)
+19
-1
src/view/com/posts/FeedSlice.tsx
+19
-1
src/view/com/posts/FeedSlice.tsx
···
7
7
import {usePalette} from '#/lib/hooks/usePalette'
8
8
import {makeProfileLink} from '#/lib/routes/links'
9
9
import {FeedPostSlice} from '#/state/queries/post-feed'
10
+
import {useInteractionState} from '#/components/hooks/useInteractionState'
11
+
import {SubtleWebHover} from '#/components/SubtleWebHover'
10
12
import {Link} from '../util/Link'
11
13
import {Text} from '../util/text/Text'
12
14
import {FeedItem} from './FeedItem'
···
108
110
export {FeedSlice}
109
111
110
112
function ViewFullThread({uri}: {uri: string}) {
113
+
const {
114
+
state: hover,
115
+
onIn: onHoverIn,
116
+
onOut: onHoverOut,
117
+
} = useInteractionState()
111
118
const pal = usePalette('default')
112
119
const itemHref = React.useMemo(() => {
113
120
const urip = new AtUri(uri)
···
115
122
}, [uri])
116
123
117
124
return (
118
-
<Link style={[styles.viewFullThread]} href={itemHref} asAnchor noFeedback>
125
+
<Link
126
+
style={[styles.viewFullThread]}
127
+
href={itemHref}
128
+
asAnchor
129
+
noFeedback
130
+
onPointerEnter={onHoverIn}
131
+
onPointerLeave={onHoverOut}>
132
+
<SubtleWebHover
133
+
hover={hover}
134
+
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
135
+
style={{top: 8, bottom: -5}}
136
+
/>
119
137
<View style={styles.viewFullThreadDots}>
120
138
<Svg width="4" height="40">
121
139
<Line