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

fix feed UI alignment issues (#1106)

Browse source 
* fix feed alignment issues

* fix reason line alignment
This commit is contained in:
Eric Bailey 2023-08-04 14:13:41 -05:00 • committed by GitHub
parent c4459ec4e8
commit c42b9c1b4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 87 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,10 +32,12 @@ import {makeProfileLink} from 'lib/routes/links'
export const FeedItem = observer(function ({ export const FeedItem = observer(function ({
item, item,
isThreadChild, isThreadChild,
isThreadLastChild,
isThreadParent, isThreadParent,
}: { }: {
item: PostsFeedItemModel item: PostsFeedItemModel
isThreadChild?: boolean isThreadChild?: boolean
isThreadLastChild?: boolean
isThreadParent?: boolean isThreadParent?: boolean
showReplyLine?: boolean showReplyLine?: boolean
}) { }) {
@ -134,13 +136,17 @@ export const FeedItem = observer(function ({
) )
}, [track, item, setDeleted, store]) }, [track, item, setDeleted, store])
const isSmallTop = isThreadChild
const outerStyles = [ const outerStyles = [
styles.outer, styles.outer,
pal.view, pal.view,
{borderColor: pal.colors.border}, {
isSmallTop ? styles.outerSmallTop : undefined, borderColor: pal.colors.border,
isThreadParent ? styles.outerNoBottom : undefined, paddingBottom:
isThreadLastChild || (!isThreadChild && !isThreadParent)
? 12
: undefined,
},
isThreadChild ? styles.outerSmallTop : undefined,
] ]
if (!record || deleted) { if (!record || deleted) {
@ -154,51 +160,62 @@ export const FeedItem = observer(function ({
href={itemHref} href={itemHref}
noFeedback noFeedback
accessible={false}> accessible={false}>
{isThreadChild && (
<View
style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
/>
)}
{isThreadParent && (
<View
style={[styles.bottomReplyLine, {borderColor: pal.colors.replyLine}]}
/>
)}
{item.reasonRepost && (
<Link
style={styles.includeReason}
href={makeProfileLink(item.reasonRepost.by)}
title={sanitizeDisplayName(
item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
)}>
<FontAwesomeIcon
icon="retweet"
style={[
styles.includeReasonIcon,
{color: pal.colors.textLight} as FontAwesomeIconStyle,
]}
/>
<Text
type="sm-bold"
style={pal.textLight}
lineHeight={1.2}
numberOfLines={1}>
Reposted by{' '}
<DesktopWebTextLink
type="sm-bold"
style={pal.textLight}
lineHeight={1.2}
numberOfLines={1}
text={sanitizeDisplayName(
item.reasonRepost.by.displayName ||
sanitizeHandle(item.reasonRepost.by.handle),
)}
href={makeProfileLink(item.reasonRepost.by)}
/>
</Text>
</Link>
)}
<PostSandboxWarning /> <PostSandboxWarning />
<View style={{flexDirection: 'row', gap: 10, paddingLeft: 8}}>
<View style={{width: 52}}>
{isThreadChild && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
marginBottom: 4,
},
]}
/>
)}
</View>
<View style={{paddingTop: 12}}>
{item.reasonRepost && (
<Link
style={styles.includeReason}
href={makeProfileLink(item.reasonRepost.by)}
title={sanitizeDisplayName(
item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
)}>
<FontAwesomeIcon
icon="retweet"
style={[
styles.includeReasonIcon,
{color: pal.colors.textLight} as FontAwesomeIconStyle,
]}
/>
<Text
type="sm-bold"
style={pal.textLight}
lineHeight={1.2}
numberOfLines={1}>
Reposted by{' '}
<DesktopWebTextLink
type="sm-bold"
style={pal.textLight}
lineHeight={1.2}
numberOfLines={1}
text={sanitizeDisplayName(
item.reasonRepost.by.displayName ||
sanitizeHandle(item.reasonRepost.by.handle),
)}
href={makeProfileLink(item.reasonRepost.by)}
/>
</Text>
</Link>
)}
</View>
</View>
<View style={styles.layout}> <View style={styles.layout}>
<View style={styles.layoutAvi}> <View style={styles.layoutAvi}>
<PreviewableUserAvatar <PreviewableUserAvatar
@ -208,6 +225,18 @@ export const FeedItem = observer(function ({
avatar={item.post.author.avatar} avatar={item.post.author.avatar}
moderation={item.moderation.avatar} moderation={item.moderation.avatar}
/> />
{isThreadParent && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
marginTop: 4,
},
]}
/>
)}
</View> </View>
<View style={styles.layoutContent}> <View style={styles.layoutContent}>
<PostMeta <PostMeta
@ -308,36 +337,22 @@ export const FeedItem = observer(function ({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
outer: { outer: {
borderTopWidth: 1, borderTopWidth: 1,
padding: 10, paddingLeft: 10,
paddingRight: 15, paddingRight: 15,
paddingBottom: 8,
}, },
outerSmallTop: { outerSmallTop: {
borderTopWidth: 0, borderTopWidth: 0,
}, },
outerNoBottom: { replyLine: {
paddingBottom: 2, width: 2,
}, marginLeft: 'auto',
topReplyLine: { marginRight: 'auto',
position: 'absolute',
left: 42,
top: 0,
height: 6,
borderLeftWidth: 2,
},
bottomReplyLine: {
position: 'absolute',
left: 42,
top: 72,
bottom: 0,
borderLeftWidth: 2,
}, },
includeReason: { includeReason: {
flexDirection: 'row', flexDirection: 'row',
paddingLeft: 50,
paddingRight: 20,
marginTop: 2, marginTop: 2,
marginBottom: 2, marginBottom: 4,
marginLeft: -20,
}, },
includeReasonIcon: { includeReasonIcon: {
marginRight: 4, marginRight: 4,

3
src/view/com/posts/FeedSlice.tsx
View file

@ -57,6 +57,9 @@ export const FeedSlice = observer(
item={item} item={item}
isThreadParent={slice.isThreadParentAt(i)} isThreadParent={slice.isThreadParentAt(i)}
isThreadChild={slice.isThreadChildAt(i)} isThreadChild={slice.isThreadChildAt(i)}
isThreadLastChild={
slice.isThreadChildAt(i) && slice.items.length === i + 1
}
/> />
))} ))}
</> </>