Fix post controls tap areas (#2627)

zio/stable
dan 2024-01-25 22:06:28 +00:00 committed by GitHub
parent ef84f3a25e
commit 10b1d16c8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 87 additions and 67 deletions

View File

@ -118,37 +118,38 @@ let PostCtrls = ({
return (
<View style={[styles.ctrls, style]}>
<TouchableOpacity
testID="replyBtn"
<View
style={[
styles.ctrl,
!big && styles.ctrlPad,
{paddingLeft: 0},
post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
]}
onPress={() => {
if (!post.viewer?.replyDisabled) {
requireAuth(() => onPressReply())
}
}}
accessibilityRole="button"
accessibilityLabel={`Reply (${post.replyCount} ${
post.replyCount === 1 ? 'reply' : 'replies'
})`}
accessibilityHint=""
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
<CommentBottomArrow
style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
strokeWidth={3}
size={big ? 20 : 15}
/>
{typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
<Text style={[defaultCtrlColor, s.ml5, s.f15]}>
{post.replyCount}
</Text>
) : undefined}
</TouchableOpacity>
<View style={[styles.ctrl, !big && styles.ctrlPad]}>
]}>
<TouchableOpacity
testID="replyBtn"
style={[styles.btn, !big && styles.btnPad, {paddingLeft: 0}]}
onPress={() => {
if (!post.viewer?.replyDisabled) {
requireAuth(() => onPressReply())
}
}}
accessibilityRole="button"
accessibilityLabel={`Reply (${post.replyCount} ${
post.replyCount === 1 ? 'reply' : 'replies'
})`}
accessibilityHint=""
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
<CommentBottomArrow
style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
strokeWidth={3}
size={big ? 20 : 15}
/>
{typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
<Text style={[defaultCtrlColor, s.ml5, s.f15]}>
{post.replyCount}
</Text>
) : undefined}
</TouchableOpacity>
</View>
<View style={[styles.ctrl]}>
<RepostButton
big={big}
isReposted={!!post.viewer?.repost}
@ -157,39 +158,41 @@ let PostCtrls = ({
onQuote={onQuote}
/>
</View>
<TouchableOpacity
testID="likeBtn"
style={[styles.ctrl, !big && styles.ctrlPad]}
onPress={() => {
requireAuth(() => onPressToggleLike())
}}
accessibilityRole="button"
accessibilityLabel={`${
post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
} (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
accessibilityHint=""
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
{post.viewer?.like ? (
<HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
) : (
<HeartIcon
style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
strokeWidth={3}
size={big ? 20 : 16}
/>
)}
{typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
<Text
testID="likeCount"
style={
post.viewer?.like
? [s.bold, s.likeColor, s.f15, s.ml5]
: [defaultCtrlColor, s.f15, s.ml5]
}>
{post.likeCount}
</Text>
) : undefined}
</TouchableOpacity>
<View style={styles.ctrl}>
<TouchableOpacity
testID="likeBtn"
style={[styles.btn, !big && styles.btnPad]}
onPress={() => {
requireAuth(() => onPressToggleLike())
}}
accessibilityRole="button"
accessibilityLabel={`${
post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
} (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
accessibilityHint=""
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
{post.viewer?.like ? (
<HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
) : (
<HeartIcon
style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
strokeWidth={3}
size={big ? 20 : 16}
/>
)}
{typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
<Text
testID="likeCount"
style={
post.viewer?.like
? [s.bold, s.likeColor, s.f15, s.ml5]
: [defaultCtrlColor, s.f15, s.ml5]
}>
{post.likeCount}
</Text>
) : undefined}
</TouchableOpacity>
</View>
{big ? undefined : (
<PostDropdownBtn
testID="postDropdownBtn"
@ -199,7 +202,7 @@ let PostCtrls = ({
record={record}
richText={richText}
showAppealLabelItem={showAppealLabelItem}
style={styles.ctrlPad}
style={styles.btnPad}
/>
)}
{/* used for adding pad to the right side */}
@ -214,13 +217,17 @@ const styles = StyleSheet.create({
ctrls: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
ctrl: {
flex: 1,
alignItems: 'flex-start',
},
btn: {
flexDirection: 'row',
alignItems: 'center',
},
ctrlPad: {
btnPad: {
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,

View File

@ -53,7 +53,7 @@ let RepostButton = ({
onPress={() => {
requireAuth(() => onPressToggleRepostWrapper())
}}
style={[styles.container]}
style={[styles.btn, !big && styles.btnPad]}
accessibilityRole="button"
accessibilityLabel={`${
isReposted
@ -89,10 +89,16 @@ RepostButton = memo(RepostButton)
export {RepostButton}
const styles = StyleSheet.create({
container: {
btn: {
flexDirection: 'row',
alignItems: 'center',
},
btnPad: {
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5,
},
reposted: {
color: colors.green3,
},

View File

@ -69,7 +69,8 @@ export const RepostButton = ({
const inner = (
<View
style={[
styles.container,
styles.btn,
!big && styles.btnPad,
(isReposted
? styles.reposted
: defaultControlColor) as StyleProp<ViewStyle>,
@ -109,11 +110,17 @@ export const RepostButton = ({
}
const styles = StyleSheet.create({
container: {
btn: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
btnPad: {
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5,
},
reposted: {
color: colors.green3,
},