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