Tune treeview thread mode to have consistent spacing (#2078)

zio/stable
Paul Frazee 2023-12-04 16:25:17 -08:00 committed by GitHub
parent 4f171be9bf
commit f1b69a332a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 8 deletions

View File

@ -417,7 +417,7 @@ let PostThreadItemLoaded = ({
</> </>
) )
} else { } else {
const isThreadedChild = treeView && depth > 1 const isThreadedChild = treeView && depth > 0
return ( return (
<PostOuterWrapper <PostOuterWrapper
post={post} post={post}
@ -498,10 +498,10 @@ let PostThreadItemLoaded = ({
timestamp={post.indexedAt} timestamp={post.indexedAt}
postHref={postHref} postHref={postHref}
showAvatar={isThreadedChild} showAvatar={isThreadedChild}
avatarSize={26} avatarSize={20}
displayNameType="md-bold" displayNameType="md-bold"
displayNameStyle={isThreadedChild && s.ml2} displayNameStyle={isThreadedChild && s.ml2}
style={isThreadedChild && s.mb5} style={isThreadedChild && s.mb2}
/> />
<PostAlerts <PostAlerts
moderation={moderation.content} moderation={moderation.content}
@ -594,7 +594,7 @@ function PostOuterWrapper({
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const pal = usePalette('default') const pal = usePalette('default')
const styles = useStyles() const styles = useStyles()
if (treeView && depth > 1) { if (treeView && depth > 0) {
return ( return (
<View <View
style={[ style={[
@ -603,9 +603,9 @@ function PostOuterWrapper({
styles.cursor, styles.cursor,
{ {
flexDirection: 'row', flexDirection: 'row',
paddingLeft: 20, paddingLeft: depth === 1 ? 10 : 20,
borderTopWidth: depth === 1 ? 1 : 0, borderTopWidth: depth === 1 ? 1 : 0,
paddingTop: depth === 1 ? 8 : 0, paddingTop: depth === 1 ? 6 : 0,
}, },
]}> ]}>
{Array.from(Array(depth - 1)).map((_, n: number) => ( {Array.from(Array(depth - 1)).map((_, n: number) => (
@ -614,8 +614,8 @@ function PostOuterWrapper({
style={{ style={{
borderLeftWidth: 2, borderLeftWidth: 2,
borderLeftColor: pal.colors.border, borderLeftColor: pal.colors.border,
marginLeft: n === 0 ? 14 : isMobile ? 6 : 14, marginLeft: isMobile ? 6 : 14,
paddingLeft: n === 0 ? 18 : isMobile ? 6 : 12, paddingLeft: isMobile ? 6 : 12,
}} }}
/> />
))} ))}