robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix post controls tap areas (#2627)
authored by
GitHub
10b1d16c
ef84f3a2
+87
-67
+70
-63
src/view/com/util/post-ctrls/PostCtrls.tsx
+70
-63
src/view/com/util/post-ctrls/PostCtrls.tsx
···
118
118
119
119
return (
120
120
<View style={[styles.ctrls, style]}>
121
-
<TouchableOpacity
122
-
testID="replyBtn"
121
+
<View
123
122
style={[
124
123
styles.ctrl,
125
-
!big && styles.ctrlPad,
126
-
{paddingLeft: 0},
127
124
post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
128
-
]}
129
-
onPress={() => {
130
-
if (!post.viewer?.replyDisabled) {
131
-
requireAuth(() => onPressReply())
132
-
}
133
-
}}
134
-
accessibilityRole="button"
135
-
accessibilityLabel={`Reply (${post.replyCount} ${
136
-
post.replyCount === 1 ? 'reply' : 'replies'
137
-
})`}
138
-
accessibilityHint=""
139
-
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
140
-
<CommentBottomArrow
141
-
style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
142
-
strokeWidth={3}
143
-
size={big ? 20 : 15}
144
-
/>
145
-
{typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
146
-
<Text style={[defaultCtrlColor, s.ml5, s.f15]}>
147
-
{post.replyCount}
148
-
</Text>
149
-
) : undefined}
150
-
</TouchableOpacity>
151
-
<View style={[styles.ctrl, !big && styles.ctrlPad]}>
125
+
]}>
126
+
<TouchableOpacity
127
+
testID="replyBtn"
128
+
style={[styles.btn, !big && styles.btnPad, {paddingLeft: 0}]}
129
+
onPress={() => {
130
+
if (!post.viewer?.replyDisabled) {
131
+
requireAuth(() => onPressReply())
132
+
}
133
+
}}
134
+
accessibilityRole="button"
135
+
accessibilityLabel={`Reply (${post.replyCount} ${
136
+
post.replyCount === 1 ? 'reply' : 'replies'
137
+
})`}
138
+
accessibilityHint=""
139
+
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
140
+
<CommentBottomArrow
141
+
style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
142
+
strokeWidth={3}
143
+
size={big ? 20 : 15}
144
+
/>
145
+
{typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
146
+
<Text style={[defaultCtrlColor, s.ml5, s.f15]}>
147
+
{post.replyCount}
148
+
</Text>
149
+
) : undefined}
150
+
</TouchableOpacity>
151
+
</View>
152
+
<View style={[styles.ctrl]}>
152
153
<RepostButton
153
154
big={big}
154
155
isReposted={!!post.viewer?.repost}
···
157
158
onQuote={onQuote}
158
159
/>
159
160
</View>
160
-
<TouchableOpacity
161
-
testID="likeBtn"
162
-
style={[styles.ctrl, !big && styles.ctrlPad]}
163
-
onPress={() => {
164
-
requireAuth(() => onPressToggleLike())
165
-
}}
166
-
accessibilityRole="button"
167
-
accessibilityLabel={`${
168
-
post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
169
-
} (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
170
-
accessibilityHint=""
171
-
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
172
-
{post.viewer?.like ? (
173
-
<HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
174
-
) : (
175
-
<HeartIcon
176
-
style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
177
-
strokeWidth={3}
178
-
size={big ? 20 : 16}
179
-
/>
180
-
)}
181
-
{typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
182
-
<Text
183
-
testID="likeCount"
184
-
style={
185
-
post.viewer?.like
186
-
? [s.bold, s.likeColor, s.f15, s.ml5]
187
-
: [defaultCtrlColor, s.f15, s.ml5]
188
-
}>
189
-
{post.likeCount}
190
-
</Text>
191
-
) : undefined}
192
-
</TouchableOpacity>
161
+
<View style={styles.ctrl}>
162
+
<TouchableOpacity
163
+
testID="likeBtn"
164
+
style={[styles.btn, !big && styles.btnPad]}
165
+
onPress={() => {
166
+
requireAuth(() => onPressToggleLike())
167
+
}}
168
+
accessibilityRole="button"
169
+
accessibilityLabel={`${
170
+
post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
171
+
} (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
172
+
accessibilityHint=""
173
+
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
174
+
{post.viewer?.like ? (
175
+
<HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
176
+
) : (
177
+
<HeartIcon
178
+
style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
179
+
strokeWidth={3}
180
+
size={big ? 20 : 16}
181
+
/>
182
+
)}
183
+
{typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
184
+
<Text
185
+
testID="likeCount"
186
+
style={
187
+
post.viewer?.like
188
+
? [s.bold, s.likeColor, s.f15, s.ml5]
189
+
: [defaultCtrlColor, s.f15, s.ml5]
190
+
}>
191
+
{post.likeCount}
192
+
</Text>
193
+
) : undefined}
194
+
</TouchableOpacity>
195
+
</View>
193
196
{big ? undefined : (
194
197
<PostDropdownBtn
195
198
testID="postDropdownBtn"
···
199
202
record={record}
200
203
richText={richText}
201
204
showAppealLabelItem={showAppealLabelItem}
202
-
style={styles.ctrlPad}
205
+
style={styles.btnPad}
203
206
/>
204
207
)}
205
208
{/* used for adding pad to the right side */}
···
214
217
ctrls: {
215
218
flexDirection: 'row',
216
219
justifyContent: 'space-between',
220
+
alignItems: 'center',
217
221
},
218
222
ctrl: {
219
223
flex: 1,
224
+
alignItems: 'flex-start',
225
+
},
226
+
btn: {
220
227
flexDirection: 'row',
221
228
alignItems: 'center',
222
229
},
223
-
ctrlPad: {
230
+
btnPad: {
224
231
paddingTop: 5,
225
232
paddingBottom: 5,
226
233
paddingLeft: 5,
+8
-2
src/view/com/util/post-ctrls/RepostButton.tsx
+8
-2
src/view/com/util/post-ctrls/RepostButton.tsx
···
53
53
onPress={() => {
54
54
requireAuth(() => onPressToggleRepostWrapper())
55
55
}}
56
-
style={[styles.container]}
56
+
style={[styles.btn, !big && styles.btnPad]}
57
57
accessibilityRole="button"
58
58
accessibilityLabel={`${
59
59
isReposted
···
89
89
export {RepostButton}
90
90
91
91
const styles = StyleSheet.create({
92
-
container: {
92
+
btn: {
93
93
flexDirection: 'row',
94
94
alignItems: 'center',
95
+
},
96
+
btnPad: {
97
+
paddingTop: 5,
98
+
paddingBottom: 5,
99
+
paddingLeft: 5,
100
+
paddingRight: 5,
95
101
},
96
102
reposted: {
97
103
color: colors.green3,
+9
-2
src/view/com/util/post-ctrls/RepostButton.web.tsx
+9
-2
src/view/com/util/post-ctrls/RepostButton.web.tsx
···
69
69
const inner = (
70
70
<View
71
71
style={[
72
-
styles.container,
72
+
styles.btn,
73
+
!big && styles.btnPad,
73
74
(isReposted
74
75
? styles.reposted
75
76
: defaultControlColor) as StyleProp<ViewStyle>,
···
109
110
}
110
111
111
112
const styles = StyleSheet.create({
112
-
container: {
113
+
btn: {
113
114
flexDirection: 'row',
114
115
alignItems: 'center',
115
116
gap: 4,
117
+
},
118
+
btnPad: {
119
+
paddingTop: 5,
120
+
paddingBottom: 5,
121
+
paddingLeft: 5,
122
+
paddingRight: 5,
116
123
},
117
124
reposted: {
118
125
color: colors.green3,