Clean up the post controls UI (#2614)

* Hide zeros on post ctrls

* Align buttons between posts

* Update loading placeholders

* Remove unused
zio/stable
dan 2024-01-25 01:38:23 +00:00 committed by GitHub
parent e111a31c1d
commit 63fbdede42
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 52 additions and 41 deletions

View File

@ -6,8 +6,12 @@ import {
ViewStyle,
DimensionValue,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {HeartIcon, HeartIconSolid} from 'lib/icons'
import {
HeartIcon,
HeartIconSolid,
CommentBottomArrow,
RepostIcon,
} from 'lib/icons'
import {s} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
@ -61,30 +65,30 @@ export function PostLoadingPlaceholder({
<LoadingPlaceholder width={100} height={6} style={{marginBottom: 10}} />
<LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
<LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
<LoadingPlaceholder width="80%" height={6} style={{marginBottom: 15}} />
<View style={s.flexRow}>
<View style={s.flex1}>
<FontAwesomeIcon
style={{color: theme.palette.default.icon}}
icon={['far', 'comment']}
size={14}
<LoadingPlaceholder width="80%" height={6} style={{marginBottom: 11}} />
<View style={styles.postCtrls}>
<View style={[styles.postCtrl, {paddingLeft: 0}]}>
<CommentBottomArrow
style={[{color: theme.palette.default.icon, marginTop: 1}]}
strokeWidth={3}
size={15}
/>
</View>
<View style={s.flex1}>
<FontAwesomeIcon
<View style={styles.postCtrl}>
<RepostIcon
style={{color: theme.palette.default.icon}}
icon="retweet"
size={18}
strokeWidth={3}
size={20}
/>
</View>
<View style={s.flex1}>
<View style={styles.postCtrl}>
<HeartIcon
style={{color: theme.palette.default.icon} as ViewStyle}
size={17}
strokeWidth={1.7}
size={16}
strokeWidth={3}
/>
</View>
<View style={s.flex1} />
<View style={{width: 30, height: 30}} />
</View>
</View>
</View>
@ -267,6 +271,18 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
paddingTop: 20,
paddingBottom: 5,
paddingRight: 15,
},
postCtrls: {
opacity: 0.5,
flexDirection: 'row',
justifyContent: 'space-between',
},
postCtrl: {
padding: 5,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
avatar: {
borderRadius: 26,

View File

@ -165,12 +165,13 @@ let PostCtrls = ({
strokeWidth={3}
size={big ? 20 : 15}
/>
{typeof post.replyCount !== 'undefined' ? (
{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]}>
<RepostButton
big={big}
isReposted={!!post.viewer?.repost}
@ -178,6 +179,7 @@ let PostCtrls = ({
onRepost={onRepost}
onQuote={onQuote}
/>
</View>
<TouchableOpacity
testID="likeBtn"
style={[styles.ctrl, !big && styles.ctrlPad]}
@ -199,7 +201,7 @@ let PostCtrls = ({
size={big ? 20 : 16}
/>
)}
{typeof post.likeCount !== 'undefined' ? (
{typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
<Text
testID="likeCount"
style={
@ -237,6 +239,7 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
},
ctrl: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},

View File

@ -53,7 +53,7 @@ let RepostButton = ({
onPress={() => {
requireAuth(() => onPressToggleRepostWrapper())
}}
style={[styles.control, !big && styles.controlPad]}
style={[styles.container]}
accessibilityRole="button"
accessibilityLabel={`${
isReposted
@ -71,7 +71,7 @@ let RepostButton = ({
strokeWidth={2.4}
size={big ? 24 : 20}
/>
{typeof repostCount !== 'undefined' ? (
{typeof repostCount !== 'undefined' && repostCount > 0 ? (
<Text
testID="repostCount"
style={
@ -89,13 +89,10 @@ RepostButton = memo(RepostButton)
export {RepostButton}
const styles = StyleSheet.create({
control: {
container: {
flexDirection: 'row',
alignItems: 'center',
},
controlPad: {
padding: 5,
},
reposted: {
color: colors.green3,
},

View File

@ -69,19 +69,18 @@ export const RepostButton = ({
const inner = (
<View
style={[
styles.control,
!big && styles.controlPad,
styles.container,
(isReposted
? styles.reposted
: defaultControlColor) as StyleProp<ViewStyle>,
]}>
<RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
{typeof repostCount !== 'undefined' ? (
{typeof repostCount !== 'undefined' && repostCount > 0 ? (
<Text
testID="repostCount"
type={isReposted ? 'md-bold' : 'md'}
style={styles.repostCount}>
{repostCount ?? 0}
{repostCount}
</Text>
) : undefined}
</View>
@ -110,15 +109,11 @@ export const RepostButton = ({
}
const styles = StyleSheet.create({
control: {
display: 'flex',
container: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
controlPad: {
padding: 5,
},
reposted: {
color: colors.green3,
},