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

Update post thread aesthetics

zio/stable
Paul Frazee 2022-08-31 21:02:12 -05:00
parent 6bec139679
commit 71594d069c
3 changed files with 118 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/com/feed/FeedItem.tsx
View File

@ -133,8 +133,6 @@ export const FeedItem = observer(function FeedItem({
const styles = StyleSheet.create({
outer: {
// borderWidth: 1,
// borderColor: '#e8e8e8',
borderRadius: 10,
margin: 2,
marginBottom: 0,

2
src/view/com/post-thread/PostThread.tsx
View File

@ -75,7 +75,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
<PostThreadItem item={item} onPressShare={onPressShare} />
)
return (
<View style={s.h100pct}>
<View>
<FlatList
data={posts}
keyExtractor={item => item._reactKey}

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

@ -9,14 +9,6 @@ import {ago, pluralize} from '../../lib/strings'
import {AVIS} from '../../lib/assets'
import {useStores} from '../../../state'
function iter<T>(n: number, fn: (_i: number) => T): Array<T> {
const arr: T[] = []
for (let i = 0; i < n; i++) {
arr.push(fn(i))
}
return arr
}
export const PostThreadItem = observer(function PostThreadItem({
item,
onPressShare,
@ -61,41 +53,83 @@ export const PostThreadItem = observer(function PostThreadItem({
.catch(e => console.error('Failed to toggle like', record, e))
}
return (
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
<View style={styles.layout}>
{iter(Math.abs(item._depth), (i: number) => (
<View key={i} style={styles.replyBar} />
))}
<TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
<Image
style={styles.avi}
source={AVIS[item.author.name] || AVIS['alice.com']}
/>
</TouchableOpacity>
<View style={styles.layoutContent}>
<View style={styles.meta}>
<Text
style={[styles.metaItem, s.f15, s.bold]}
onPress={onPressAuthor}>
{item.author.displayName}
</Text>
<Text
style={[styles.metaItem, s.f14, s.gray5]}
onPress={onPressAuthor}>
@{item.author.name}
</Text>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
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.hasReposted ? styles.ctrlIconReposted : styles.ctrlIcon
}
icon="retweet"
size={18}
/>
<Text
style={item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13}>
{item.repostCount}
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}>
<FontAwesomeIcon
style={item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon}
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
size={14}
/>
<Text style={item.myState.hasLiked ? [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}>
<View style={styles.layout}>
<TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
<Image
style={styles.avi}
source={AVIS[item.author.name] || AVIS['alice.com']}
/>
</TouchableOpacity>
<View style={styles.layoutContent}>
<View style={[styles.meta, s.mt5]}>
<Text
style={[styles.metaItem, s.f15, s.bold]}
onPress={onPressAuthor}>
{item.author.displayName}
</Text>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
</View>
<View style={styles.meta}>
<Text
style={[styles.metaItem, s.f14, s.gray5]}
onPress={onPressAuthor}>
@{item.author.name}
</Text>
</View>
</View>
<Text
style={[
styles.postText,
...(item._isHighlightedPost
? [s.f16, s['lh16-1.3']]
: [s.f15, s['lh15-1.3']]),
]}>
</View>
<View style={[s.pl10, s.pr10, s.pb10]}>
<Text style={[styles.postText, s.f18, s['lh18-1.3']]}>
{record.text}
</Text>
{item._isHighlightedPost && hasEngagement ? (
@ -124,74 +158,59 @@ export const PostThreadItem = observer(function PostThreadItem({
) : (
<></>
)}
<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.hasReposted
? styles.ctrlIconReposted
: styles.ctrlIcon
}
icon="retweet"
size={18}
/>
<Text
style={
item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13
}>
{item.repostCount}
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}>
<FontAwesomeIcon
style={
item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
}
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
size={14}
/>
<Text
style={item.myState.hasLiked ? [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 style={[s.pl10]}>
<Ctrls />
</View>
</View>
</View>
</TouchableOpacity>
)
)
} else {
return (
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
<View style={styles.layout}>
<TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
<Image
style={styles.avi}
source={AVIS[item.author.name] || AVIS['alice.com']}
/>
</TouchableOpacity>
<View style={styles.layoutContent}>
<View style={styles.meta}>
<Text
style={[styles.metaItem, s.f15, s.bold]}
onPress={onPressAuthor}>
{item.author.displayName}
</Text>
<Text
style={[styles.metaItem, s.f14, s.gray5]}
onPress={onPressAuthor}>
@{item.author.name}
</Text>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
</View>
<Text style={[styles.postText, s.f15, s['lh15-1.3']]}>
{record.text}
</Text>
<Ctrls />
</View>
</View>
</TouchableOpacity>
)
}
})
const styles = StyleSheet.create({
outer: {
marginTop: 1,
backgroundColor: colors.white,
borderRadius: 10,
margin: 2,
marginBottom: 0,
},
layout: {
flexDirection: 'row',
},
replyBar: {
width: 5,
backgroundColor: colors.gray2,
marginRight: 2,
},
layoutAvi: {
width: 70,
paddingLeft: 10,