zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Tune post-thread expanded view: add reply prompt, fix spacing and sizing

Browse source
This commit is contained in:
Paul Frazee 2022-11-28 09:49:41 -06:00
parent b978a2f18b
commit 490a3bb751
3 changed files with 172 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/view/com/util/PostCtrls.tsx
View file

@ -12,9 +12,10 @@ import {UpIcon, UpIconSolid} from '../../lib/icons'
import {s, colors} from '../../lib/styles'
interface PostCtrlsOpts {
replyCount: number
repostCount: number
upvoteCount: number
big?: boolean
replyCount?: number
repostCount?: number
upvoteCount?: number
isReposted: boolean
isUpvoted: boolean
onPressReply: () => void
@ -62,9 +63,11 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'comment']}
size={14}
size={opts.big ? 20 : 14}
/>
<Text style={[sRedgray, s.ml5, s.f16]}>{opts.replyCount}</Text>
{typeof opts.replyCount !== 'undefined' ? (
<Text style={[sRedgray, s.ml5, s.f16]}>{opts.replyCount}</Text>
) : undefined}
</TouchableOpacity>
</View>
<View style={s.flex1}>
@ -77,17 +80,19 @@ export function PostCtrls(opts: PostCtrlsOpts) {
opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
}
icon="retweet"
size={18}
size={opts.big ? 22 : 18}
/>
</Animated.View>
<Text
style={
opts.isReposted
? [s.bold, s.green3, s.f16, s.ml5]
: [sRedgray, s.f16, s.ml5]
}>
{opts.repostCount}
</Text>
{typeof opts.repostCount !== 'undefined' ? (
<Text
style={
opts.isReposted
? [s.bold, s.green3, s.f16, s.ml5]
: [sRedgray, s.f16, s.ml5]
}>
{opts.repostCount}
</Text>
) : undefined}
</TouchableOpacity>
</View>
<View style={s.flex1}>
@ -96,19 +101,28 @@ export function PostCtrls(opts: PostCtrlsOpts) {
onPress={onPressToggleUpvoteWrapper}>
<Animated.View style={anim2Style}>
{opts.isUpvoted ? (
<UpIconSolid style={[styles.ctrlIconUpvoted]} size={18} />
<UpIconSolid
style={[styles.ctrlIconUpvoted]}
size={opts.big ? 22 : 18}
/>
) : (
<UpIcon style={[styles.ctrlIcon]} size={18} strokeWidth={1.5} />
<UpIcon
style={[styles.ctrlIcon]}
size={opts.big ? 22 : 18}
strokeWidth={1.5}
/>
)}
</Animated.View>
<Text
style={
opts.isUpvoted
? [s.bold, s.red3, s.f16, s.ml5]
: [sRedgray, s.f16, s.ml5]
}>
{opts.upvoteCount}
</Text>
{typeof opts.upvoteCount !== 'undefined' ? (
<Text
style={
opts.isUpvoted
? [s.bold, s.red3, s.f16, s.ml5]
: [sRedgray, s.f16, s.ml5]
}>
{opts.upvoteCount}
</Text>
) : undefined}
</TouchableOpacity>
</View>
<View style={s.flex1}></View>