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

Merge pull request #1133 from bluesky-social/eric/fix-thread-ui 

fix thread spacing and reply lines
zio/stable
Eric Bailey 2023-08-08 12:32:44 -05:00 committed by GitHub
parent f7a0ea3e13 c48ff1855c
commit 872a7f93f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 218 additions and 193 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)

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

@ -34,8 +34,6 @@ import {formatCount} from '../util/numeric/format'
import {TimeElapsed} from 'view/com/util/TimeElapsed'
import {makeProfileLink} from 'lib/routes/links'
const PARENT_REPLY_LINE_LENGTH = 8
export const PostThreadItem = observer(function PostThreadItem({
item,
onPostReply,
@ -159,6 +157,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 +181,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 +339,7 @@ export const PostThreadItem = observer(function PostThreadItem({
</View>
</View>
</Link>
</>
)
} else {
return (
@ -336,26 +352,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 +390,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 +470,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<Link
style={[
styles.loadMore,
{borderTopColor: pal.colors.border},
{borderBottomColor: pal.colors.border},
pal.view,
]}
href={itemHref}
@ -480,41 +520,22 @@ const styles = StyleSheet.create({
paddingLeft: 10,
},
outerHighlighted: {
paddingTop: 2,
paddingLeft: 6,
paddingRight: 6,
paddingTop: 16,
paddingLeft: 10,
paddingRight: 10,
},
noTopBorder: {
borderTopWidth: 0,
},
parentReplyLine: {
position: 'absolute',
left: 44,
top: -1 * PARENT_REPLY_LINE_LENGTH + 6,
height: PARENT_REPLY_LINE_LENGTH,
borderLeftWidth: 2,
},
childReplyLine: {
position: 'absolute',
left: 44,
top: 65,
bottom: 0,
borderLeftWidth: 2,
},
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 +588,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',
},
})