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

Update posts in feed to use the theming system

Browse source
This commit is contained in:
Paul Frazee 2022-12-28 19:20:02 -06:00
parent 8f55e3149e
commit 607203134e
9 changed files with 133 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/view/com/posts/FeedItem.tsx
View file

@ -16,8 +16,10 @@ import {PostEmbeds} from '../util/PostEmbeds'
import {RichText} from '../util/text/RichText'
import * as Toast from '../util/Toast'
import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {s, colors, lh} from '../../lib/styles'
import {useStores} from '../../../state'
import {useTheme} from '../../lib/ThemeContext'
import {usePalette} from '../../lib/hooks/usePalette'
export const FeedItem = observer(function ({
item,
@ -27,6 +29,8 @@ export const FeedItem = observer(function ({
showReplyLine?: boolean
}) {
const store = useStores()
const theme = useTheme()
const pal = usePalette('default')
const [deleted, setDeleted] = useState(false)
const record = item.post.record as unknown as AppBskyFeedPost.Record
const itemHref = useMemo(() => {
@ -96,6 +100,8 @@ export const FeedItem = observer(function ({
const isNoTop = isChild && !item._isThreadChild
const outerStyles = [
styles.outer,
pal.view,
{borderTopColor: pal.colors.border},
isSmallTop ? styles.outerSmallTop : undefined,
isNoTop ? styles.outerNoTop : undefined,
item._isThreadParent ? styles.outerNoBottom : undefined,
@ -106,10 +112,21 @@ export const FeedItem = observer(function ({
<FeedItem item={item.replyParent} showReplyLine />
) : undefined}
<Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
{item._isThreadChild && <View style={[styles.topReplyLine]} />}
{item._isThreadChild && (
<View
style={[
styles.topReplyLine,
{borderLeftColor: pal.colors.replyLine},
]}
/>
)}
{(showReplyLine || item._isThreadParent) && (
<View
style={[styles.bottomReplyLine, isNoTop ? {top: 64} : undefined]}
style={[
styles.bottomReplyLine,
{borderLeftColor: pal.colors.replyLine},
isNoTop ? {top: 64} : undefined,
]}
/>
)}
{item.reasonRepost && (
@ -120,7 +137,7 @@ export const FeedItem = observer(function ({
item.reasonRepost.by.displayName || item.reasonRepost.by.handle
}>
<FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} />
<Text style={[s.gray4, s.bold, s.f13]}>
<Text type="overline2" style={{color: pal.colors.actionLabel}}>
Reposted by{' '}
{item.reasonRepost.by.displayName || item.reasonRepost.by.handle}
</Text>
@ -137,7 +154,7 @@ export const FeedItem = observer(function ({
icon="arrow-trend-up"
style={styles.includeReasonIcon}
/>
<Text style={[s.gray4, s.bold, s.f13]}>
<Text type="overline2" style={{color: pal.colors.actionLabel}}>
Trending with{' '}
{item.reasonTrend.by.displayName || item.reasonTrend.by.handle}
</Text>
@ -171,13 +188,16 @@ export const FeedItem = observer(function ({
<FontAwesomeIcon
icon="reply"
size={9}
style={[s.gray4, s.mr5]}
style={[{color: pal.colors.text}, s.mr5]}
/>
<Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
<Text type="caption" style={[pal.textLight, s.mr2]}>
Reply to
</Text>
<Link href={replyHref} title="Parent post">
<UserInfoText
type="caption"
did={replyAuthorDid}
style={[s.f12, s.gray5]}
style={[pal.textLight]}
prefix="@"
/>
</Link>
@ -186,9 +206,9 @@ export const FeedItem = observer(function ({
{record.text ? (
<View style={styles.postTextContainer}>
<RichText
type="body1"
text={record.text}
entities={record.entities}
style={styles.postText}
/>
</View>
) : (
@ -210,7 +230,7 @@ export const FeedItem = observer(function ({
</Link>
{item._isThreadChildElided ? (
<Link
style={styles.viewFullThread}
style={[pal.view, styles.viewFullThread]}
href={itemHref}
title={itemTitle}
noFeedback>
@ -221,15 +241,17 @@ export const FeedItem = observer(function ({
y1="0"
x2="2"
y2="5"
stroke={colors.gray2}
stroke={pal.colors.replyLine}
strokeWidth="2"
/>
<Circle x="2" y="10" r="1.5" fill={colors.gray3} />
<Circle x="2" y="16" r="1.5" fill={colors.gray3} />
<Circle x="2" y="22" r="1.5" fill={colors.gray3} />
<Circle x="2" y="10" r="1.5" fill={pal.colors.replyLineDot} />
<Circle x="2" y="16" r="1.5" fill={pal.colors.replyLineDot} />
<Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} />
</Svg>
</View>
<Text style={styles.viewFullThreadText}>View full thread</Text>
<Text style={[pal.link, theme.typography.body2]}>
View full thread
</Text>
</Link>
) : undefined}
</>
@ -239,15 +261,11 @@ export const FeedItem = observer(function ({
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
borderTopColor: colors.gray2,
backgroundColor: colors.white,
padding: 10,
},
outerNoTop: {
borderTopWidth: 0,
paddingTop: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
outerSmallTop: {
borderTopWidth: 0,
@ -262,7 +280,6 @@ const styles = StyleSheet.create({
top: 0,
height: 6,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,
},
bottomReplyLine: {
position: 'absolute',
@ -270,7 +287,6 @@ const styles = StyleSheet.create({
top: 72,
bottom: 0,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,
},
includeReason: {
flexDirection: 'row',
@ -296,17 +312,10 @@ const styles = StyleSheet.create({
flexWrap: 'wrap',
paddingBottom: 8,
},
postText: {
fontFamily: 'System',
fontSize: 16,
lineHeight: 20.8, // 1.3 of 16px
color: colors.black,
},
postEmbeds: {
marginBottom: 10,
},
viewFullThread: {
backgroundColor: colors.white,
paddingTop: 12,
paddingBottom: 2,
paddingLeft: 70,
@ -316,8 +325,4 @@ const styles = StyleSheet.create({
left: 33,
top: 0,
},
viewFullThreadText: {
color: colors.blue3,
fontSize: 16,
},
})