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

Tune the treeview mode to use larger immediate-children (#1506) 

* Tune the treeview mode to use larger immediate-children

* Fix display name alignment
zio/stable
Paul Frazee 2023-09-21 13:47:42 -07:00 committed by GitHub
parent 8a5f9cd43d
commit 7931787dd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/com/composer/Prompt.tsx
View File

@ -33,7 +33,7 @@ export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
prompt: { prompt: {
paddingHorizontal: 20, paddingHorizontal: 18,
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
flexDirection: 'row', flexDirection: 'row',

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

@ -170,13 +170,13 @@ export const PostThreadItem = observer(function PostThreadItem({
<> <>
{item.rootUri !== item.uri && ( {item.rootUri !== item.uri && (
<View style={{paddingLeft: 16, flexDirection: 'row', height: 16}}> <View style={{paddingLeft: 16, flexDirection: 'row', height: 16}}>
<View style={{width: 52}}> <View style={{width: 38}}>
<View <View
style={[ style={[
styles.replyLine, styles.replyLine,
{ {
flexGrow: 1, flexGrow: 1,
backgroundColor: pal.colors.replyLine, backgroundColor: pal.colors.border,
}, },
]} ]}
/> />
@ -395,7 +395,7 @@ export const PostThreadItem = observer(function PostThreadItem({
</> </>
) )
} else { } else {
const isThreadedChild = treeView && item._depth > 0 const isThreadedChild = treeView && item._depth > 1
return ( return (
<PostOuterWrapper <PostOuterWrapper
item={item} item={item}
@ -415,14 +415,14 @@ export const PostThreadItem = observer(function PostThreadItem({
paddingLeft: 8, paddingLeft: 8,
height: isThreadedChild ? 8 : 16, height: isThreadedChild ? 8 : 16,
}}> }}>
<View style={{width: 52}}> <View style={{width: 38}}>
{!isThreadedChild && item._showParentReplyLine && ( {!isThreadedChild && item._showParentReplyLine && (
<View <View
style={[ style={[
styles.replyLine, styles.replyLine,
{ {
flexGrow: 1, flexGrow: 1,
backgroundColor: pal.colors.replyLine, backgroundColor: pal.colors.border,
marginBottom: 4, marginBottom: 4,
}, },
]} ]}
@ -442,7 +442,7 @@ export const PostThreadItem = observer(function PostThreadItem({
{!isThreadedChild && ( {!isThreadedChild && (
<View style={styles.layoutAvi}> <View style={styles.layoutAvi}>
<PreviewableUserAvatar <PreviewableUserAvatar
size={isThreadedChild ? 36 : 52} size={38}
did={item.post.author.did} did={item.post.author.did}
handle={item.post.author.handle} handle={item.post.author.handle}
avatar={item.post.author.avatar} avatar={item.post.author.avatar}
@ -455,9 +455,7 @@ export const PostThreadItem = observer(function PostThreadItem({
styles.replyLine, styles.replyLine,
{ {
flexGrow: 1, flexGrow: 1,
backgroundColor: isThreadedChild backgroundColor: pal.colors.border,
? pal.colors.border
: pal.colors.replyLine,
marginTop: 4, marginTop: 4,
}, },
]} ]}
@ -475,7 +473,7 @@ export const PostThreadItem = observer(function PostThreadItem({
showAvatar={isThreadedChild} showAvatar={isThreadedChild}
avatarSize={26} avatarSize={26}
displayNameType="md-bold" displayNameType="md-bold"
displayNameStyle={s.ml2} displayNameStyle={isThreadedChild && s.ml2}
style={isThreadedChild && s.mb5} style={isThreadedChild && s.mb5}
/> />
<PostAlerts <PostAlerts
@ -483,11 +481,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.alert} style={styles.alert}
/> />
{item.richText?.text ? ( {item.richText?.text ? (
<View <View style={styles.postTextContainer}>
style={[
styles.postTextContainer,
// isThreadedChild && {paddingTop: 2},
]}>
<RichText <RichText
type="post-text" type="post-text"
richText={item.richText} richText={item.richText}
@ -572,7 +566,7 @@ function PostOuterWrapper({
}>) { }>) {
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const pal = usePalette('default') const pal = usePalette('default')
if (treeView && item._depth > 0) { if (treeView && item._depth > 1) {
return ( return (
<View <View
style={[ style={[
@ -581,7 +575,7 @@ function PostOuterWrapper({
styles.cursor, styles.cursor,
{ {
flexDirection: 'row', flexDirection: 'row',
paddingLeft: 10, paddingLeft: 20,
borderTopWidth: item._depth === 1 ? 1 : 0, borderTopWidth: item._depth === 1 ? 1 : 0,
paddingTop: item._depth === 1 ? 8 : 0, paddingTop: item._depth === 1 ? 8 : 0,
}, },
@ -592,8 +586,8 @@ function PostOuterWrapper({
style={{ style={{
borderLeftWidth: 2, borderLeftWidth: 2,
borderLeftColor: pal.colors.border, borderLeftColor: pal.colors.border,
marginLeft: isMobile ? 6 : 14, marginLeft: n === 0 ? 14 : isMobile ? 6 : 14,
paddingLeft: isMobile ? 6 : 12, paddingLeft: n === 0 ? 18 : isMobile ? 6 : 12,
}} }}
/> />
))} ))}