quilling.dev
An ATproto social media client -- with an independent Appview.
don't underline handle in post meta (#3591)
* alignment
remove the unnecessary styles now
seriously?
flex-end everything
flex shrink
test
test
rm unneeded flex
flex the text
don't underline handle in post meta
* use `paddingLeft`
* use `paddingLeft` but with `4`
* Fix overflow color
* Use nbsp to make mobile work
---------
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
authored by
Dan Abramov
and committed by
GitHub
086dc93a
7e16276c
+24
-15
src/view/com/util/Link.tsx
+24
-15
src/view/com/util/Link.tsx
···
2
2
import {
3
3
GestureResponderEvent,
4
4
Platform,
5
+
Pressable,
5
6
StyleProp,
7
+
TextProps,
6
8
TextStyle,
7
-
TextProps,
9
+
TouchableOpacity,
8
10
View,
9
11
ViewStyle,
10
-
Pressable,
11
-
TouchableOpacity,
12
12
} from 'react-native'
13
-
import {useLinkProps, StackActions} from '@react-navigation/native'
14
-
import {Text} from './text/Text'
15
-
import {TypographyVariant} from 'lib/ThemeContext'
16
-
import {router} from '../../../routes'
13
+
import {sanitizeUrl} from '@braintree/sanitize-url'
14
+
import {StackActions, useLinkProps} from '@react-navigation/native'
15
+
16
+
import {useModalControls} from '#/state/modals'
17
+
import {useOpenLink} from '#/state/preferences/in-app-browser'
18
+
import {
19
+
DebouncedNavigationProp,
20
+
useNavigationDeduped,
21
+
} from 'lib/hooks/useNavigationDeduped'
17
22
import {
18
23
convertBskyAppUrlIfNeeded,
19
24
isExternalUrl,
20
25
linkRequiresWarning,
21
26
} from 'lib/strings/url-helpers'
27
+
import {TypographyVariant} from 'lib/ThemeContext'
22
28
import {isAndroid, isWeb} from 'platform/detection'
23
-
import {sanitizeUrl} from '@braintree/sanitize-url'
24
-
import {PressableWithHover} from './PressableWithHover'
25
-
import {useModalControls} from '#/state/modals'
26
-
import {useOpenLink} from '#/state/preferences/in-app-browser'
27
29
import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper'
28
-
import {
29
-
DebouncedNavigationProp,
30
-
useNavigationDeduped,
31
-
} from 'lib/hooks/useNavigationDeduped'
32
30
import {useTheme} from '#/alf'
31
+
import {router} from '../../../routes'
32
+
import {PressableWithHover} from './PressableWithHover'
33
+
import {Text} from './text/Text'
33
34
34
35
type Event =
35
36
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
···
149
150
onPress,
150
151
disableMismatchWarning,
151
152
navigationAction,
153
+
anchorNoUnderline,
152
154
...orgProps
153
155
}: {
154
156
testID?: string
···
162
164
title?: string
163
165
disableMismatchWarning?: boolean
164
166
navigationAction?: 'push' | 'replace' | 'navigate'
167
+
anchorNoUnderline?: boolean
165
168
} & TextProps) {
166
169
const {...props} = useLinkProps({to: sanitizeUrl(href)})
167
170
const navigation = useNavigationDeduped()
···
172
175
console.error('Unable to detect mismatching label')
173
176
}
174
177
178
+
if (anchorNoUnderline) {
179
+
dataSet = dataSet ?? {}
180
+
dataSet.noUnderline = 1
181
+
}
182
+
175
183
props.onPress = React.useCallback(
176
184
(e?: Event) => {
177
185
const requiresWarning =
···
267
275
navigationAction?: 'push' | 'replace' | 'navigate'
268
276
disableMismatchWarning?: boolean
269
277
onPointerEnter?: () => void
278
+
anchorNoUnderline?: boolean
270
279
}
271
280
export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({
272
281
testID,
+19
-16
src/view/com/util/PostMeta.tsx
+19
-16
src/view/com/util/PostMeta.tsx
···
35
35
const handle = opts.author.handle
36
36
const prefetchProfileQuery = usePrefetchProfileQuery()
37
37
38
+
const profileLink = makeProfileLink(opts.author)
39
+
const onPointerEnter = isWeb
40
+
? () => prefetchProfileQuery(opts.author.did)
41
+
: undefined
42
+
38
43
return (
39
44
<View style={[styles.container, opts.style]}>
40
45
{opts.showAvatar && (
···
49
54
/>
50
55
</View>
51
56
)}
52
-
<View style={styles.maxWidth}>
57
+
<Text numberOfLines={1} style={[styles.maxWidth, pal.textLight]}>
53
58
<TextLinkOnWebOnly
54
59
type={opts.displayNameType || 'lg-bold'}
55
60
style={[pal.text, opts.displayNameStyle]}
56
-
numberOfLines={1}
57
61
lineHeight={1.2}
58
62
disableMismatchWarning
59
63
text={
···
62
66
displayName,
63
67
opts.moderation?.ui('displayName'),
64
68
)}
65
-
66
-
<Text
67
-
type="md"
68
-
numberOfLines={1}
69
-
lineHeight={1.2}
70
-
style={pal.textLight}>
71
-
{sanitizeHandle(handle, '@')}
72
-
</Text>
73
69
</>
74
70
}
75
-
href={makeProfileLink(opts.author)}
76
-
onPointerEnter={
77
-
isWeb ? () => prefetchProfileQuery(opts.author.did) : undefined
78
-
}
71
+
href={profileLink}
72
+
onPointerEnter={onPointerEnter}
73
+
/>
74
+
<TextLinkOnWebOnly
75
+
type="md"
76
+
disableMismatchWarning
77
+
style={[pal.textLight, {flexShrink: 4}]}
78
+
text={'\xa0' + sanitizeHandle(handle, '@')}
79
+
href={profileLink}
80
+
onPointerEnter={onPointerEnter}
81
+
anchorNoUnderline
79
82
/>
80
-
</View>
83
+
</Text>
81
84
{!isAndroid && (
82
85
<Text
83
86
type="md"
···
110
113
const styles = StyleSheet.create({
111
114
container: {
112
115
flexDirection: 'row',
113
-
alignItems: 'center',
116
+
alignItems: 'flex-end',
114
117
paddingBottom: 2,
115
118
gap: 4,
116
119
zIndex: 1,