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

Sizing and spacing fixes based on on-device testing

Browse source
This commit is contained in:
Paul Frazee 2022-11-05 16:12:06 -05:00
parent 5d6ab1f548
commit ff9161d8e7
13 changed files with 120 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/view/com/post-thread/PostThread.tsx
View file

@ -1,4 +1,4 @@
import React, {useState, useEffect, useRef} from 'react'
import React, {useState, useEffect} from 'react'
import {observer} from 'mobx-react-lite'
import {ActivityIndicator, FlatList, Text, View} from 'react-native'
import {
@ -9,12 +9,9 @@ import {useStores} from '../../../state'
import {SharePostModel} from '../../../state/models/shell'
import {PostThreadItem} from './PostThreadItem'
const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
export const PostThread = observer(function PostThread({uri}: {uri: string}) {
const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>()
const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
useEffect(() => {
if (view?.params.uri === uri) {
@ -27,14 +24,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
newView.setup().catch(err => console.error('Failed to fetch thread', err))
}, [uri, view?.params.uri, store])
// TODO
// useFocusEffect(() => {
// if (Date.now() - lastUpdate > UPDATE_DELAY) {
// view?.update()
// setLastUpdate(Date.now())
// }
// })
const onPressShare = (uri: string) => {
store.shell.openModal(new SharePostModel(uri))
}
@ -83,6 +72,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
renderItem={renderItem}
refreshing={view.isRefreshing}
onRefresh={onRefresh}
style={{flex: 1}}
/>
)
})

58
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -77,14 +77,14 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</Link>
<View style={styles.layoutContent}>
<View style={[styles.meta, s.mt5]}>
<View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -104,7 +104,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
</View>
</View>
@ -125,8 +125,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={repostsHref}
title={repostsTitle}>
<Text style={[s.gray5, s.semiBold]}>
<Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
<Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black, s.f16]}>
{item.repostCount}
</Text>{' '}
{pluralize(item.repostCount, 'repost')}
</Text>
</Link>
@ -138,8 +140,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={likesHref}
title={likesTitle}>
<Text style={[s.gray5, s.semiBold]}>
<Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
<Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black, s.f16]}>
{item.likeCount}
</Text>{' '}
{pluralize(item.likeCount, 'like')}
</Text>
</Link>
@ -205,37 +209,20 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</Link>
<View style={styles.layoutContent}>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, {alignItems: 'center'}]}>
<FontAwesomeIcon
icon="reply"
size={9}
style={[s.gray4, s.mr5]}
/>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f12, s.gray5]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.meta}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -250,11 +237,24 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</PostDropdownBtn>
</View>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f14, s.blue3]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.postTextContainer}>
<RichText
text={record.text}
entities={record.entities}
style={[styles.postText, s.f15, s['lh15-1.3']]}
style={[styles.postText, s.f17, s['lh17-1.3']]}
/>
</View>
<PostCtrls