diff options
| -rw-r--r-- | src/view/com/util/post-ctrls/PostCtrls.tsx | 133 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.tsx | 10 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.web.tsx | 11 |
3 files changed, 87 insertions, 67 deletions
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 65582ba88..a6d7e38c3 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -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, diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index 8e70534dc..cc3db50c8 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -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, }, diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx index a888178a3..bbe5869fe 100644 --- a/src/view/com/util/post-ctrls/RepostButton.web.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx @@ -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, }, |