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

Treeview: more UI tweaks (#2125)

Browse source 
* Treeview: more UI tweaks

* Only show treeview when there are branching replies

* Fix types
This commit is contained in:
Paul Frazee 2023-12-06 22:17:38 -08:00 • committed by GitHub
parent 818c6ae879
commit 00e1e56a7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -436,13 +436,12 @@ let PostThreadItemLoaded = ({
} else {
const isThreadedChild = treeView && depth > 0
const isThreadedChildAdjacentTop =
isThreadedChild && prevPost?.ctx.depth === depth
isThreadedChild && prevPost?.ctx.depth === depth && depth !== 1
const isThreadedChildAdjacentBot =
isThreadedChild && nextPost?.ctx.depth === depth
return (
<PostOuterWrapper
post={post}
prevPost={prevPost}
depth={depth}
showParentReplyLine={!!showParentReplyLine}
treeView={treeView}
@ -525,7 +524,7 @@ let PostThreadItemLoaded = ({
timestamp={post.indexedAt}
postHref={postHref}
showAvatar={isThreadedChild}
avatarSize={20}
avatarSize={28}
displayNameType="md-bold"
displayNameStyle={isThreadedChild && s.ml2}
style={isThreadedChild && s.mb2}
@ -606,7 +605,6 @@ PostThreadItemLoaded = memo(PostThreadItemLoaded)
function PostOuterWrapper({
post,
prevPost,
treeView,
depth,
showParentReplyLine,
@ -614,7 +612,6 @@ function PostOuterWrapper({
children,
}: React.PropsWithChildren<{
post: AppBskyFeedDefs.PostView
prevPost: ThreadPost | undefined
treeView: boolean
depth: number
showParentReplyLine: boolean
@ -632,18 +629,18 @@ function PostOuterWrapper({
styles.cursor,
{
flexDirection: 'row',
paddingLeft: isMobile ? 10 : 6,
borderTopWidth: !prevPost ? 1 : 0,
paddingHorizontal: isMobile ? 10 : 6,
borderTopWidth: depth === 1 ? 1 : 0,
},
]}>
{Array.from(Array(depth)).map((_, n: number) => (
{Array.from(Array(depth - 1)).map((_, n: number) => (
<View
key={`${post.uri}-padding-${n}`}
style={{
borderLeftWidth: 2,
borderLeftColor: pal.colors.border,
marginLeft: isMobile ? 6 : 14,
paddingLeft: isMobile ? 6 : 12,
marginLeft: isMobile ? 6 : 12,
paddingLeft: isMobile ? 6 : 8,
}}
/>
))}