robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
fix: general profile component layout fixes, and ability to disable the inset border for UserAvatar (#8711)
authored by
Elijah Seed-Arita
and committed by
GitHub
dff0332d
f0b869ae
+10
-6
src/components/KnownFollowers.tsx
+10
-6
src/components/KnownFollowers.tsx
···
1
1
import React from 'react'
2
2
import {View} from 'react-native'
3
-
import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
3
+
import {
4
+
type AppBskyActorDefs,
5
+
moderateProfile,
6
+
type ModerationOpts,
7
+
} from '@atproto/api'
4
8
import {msg, Plural, Trans} from '@lingui/macro'
5
9
import {useLingui} from '@lingui/react'
6
10
···
8
12
import {sanitizeDisplayName} from '#/lib/strings/display-names'
9
13
import {UserAvatar} from '#/view/com/util/UserAvatar'
10
14
import {atoms as a, useTheme} from '#/alf'
11
-
import {Link, LinkProps} from '#/components/Link'
15
+
import {Link, type LinkProps} from '#/components/Link'
12
16
import {Text} from '#/components/Typography'
13
-
import * as bsky from '#/types/bsky'
17
+
import type * as bsky from '#/types/bsky'
14
18
15
19
const AVI_SIZE = 30
16
20
const AVI_SIZE_SMALL = 20
···
137
141
<>
138
142
<View
139
143
style={[
144
+
a.flex_row,
140
145
{
141
146
height: SIZE,
142
-
width: SIZE + (slice.length - 1) * a.gap_md.gap,
143
147
},
144
148
pressed && {
145
149
opacity: 0.5,
···
149
153
<View
150
154
key={prof.did}
151
155
style={[
152
-
a.absolute,
153
156
a.rounded_full,
154
157
{
155
158
borderWidth: AVI_BORDER,
156
159
borderColor: t.atoms.bg.backgroundColor,
157
160
width: SIZE + AVI_BORDER * 2,
158
161
height: SIZE + AVI_BORDER * 2,
159
-
left: i * a.gap_md.gap,
160
162
zIndex: AVI_BORDER - i,
163
+
marginLeft: i > 0 ? -8 : 0,
161
164
},
162
165
]}>
163
166
<UserAvatar
···
165
168
avatar={prof.avatar}
166
169
moderation={moderation.ui('avatar')}
167
170
type={prof.associated?.labeler ? 'labeler' : 'user'}
171
+
noBorder
168
172
/>
169
173
</View>
170
174
))}
+1
-1
src/screens/Profile/Header/Handle.tsx
+1
-1
src/screens/Profile/Header/Handle.tsx
···
23
23
const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
24
24
return (
25
25
<View
26
-
style={[a.flex_row, a.gap_xs, a.align_center, {maxWidth: '100%'}]}
26
+
style={[a.flex_row, a.gap_sm, a.align_center, {maxWidth: '100%'}]}
27
27
pointerEvents={disableTaps ? 'none' : isIOS ? 'auto' : 'box-none'}>
28
28
<NewskieDialog profile={profile} disabled={disableTaps} />
29
29
{profile.viewer?.followedBy && !blockHide ? (
+1
-1
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+1
-1
src/screens/Profile/Header/ProfileHeaderStandard.tsx
···
251
251
<ProfileMenu profile={profile} />
252
252
</View>
253
253
<View
254
-
style={[a.flex_col, a.gap_2xs, a.pb_sm, live ? a.pt_sm : a.pt_2xs]}>
254
+
style={[a.flex_col, a.gap_sm, a.pb_sm, live ? a.pt_sm : a.pt_2xs]}>
255
255
<View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}>
256
256
<Text
257
257
emoji
+4
-3
src/screens/Profile/Header/Shell.tsx
+4
-3
src/screens/Profile/Header/Shell.tsx
···
229
229
size={live.isActive ? 88 : 90}
230
230
avatar={profile.avatar}
231
231
moderation={moderation.ui('avatar')}
232
+
noBorder
232
233
/>
233
234
{live.isActive && <LiveIndicator size="large" />}
234
235
</Animated.View>
···
260
261
const styles = StyleSheet.create({
261
262
backBtnWrapper: {
262
263
position: 'absolute',
263
-
left: 10,
264
+
left: 12,
264
265
width: 30,
265
266
height: 30,
266
267
overflow: 'hidden',
···
279
280
},
280
281
aviPosition: {
281
282
position: 'absolute',
282
-
top: 110,
283
-
left: 10,
283
+
top: 104,
284
+
left: 16,
284
285
},
285
286
avi: {
286
287
width: 94,
+4
-2
src/view/com/util/UserAvatar.tsx
+4
-2
src/view/com/util/UserAvatar.tsx
···
70
70
type: UserAvatarType
71
71
moderation?: ModerationUI
72
72
usePlainRNImage?: boolean
73
+
noBorder?: boolean
73
74
onLoad?: () => void
74
75
style?: StyleProp<ViewStyle>
75
76
}
···
219
220
style,
220
221
live,
221
222
hideLiveBadge,
223
+
noBorder,
222
224
}: UserAvatarProps): React.ReactNode => {
223
225
const t = useTheme()
224
226
const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
···
309
311
onLoad={onLoad}
310
312
/>
311
313
)}
312
-
<MediaInsetBorder style={borderStyle} />
314
+
{!noBorder && <MediaInsetBorder style={borderStyle} />}
313
315
{live && size > 16 && !hideLiveBadge && (
314
316
<LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
315
317
)}
···
318
320
) : (
319
321
<View style={containerStyle}>
320
322
<DefaultAvatar type={type} shape={finalShape} size={size} />
321
-
<MediaInsetBorder style={borderStyle} />
323
+
{!noBorder && <MediaInsetBorder style={borderStyle} />}
322
324
{live && size > 16 && !hideLiveBadge && (
323
325
<LiveIndicator size={size > 32 ? 'small' : 'tiny'} />
324
326
)}