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

fix thread spacing and reply lines

zio/stable
Eric Bailey 2023-08-08 11:29:38 -05:00
parent f7a0ea3e13
commit 8cb076f5fd
2 changed files with 218 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/state/models/content/post-thread-item.ts
View File

@ -107,7 +107,7 @@ export class PostThreadItemModel {
const itemModel = new PostThreadItemModel(this.rootStore, item)
itemModel._depth = this._depth + 1
itemModel._showParentReplyLine =
itemModel.parentUri !== highlightedPostUri && replies.length === 0
itemModel.parentUri !== highlightedPostUri
if (item.replies?.length) {
itemModel._showChildReplyLine = true
itemModel.assignTreeModels(item, highlightedPostUri, false, true)

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

@ -159,6 +159,23 @@ export const PostThreadItem = observer(function PostThreadItem({
if (item._isHighlightedPost) {
return (
<>
{item.rootUri !== item.uri && (
<View style={{paddingLeft: 18, flexDirection: 'row', height: 16}}>
<View style={{width: 52}}>
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
},
]}
/>
</View>
</View>
)}
<Link
testID={`postThreadItem-by-${item.post.author.handle}`}
style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
@ -166,7 +183,7 @@ export const PostThreadItem = observer(function PostThreadItem({
accessible={false}>
<PostSandboxWarning />
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<View style={[styles.layoutAvi, {paddingBottom: 8}]}>
<PreviewableUserAvatar
size={52}
did={item.post.author.did}
@ -324,6 +341,7 @@ export const PostThreadItem = observer(function PostThreadItem({
</View>
</View>
</Link>
</>
)
} else {
return (
@ -336,26 +354,36 @@ export const PostThreadItem = observer(function PostThreadItem({
pal.border,
pal.view,
item._showParentReplyLine && styles.noTopBorder,
!item._showChildReplyLine && {borderBottomWidth: 1},
]}
moderation={item.moderation.content}>
<PostSandboxWarning />
<View
style={{flexDirection: 'row', gap: 10, paddingLeft: 8, height: 16}}>
<View style={{width: 52}}>
{item._showParentReplyLine && (
<View
style={[
styles.parentReplyLine,
{borderColor: pal.colors.replyLine},
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
marginBottom: 4,
},
]}
/>
)}
{item._showChildReplyLine && (
</View>
</View>
<View
style={[
styles.childReplyLine,
{borderColor: pal.colors.replyLine},
]}
/>
)}
<PostSandboxWarning />
<View style={styles.layout}>
styles.layout,
{
paddingBottom: item._showChildReplyLine ? 0 : 16,
},
]}>
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
size={52}
@ -364,7 +392,21 @@ export const PostThreadItem = observer(function PostThreadItem({
avatar={item.post.author.avatar}
moderation={item.moderation.avatar}
/>
{item._showChildReplyLine && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
marginTop: 4,
},
]}
/>
)}
</View>
<View style={styles.layoutContent}>
<PostMeta
author={item.post.author}
@ -430,7 +472,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<Link
style={[
styles.loadMore,
{borderTopColor: pal.colors.border},
{borderBottomColor: pal.colors.border},
pal.view,
]}
href={itemHref}
@ -480,9 +522,9 @@ const styles = StyleSheet.create({
paddingLeft: 10,
},
outerHighlighted: {
paddingTop: 2,
paddingLeft: 6,
paddingRight: 6,
paddingTop: 16,
paddingLeft: 10,
paddingRight: 10,
},
noTopBorder: {
borderTopWidth: 0,
@ -503,18 +545,13 @@ const styles = StyleSheet.create({
},
layout: {
flexDirection: 'row',
gap: 10,
paddingLeft: 8,
},
layoutAvi: {
paddingLeft: 10,
paddingTop: 10,
paddingBottom: 10,
marginRight: 10,
},
layoutAvi: {},
layoutContent: {
flex: 1,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
meta: {
flexDirection: 'row',
@ -567,10 +604,14 @@ const styles = StyleSheet.create({
loadMore: {
flexDirection: 'row',
justifyContent: 'space-between',
borderTopWidth: 1,
borderBottomWidth: 1,
paddingLeft: 80,
paddingRight: 20,
paddingVertical: 10,
marginBottom: 8,
paddingVertical: 12,
},
replyLine: {
width: 2,
marginLeft: 'auto',
marginRight: 'auto',
},
})