diff options
| -rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 89 | ||||
| -rw-r--r-- | src/view/com/post/Post.tsx | 74 | ||||
| -rw-r--r-- | src/view/com/posts/FeedItem.tsx | 79 | ||||
| -rw-r--r-- | src/view/com/util/PostCtrls.tsx | 87 | ||||
| -rw-r--r-- | src/view/lib/icons.tsx | 90 |
5 files changed, 220 insertions, 199 deletions
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 9fb145f15..7add92361 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -13,6 +13,7 @@ import {UserAvatar} from '../util/UserAvatar' import {s, colors} from '../../lib/styles' import {ago, pluralize} from '../../lib/strings' import {useStores} from '../../../state' +import {PostCtrls} from '../util/PostCtrls' const PARENT_REPLY_LINE_LENGTH = 8 @@ -64,50 +65,6 @@ export const PostThreadItem = observer(function PostThreadItem({ .catch(e => console.error('Failed to toggle like', record, e)) } - const Ctrls = () => ( - <View style={styles.ctrls}> - <TouchableOpacity style={styles.ctrl} onPress={onPressReply}> - <FontAwesomeIcon - style={styles.ctrlIcon} - icon={['far', 'comment']} - size={14} - /> - <Text style={s.f13}>{item.replyCount}</Text> - </TouchableOpacity> - <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}> - <FontAwesomeIcon - style={ - item.myState.repost ? styles.ctrlIconReposted : styles.ctrlIcon - } - icon="retweet" - size={18} - /> - <Text style={item.myState.repost ? [s.bold, s.green3, s.f13] : s.f13}> - {item.repostCount} - </Text> - </TouchableOpacity> - <TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}> - <FontAwesomeIcon - style={item.myState.like ? styles.ctrlIconLiked : styles.ctrlIcon} - icon={[item.myState.like ? 'fas' : 'far', 'heart']} - size={14} - /> - <Text style={item.myState.like ? [s.bold, s.red3, s.f13] : s.f13}> - {item.likeCount} - </Text> - </TouchableOpacity> - <TouchableOpacity - style={styles.ctrl} - onPress={() => onPressShare(item.uri)}> - <FontAwesomeIcon - style={styles.ctrlIcon} - icon="share-from-square" - size={14} - /> - </TouchableOpacity> - </View> - ) - if (item._isHighlightedPost) { return ( <View style={styles.outer}> @@ -194,7 +151,16 @@ export const PostThreadItem = observer(function PostThreadItem({ <></> )} <View style={[s.pl10]}> - <Ctrls /> + <PostCtrls + replyCount={item.replyCount} + repostCount={item.repostCount} + likeCount={item.likeCount} + isReposted={!!item.myState.repost} + isLiked={!!item.myState.like} + onPressReply={onPressReply} + onPressToggleRepost={onPressToggleRepost} + onPressToggleLike={onPressToggleLike} + /> </View> </View> </View> @@ -291,7 +257,16 @@ export const PostThreadItem = observer(function PostThreadItem({ style={[styles.postText, s.f15, s['lh15-1.3']]} /> </View> - <Ctrls /> + <PostCtrls + replyCount={item.replyCount} + repostCount={item.repostCount} + likeCount={item.likeCount} + isReposted={!!item.myState.repost} + isLiked={!!item.myState.like} + onPressReply={onPressReply} + onPressToggleRepost={onPressToggleRepost} + onPressToggleLike={onPressToggleLike} + /> </View> </View> </Link> @@ -370,26 +345,4 @@ const styles = StyleSheet.create({ expandedInfoItem: { marginRight: 10, }, - ctrls: { - flexDirection: 'row', - }, - ctrl: { - flexDirection: 'row', - alignItems: 'center', - flex: 1, - paddingLeft: 4, - paddingRight: 4, - }, - ctrlIcon: { - marginRight: 5, - color: colors.gray5, - }, - ctrlIconReposted: { - marginRight: 5, - color: colors.green3, - }, - ctrlIconLiked: { - marginRight: 5, - color: colors.red3, - }, }) diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 5f19e0d67..91088e21b 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -13,6 +13,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {PostThreadViewModel} from '../../../state/models/post-thread-view' import {Link} from '../util/Link' import {UserInfoText} from '../util/UserInfoText' +import {PostCtrls} from '../util/PostCtrls' import {RichText} from '../util/RichText' import {UserAvatar} from '../util/UserAvatar' import {useStores} from '../../../state' @@ -125,47 +126,16 @@ export const Post = observer(function Post({uri}: {uri: string}) { style={[s.f15, s['lh15-1.3']]} /> </View> - <View style={styles.ctrls}> - <TouchableOpacity style={styles.ctrl} onPress={onPressReply}> - <FontAwesomeIcon - style={styles.ctrlIcon} - icon={['far', 'comment']} - /> - <Text>{item.replyCount}</Text> - </TouchableOpacity> - <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}> - <FontAwesomeIcon - style={ - item.myState.repost - ? styles.ctrlIconReposted - : styles.ctrlIcon - } - icon="retweet" - size={22} - /> - <Text - style={item.myState.repost ? [s.bold, s.green3] : undefined}> - {item.repostCount} - </Text> - </TouchableOpacity> - <TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}> - <FontAwesomeIcon - style={ - item.myState.like ? styles.ctrlIconLiked : styles.ctrlIcon - } - icon={[item.myState.like ? 'fas' : 'far', 'heart']} - /> - <Text style={item.myState.like ? [s.bold, s.red3] : undefined}> - {item.likeCount} - </Text> - </TouchableOpacity> - <View style={styles.ctrl}> - <FontAwesomeIcon - style={styles.ctrlIcon} - icon="share-from-square" - /> - </View> - </View> + <PostCtrls + replyCount={item.replyCount} + repostCount={item.repostCount} + likeCount={item.likeCount} + isReposted={!!item.myState.repost} + isLiked={!!item.myState.like} + onPressReply={onPressReply} + onPressToggleRepost={onPressToggleRepost} + onPressToggleLike={onPressToggleLike} + /> </View> </View> </Link> @@ -202,26 +172,4 @@ const styles = StyleSheet.create({ flexWrap: 'wrap', paddingBottom: 8, }, - ctrls: { - flexDirection: 'row', - }, - ctrl: { - flexDirection: 'row', - alignItems: 'center', - flex: 1, - paddingLeft: 4, - paddingRight: 4, - }, - ctrlIcon: { - marginRight: 5, - color: colors.gray5, - }, - ctrlIconReposted: { - marginRight: 5, - color: colors.green3, - }, - ctrlIconLiked: { - marginRight: 5, - color: colors.red3, - }, }) diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 5164ad12d..257690d05 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -9,6 +9,7 @@ import {SharePostModel} from '../../../state/models/shell' import {Link} from '../util/Link' import {PostDropdownBtn} from '../util/DropdownBtn' import {UserInfoText} from '../util/UserInfoText' +import {PostCtrls} from '../util/PostCtrls' import {RichText} from '../util/RichText' import {UserAvatar} from '../util/UserAvatar' import {s, colors} from '../../lib/styles' @@ -126,52 +127,16 @@ export const FeedItem = observer(function FeedItem({ style={[s.f15, s['lh15-1.3']]} /> </View> - <View style={styles.ctrls}> - <TouchableOpacity style={styles.ctrl} onPress={onPressReply}> - <FontAwesomeIcon - style={styles.ctrlIcon} - icon={['far', 'comment']} - size={14} - /> - <Text style={s.f13}>{item.replyCount}</Text> - </TouchableOpacity> - <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}> - <FontAwesomeIcon - style={ - item.myState.repost - ? styles.ctrlIconReposted - : styles.ctrlIcon - } - icon="retweet" - size={18} - /> - <Text - style={item.myState.repost ? [s.bold, s.green3, s.f13] : s.f13}> - {item.repostCount} - </Text> - </TouchableOpacity> - <TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}> - <FontAwesomeIcon - style={ - item.myState.like ? styles.ctrlIconLiked : styles.ctrlIcon - } - icon={[item.myState.like ? 'fas' : 'far', 'heart']} - size={14} - /> - <Text style={item.myState.like ? [s.bold, s.red3, s.f13] : s.f13}> - {item.likeCount} - </Text> - </TouchableOpacity> - <TouchableOpacity - style={styles.ctrl} - onPress={() => onPressShare(item.uri)}> - <FontAwesomeIcon - style={styles.ctrlIcon} - icon="share-from-square" - size={14} - /> - </TouchableOpacity> - </View> + <PostCtrls + replyCount={item.replyCount} + repostCount={item.repostCount} + likeCount={item.likeCount} + isReposted={!!item.myState.repost} + isLiked={!!item.myState.like} + onPressReply={onPressReply} + onPressToggleRepost={onPressToggleRepost} + onPressToggleLike={onPressToggleLike} + /> </View> </View> </Link> @@ -221,26 +186,4 @@ const styles = StyleSheet.create({ postText: { fontFamily: 'Helvetica Neue', }, - ctrls: { - flexDirection: 'row', - }, - ctrl: { - flexDirection: 'row', - alignItems: 'center', - flex: 1, - paddingLeft: 4, - paddingRight: 4, - }, - ctrlIcon: { - marginRight: 5, - color: colors.gray5, - }, - ctrlIconReposted: { - marginRight: 5, - color: colors.green3, - }, - ctrlIconLiked: { - marginRight: 5, - color: colors.red3, - }, }) diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx new file mode 100644 index 000000000..3dd77eb30 --- /dev/null +++ b/src/view/com/util/PostCtrls.tsx @@ -0,0 +1,87 @@ +import React from 'react' +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons' +import {s, colors} from '../../lib/styles' + +interface PostCtrlsOpts { + replyCount: number + repostCount: number + likeCount: number + isReposted: boolean + isLiked: boolean + onPressReply: () => void + onPressToggleRepost: () => void + onPressToggleLike: () => void +} + +export function PostCtrls(opts: PostCtrlsOpts) { + return ( + <View style={styles.ctrls}> + <TouchableOpacity style={styles.ctrl} onPress={opts.onPressReply}> + <FontAwesomeIcon + style={styles.ctrlIcon} + icon={['far', 'comment']} + size={14} + /> + <Text style={s.f13}>{opts.replyCount}</Text> + </TouchableOpacity> + <TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleRepost}> + <FontAwesomeIcon + style={opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon} + icon="retweet" + size={18} + /> + <Text style={opts.isReposted ? [s.bold, s.green3, s.f13] : s.f13}> + {opts.repostCount} + </Text> + </TouchableOpacity> + <TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleLike}> + {opts.isLiked ? ( + <UpIconSolid style={styles.ctrlIconUpvoted} size={18} /> + ) : ( + <UpIcon style={styles.ctrlIcon} size={18} /> + )} + <Text style={opts.isLiked ? [s.bold, s.blue3, s.f13] : s.f13}> + {opts.likeCount} + </Text> + </TouchableOpacity> + <TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleLike}> + {opts.isLiked ? ( + <DownIconSolid style={styles.ctrlIconDownvoted} size={18} /> + ) : ( + <DownIcon style={styles.ctrlIcon} size={18} /> + )} + </TouchableOpacity> + </View> + ) +} + +const styles = StyleSheet.create({ + ctrls: { + flexDirection: 'row', + }, + ctrl: { + flexDirection: 'row', + alignItems: 'center', + flex: 1, + paddingLeft: 4, + paddingRight: 4, + }, + ctrlIcon: { + marginRight: 5, + color: colors.gray5, + }, + ctrlIconReposted: { + marginRight: 5, + color: colors.green3, + }, + ctrlIconUpvoted: { + marginRight: 5, + color: colors.blue3, + }, + ctrlIconDownvoted: { + marginRight: 5, + color: colors.red3, + }, +}) diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index 1a96a3aaa..8cc40a73e 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -91,3 +91,93 @@ export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) { </Svg> ) } + +export function UpIcon({ + style, + size, +}: { + style?: StyleProp<ViewStyle> + size?: string | number +}) { + return ( + <Svg + viewBox="0 0 14 14" + width={size || 24} + height={size || 24} + style={style}> + <Path + strokeWidth={1.3} + stroke="currentColor" + d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" + /> + </Svg> + ) +} + +export function UpIconSolid({ + style, + size, +}: { + style?: StyleProp<ViewStyle> + size?: string | number +}) { + return ( + <Svg + viewBox="0 0 14 14" + width={size || 24} + height={size || 24} + style={style}> + <Path + strokeWidth={1.3} + stroke="currentColor" + fill="currentColor" + d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" + /> + </Svg> + ) +} + +export function DownIcon({ + style, + size, +}: { + style?: StyleProp<ViewStyle> + size?: string | number +}) { + return ( + <Svg + viewBox="0 0 14 14" + width={size || 24} + height={size || 24} + style={style}> + <Path + strokeWidth={1.3} + stroke="currentColor" + d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z" + /> + </Svg> + ) +} + +export function DownIconSolid({ + style, + size, +}: { + style?: StyleProp<ViewStyle> + size?: string | number +}) { + return ( + <Svg + viewBox="0 0 14 14" + width={size || 24} + height={size || 24} + style={style}> + <Path + strokeWidth={1.3} + stroke="currentColor" + fill="currentColor" + d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z" + /> + </Svg> + ) +} |