forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Tune the treeview mode to use larger immediate-children (#1506)
* Tune the treeview mode to use larger immediate-children
* Fix display name alignment
authored by
Paul Frazee
and committed by
GitHub
7931787d
8a5f9cd4
+14
-20
+1
-1
src/view/com/composer/Prompt.tsx
+1
-1
src/view/com/composer/Prompt.tsx
+13
-19
src/view/com/post-thread/PostThreadItem.tsx
+13
-19
src/view/com/post-thread/PostThreadItem.tsx
···
170
170
<>
171
171
{item.rootUri !== item.uri && (
172
172
<View style={{paddingLeft: 16, flexDirection: 'row', height: 16}}>
173
-
<View style={{width: 52}}>
173
+
<View style={{width: 38}}>
174
174
<View
175
175
style={[
176
176
styles.replyLine,
177
177
{
178
178
flexGrow: 1,
179
-
backgroundColor: pal.colors.replyLine,
179
+
backgroundColor: pal.colors.border,
180
180
},
181
181
]}
182
182
/>
···
395
395
</>
396
396
)
397
397
} else {
398
-
const isThreadedChild = treeView && item._depth > 0
398
+
const isThreadedChild = treeView && item._depth > 1
399
399
return (
400
400
<PostOuterWrapper
401
401
item={item}
···
415
415
paddingLeft: 8,
416
416
height: isThreadedChild ? 8 : 16,
417
417
}}>
418
-
<View style={{width: 52}}>
418
+
<View style={{width: 38}}>
419
419
{!isThreadedChild && item._showParentReplyLine && (
420
420
<View
421
421
style={[
422
422
styles.replyLine,
423
423
{
424
424
flexGrow: 1,
425
-
backgroundColor: pal.colors.replyLine,
425
+
backgroundColor: pal.colors.border,
426
426
marginBottom: 4,
427
427
},
428
428
]}
···
442
442
{!isThreadedChild && (
443
443
<View style={styles.layoutAvi}>
444
444
<PreviewableUserAvatar
445
-
size={isThreadedChild ? 36 : 52}
445
+
size={38}
446
446
did={item.post.author.did}
447
447
handle={item.post.author.handle}
448
448
avatar={item.post.author.avatar}
···
455
455
styles.replyLine,
456
456
{
457
457
flexGrow: 1,
458
-
backgroundColor: isThreadedChild
459
-
? pal.colors.border
460
-
: pal.colors.replyLine,
458
+
backgroundColor: pal.colors.border,
461
459
marginTop: 4,
462
460
},
463
461
]}
···
475
473
showAvatar={isThreadedChild}
476
474
avatarSize={26}
477
475
displayNameType="md-bold"
478
-
displayNameStyle={s.ml2}
476
+
displayNameStyle={isThreadedChild && s.ml2}
479
477
style={isThreadedChild && s.mb5}
480
478
/>
481
479
<PostAlerts
···
483
481
style={styles.alert}
484
482
/>
485
483
{item.richText?.text ? (
486
-
<View
487
-
style={[
488
-
styles.postTextContainer,
489
-
// isThreadedChild && {paddingTop: 2},
490
-
]}>
484
+
<View style={styles.postTextContainer}>
491
485
<RichText
492
486
type="post-text"
493
487
richText={item.richText}
···
572
566
}>) {
573
567
const {isMobile} = useWebMediaQueries()
574
568
const pal = usePalette('default')
575
-
if (treeView && item._depth > 0) {
569
+
if (treeView && item._depth > 1) {
576
570
return (
577
571
<View
578
572
style={[
···
581
575
styles.cursor,
582
576
{
583
577
flexDirection: 'row',
584
-
paddingLeft: 10,
578
+
paddingLeft: 20,
585
579
borderTopWidth: item._depth === 1 ? 1 : 0,
586
580
paddingTop: item._depth === 1 ? 8 : 0,
587
581
},
···
592
586
style={{
593
587
borderLeftWidth: 2,
594
588
borderLeftColor: pal.colors.border,
595
-
marginLeft: isMobile ? 6 : 14,
596
-
paddingLeft: isMobile ? 6 : 12,
589
+
marginLeft: n === 0 ? 14 : isMobile ? 6 : 14,
590
+
paddingLeft: n === 0 ? 18 : isMobile ? 6 : 12,
597
591
}}
598
592
/>
599
593
))}