Bluesky app fork with some witchin' additions 💫

Fix post controls tap areas (#2627)

authored by danabra.mov and committed by

GitHub 10b1d16c ef84f3a2

+87 -67
+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
··· 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
··· 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,