robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Clean up the post controls UI (#2614)
* Hide zeros on post ctrls
* Align buttons between posts
* Update loading placeholders
* Remove unused
authored by
GitHub
63fbdede
e111a31c
+52
-41
+33
-17
src/view/com/util/LoadingPlaceholder.tsx
+33
-17
src/view/com/util/LoadingPlaceholder.tsx
···
6
6
ViewStyle,
7
7
DimensionValue,
8
8
} from 'react-native'
9
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10
-
import {HeartIcon, HeartIconSolid} from 'lib/icons'
9
+
import {
10
+
HeartIcon,
11
+
HeartIconSolid,
12
+
CommentBottomArrow,
13
+
RepostIcon,
14
+
} from 'lib/icons'
11
15
import {s} from 'lib/styles'
12
16
import {useTheme} from 'lib/ThemeContext'
13
17
import {usePalette} from 'lib/hooks/usePalette'
···
61
65
<LoadingPlaceholder width={100} height={6} style={{marginBottom: 10}} />
62
66
<LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
63
67
<LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
64
-
<LoadingPlaceholder width="80%" height={6} style={{marginBottom: 15}} />
65
-
<View style={s.flexRow}>
66
-
<View style={s.flex1}>
67
-
<FontAwesomeIcon
68
-
style={{color: theme.palette.default.icon}}
69
-
icon={['far', 'comment']}
70
-
size={14}
68
+
<LoadingPlaceholder width="80%" height={6} style={{marginBottom: 11}} />
69
+
<View style={styles.postCtrls}>
70
+
<View style={[styles.postCtrl, {paddingLeft: 0}]}>
71
+
<CommentBottomArrow
72
+
style={[{color: theme.palette.default.icon, marginTop: 1}]}
73
+
strokeWidth={3}
74
+
size={15}
71
75
/>
72
76
</View>
73
-
<View style={s.flex1}>
74
-
<FontAwesomeIcon
77
+
<View style={styles.postCtrl}>
78
+
<RepostIcon
75
79
style={{color: theme.palette.default.icon}}
76
-
icon="retweet"
77
-
size={18}
80
+
strokeWidth={3}
81
+
size={20}
78
82
/>
79
83
</View>
80
-
<View style={s.flex1}>
84
+
<View style={styles.postCtrl}>
81
85
<HeartIcon
82
86
style={{color: theme.palette.default.icon} as ViewStyle}
83
-
size={17}
84
-
strokeWidth={1.7}
87
+
size={16}
88
+
strokeWidth={3}
85
89
/>
86
90
</View>
87
-
<View style={s.flex1} />
91
+
<View style={{width: 30, height: 30}} />
88
92
</View>
89
93
</View>
90
94
</View>
···
267
271
paddingHorizontal: 10,
268
272
paddingTop: 20,
269
273
paddingBottom: 5,
274
+
paddingRight: 15,
275
+
},
276
+
postCtrls: {
277
+
opacity: 0.5,
278
+
flexDirection: 'row',
279
+
justifyContent: 'space-between',
280
+
},
281
+
postCtrl: {
282
+
padding: 5,
283
+
flex: 1,
284
+
flexDirection: 'row',
285
+
alignItems: 'center',
270
286
},
271
287
avatar: {
272
288
borderRadius: 26,
+12
-9
src/view/com/util/post-ctrls/PostCtrls.tsx
+12
-9
src/view/com/util/post-ctrls/PostCtrls.tsx
···
165
165
strokeWidth={3}
166
166
size={big ? 20 : 15}
167
167
/>
168
-
{typeof post.replyCount !== 'undefined' ? (
168
+
{typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
169
169
<Text style={[defaultCtrlColor, s.ml5, s.f15]}>
170
170
{post.replyCount}
171
171
</Text>
172
172
) : undefined}
173
173
</TouchableOpacity>
174
-
<RepostButton
175
-
big={big}
176
-
isReposted={!!post.viewer?.repost}
177
-
repostCount={post.repostCount}
178
-
onRepost={onRepost}
179
-
onQuote={onQuote}
180
-
/>
174
+
<View style={[styles.ctrl, !big && styles.ctrlPad]}>
175
+
<RepostButton
176
+
big={big}
177
+
isReposted={!!post.viewer?.repost}
178
+
repostCount={post.repostCount}
179
+
onRepost={onRepost}
180
+
onQuote={onQuote}
181
+
/>
182
+
</View>
181
183
<TouchableOpacity
182
184
testID="likeBtn"
183
185
style={[styles.ctrl, !big && styles.ctrlPad]}
···
199
201
size={big ? 20 : 16}
200
202
/>
201
203
)}
202
-
{typeof post.likeCount !== 'undefined' ? (
204
+
{typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
203
205
<Text
204
206
testID="likeCount"
205
207
style={
···
237
239
justifyContent: 'space-between',
238
240
},
239
241
ctrl: {
242
+
flex: 1,
240
243
flexDirection: 'row',
241
244
alignItems: 'center',
242
245
},
+3
-6
src/view/com/util/post-ctrls/RepostButton.tsx
+3
-6
src/view/com/util/post-ctrls/RepostButton.tsx
···
53
53
onPress={() => {
54
54
requireAuth(() => onPressToggleRepostWrapper())
55
55
}}
56
-
style={[styles.control, !big && styles.controlPad]}
56
+
style={[styles.container]}
57
57
accessibilityRole="button"
58
58
accessibilityLabel={`${
59
59
isReposted
···
71
71
strokeWidth={2.4}
72
72
size={big ? 24 : 20}
73
73
/>
74
-
{typeof repostCount !== 'undefined' ? (
74
+
{typeof repostCount !== 'undefined' && repostCount > 0 ? (
75
75
<Text
76
76
testID="repostCount"
77
77
style={
···
89
89
export {RepostButton}
90
90
91
91
const styles = StyleSheet.create({
92
-
control: {
92
+
container: {
93
93
flexDirection: 'row',
94
94
alignItems: 'center',
95
-
},
96
-
controlPad: {
97
-
padding: 5,
98
95
},
99
96
reposted: {
100
97
color: colors.green3,
+4
-9
src/view/com/util/post-ctrls/RepostButton.web.tsx
+4
-9
src/view/com/util/post-ctrls/RepostButton.web.tsx
···
69
69
const inner = (
70
70
<View
71
71
style={[
72
-
styles.control,
73
-
!big && styles.controlPad,
72
+
styles.container,
74
73
(isReposted
75
74
? styles.reposted
76
75
: defaultControlColor) as StyleProp<ViewStyle>,
77
76
]}>
78
77
<RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
79
-
{typeof repostCount !== 'undefined' ? (
78
+
{typeof repostCount !== 'undefined' && repostCount > 0 ? (
80
79
<Text
81
80
testID="repostCount"
82
81
type={isReposted ? 'md-bold' : 'md'}
83
82
style={styles.repostCount}>
84
-
{repostCount ?? 0}
83
+
{repostCount}
85
84
</Text>
86
85
) : undefined}
87
86
</View>
···
110
109
}
111
110
112
111
const styles = StyleSheet.create({
113
-
control: {
114
-
display: 'flex',
112
+
container: {
115
113
flexDirection: 'row',
116
114
alignItems: 'center',
117
115
gap: 4,
118
-
},
119
-
controlPad: {
120
-
padding: 5,
121
116
},
122
117
reposted: {
123
118
color: colors.green3,