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

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

zio/stable
Paul Frazee 2022-11-28 09:49:41 -06:00
parent b978a2f18b
commit 490a3bb751
3 changed files with 172 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/view/com/composer/Prompt.tsx
View File

@ -1,29 +1,42 @@
import React from 'react' import React from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {colors} from '../../lib/styles' import {colors} from '../../lib/styles'
import {useStores} from '../../../state' import {useStores} from '../../../state'
import {UserAvatar} from '../util/UserAvatar' import {UserAvatar} from '../util/UserAvatar'
export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) { export function ComposePrompt({
noAvi = false,
text = "What's up?",
btn = 'Post',
onPressCompose,
}: {
noAvi?: boolean
text?: string
btn?: string
onPressCompose: () => void
}) {
const store = useStores() const store = useStores()
const onPressAvatar = () => { const onPressAvatar = () => {
store.nav.navigate(`/profile/${store.me.handle}`) store.nav.navigate(`/profile/${store.me.handle}`)
} }
return ( return (
<TouchableOpacity style={styles.container} onPress={onPressCompose}> <TouchableOpacity
<TouchableOpacity style={styles.avatar} onPress={onPressAvatar}> style={[styles.container, noAvi ? styles.noAviContainer : undefined]}
<UserAvatar onPress={onPressCompose}>
size={50} {!noAvi ? (
handle={store.me.handle || ''} <TouchableOpacity style={styles.avatar} onPress={onPressAvatar}>
displayName={store.me.displayName} <UserAvatar
/> size={50}
</TouchableOpacity> handle={store.me.handle || ''}
displayName={store.me.displayName}
/>
</TouchableOpacity>
) : undefined}
<View style={styles.textContainer}> <View style={styles.textContainer}>
<Text style={styles.text}>What's up?</Text> <Text style={styles.text}>{text}</Text>
</View> </View>
<View style={styles.btn}> <View style={styles.btn}>
<Text style={styles.btnText}>Post</Text> <Text style={styles.btnText}>{btn}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
) )
@ -40,6 +53,9 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: colors.white, backgroundColor: colors.white,
}, },
noAviContainer: {
paddingVertical: 14,
},
avatar: { avatar: {
width: 50, width: 50,
}, },

205
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -16,6 +16,7 @@ import {useStores} from '../../../state'
import {PostMeta} from '../util/PostMeta' import {PostMeta} from '../util/PostMeta'
import {PostEmbeds} from '../util/PostEmbeds' import {PostEmbeds} from '../util/PostEmbeds'
import {PostCtrls} from '../util/PostCtrls' import {PostCtrls} from '../util/PostCtrls'
import {ComposePrompt} from '../composer/Prompt'
const PARENT_REPLY_LINE_LENGTH = 8 const PARENT_REPLY_LINE_LENGTH = 8
const REPLYING_TO_LINE_LENGTH = 6 const REPLYING_TO_LINE_LENGTH = 6
@ -93,116 +94,122 @@ export const PostThreadItem = observer(function PostThreadItem({
if (item._isHighlightedPost) { if (item._isHighlightedPost) {
return ( return (
<View style={styles.outer}> <>
<View style={styles.layout}> <View style={styles.outer}>
<View style={styles.layoutAvi}> <View style={styles.layout}>
<Link href={authorHref} title={authorTitle}> <View style={styles.layoutAvi}>
<UserAvatar <Link href={authorHref} title={authorTitle}>
size={50} <UserAvatar
displayName={item.author.displayName} size={50}
handle={item.author.handle} displayName={item.author.displayName}
/> handle={item.author.handle}
</Link>
</View>
<View style={styles.layoutContent}>
<View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f16, s.bold]} numberOfLines={1}>
{item.author.displayName || item.author.handle}
</Text>
</Link>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
<PostDropdownBtn
style={styles.metaItem}
itemHref={itemHref}
itemTitle={itemTitle}
isAuthor={item.author.did === store.me.did}
onDeletePost={onDeletePost}>
<FontAwesomeIcon
icon="ellipsis-h"
size={14}
style={[s.mt2, s.mr5]}
/> />
</PostDropdownBtn>
</View>
<View style={styles.meta}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.gray5]} numberOfLines={1}>
@{item.author.handle}
</Text>
</Link> </Link>
</View> </View>
</View> <View style={styles.layoutContent}>
</View> <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
<View style={[s.pl10, s.pr10, s.pb10]}>
<View
style={[styles.postTextContainer, styles.postTextLargeContainer]}>
<RichText
text={record.text}
entities={record.entities}
style={[styles.postText, styles.postTextLarge]}
/>
</View>
<PostEmbeds entities={record.entities} />
{item._isHighlightedPost && hasEngagement ? (
<View style={styles.expandedInfo}>
{item.repostCount ? (
<Link <Link
style={styles.expandedInfoItem} style={styles.metaItem}
href={repostsHref} href={authorHref}
title={repostsTitle}> title={authorTitle}>
<Text style={[s.gray5, s.semiBold, s.f18]}> <Text style={[s.f16, s.bold]} numberOfLines={1}>
<Text style={[s.bold, s.black, s.f18]}> {item.author.displayName || item.author.handle}
{item.repostCount}
</Text>{' '}
{pluralize(item.repostCount, 'repost')}
</Text> </Text>
</Link> </Link>
) : ( <Text style={[styles.metaItem, s.f15, s.gray5]}>
<></> &middot; {ago(item.indexedAt)}
)} </Text>
{item.upvoteCount ? ( <View style={s.flex1} />
<PostDropdownBtn
style={styles.metaItem}
itemHref={itemHref}
itemTitle={itemTitle}
isAuthor={item.author.did === store.me.did}
onDeletePost={onDeletePost}>
<FontAwesomeIcon
icon="ellipsis-h"
size={14}
style={[s.mt2, s.mr5]}
/>
</PostDropdownBtn>
</View>
<View style={styles.meta}>
<Link <Link
style={styles.expandedInfoItem} style={styles.metaItem}
href={upvotesHref} href={authorHref}
title={upvotesTitle}> title={authorTitle}>
<Text style={[s.gray5, s.semiBold, s.f18]}> <Text style={[s.f15, s.gray5]} numberOfLines={1}>
<Text style={[s.bold, s.black, s.f18]}> @{item.author.handle}
{item.upvoteCount}
</Text>{' '}
{pluralize(item.upvoteCount, 'upvote')}
</Text> </Text>
</Link> </Link>
) : ( </View>
<></> </View>
)} </View>
<View style={[s.pl10, s.pr10, s.pb10]}>
<View
style={[styles.postTextContainer, styles.postTextLargeContainer]}>
<RichText
text={record.text}
entities={record.entities}
style={[styles.postText, styles.postTextLarge]}
/>
</View>
<PostEmbeds entities={record.entities} style={s.mb10} />
{item._isHighlightedPost && hasEngagement ? (
<View style={styles.expandedInfo}>
{item.repostCount ? (
<Link
style={styles.expandedInfoItem}
href={repostsHref}
title={repostsTitle}>
<Text style={[s.gray5, s.semiBold, s.f17]}>
<Text style={[s.bold, s.black, s.f17]}>
{item.repostCount}
</Text>{' '}
{pluralize(item.repostCount, 'repost')}
</Text>
</Link>
) : (
<></>
)}
{item.upvoteCount ? (
<Link
style={styles.expandedInfoItem}
href={upvotesHref}
title={upvotesTitle}>
<Text style={[s.gray5, s.semiBold, s.f17]}>
<Text style={[s.bold, s.black, s.f17]}>
{item.upvoteCount}
</Text>{' '}
{pluralize(item.upvoteCount, 'upvote')}
</Text>
</Link>
) : (
<></>
)}
</View>
) : (
<></>
)}
<View style={[s.pl10, s.pb5]}>
<PostCtrls
big
isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote}
onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote}
/>
</View> </View>
) : (
<></>
)}
<View style={[s.pl10]}>
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}
upvoteCount={item.upvoteCount}
isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote}
onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote}
/>
</View> </View>
</View> </View>
</View> <ComposePrompt
noAvi
text="Write your reply"
btn="Reply"
onPressCompose={onPressReply}
/>
</>
) )
} else { } else {
return ( return (
@ -371,7 +378,7 @@ const styles = StyleSheet.create({
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
marginTop: 5, marginTop: 5,
marginBottom: 10, marginBottom: 15,
}, },
expandedInfoItem: { expandedInfoItem: {
marginRight: 10, marginRight: 10,

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