Tune the treeview UI a bit more (#1494) · jeanmachine.dev/witchsky.app@498c3e2

+7 -19

src/view/com/post-thread/PostThread.tsx

··· 103 103 return [] 104 104 }, [view.isLoadingFromCache, view.thread, maxVisible]) 105 105 const highlightedPostIndex = posts.findIndex(post => post._isHighlightedPost) 106 - const showBottomBorder = 107 - !treeView || 108 - // in the treeview, only show the bottom border 109 - // if there are replies under the highlighted posts 110 - posts.findLast(v => v instanceof PostThreadItemModel) !== 111 - posts[highlightedPostIndex] 112 106 useSetTitle( 113 107 view.thread?.postRecord && 114 108 `${sanitizeDisplayName( ··· 194 188 ) 195 189 } else if (item === REPLY_PROMPT) { 196 190 return ( 197 - <View 198 - style={ 199 - treeView && [pal.border, {borderBottomWidth: 1, marginBottom: 6}] 200 - }> 191 + <View> 201 192 {isDesktopWeb && <ComposePrompt onPressCompose={onPressReply} />} 202 193 </View> 203 194 ) ··· 242 233 // -prf 243 234 return ( 244 235 <View 245 - style={[ 246 - {height: 400}, 247 - showBottomBorder && { 248 - borderTopWidth: 1, 249 - borderColor: pal.colors.border, 250 - }, 251 - treeView && {marginTop: 10}, 252 - ]} 236 + style={{ 237 + height: 400, 238 + borderTopWidth: 1, 239 + borderColor: pal.colors.border, 240 + }} 253 241 /> 254 242 ) 255 243 } else if (item === CHILD_SPINNER) { ··· 273 261 } 274 262 return <></> 275 263 }, 276 - [onRefresh, onPressReply, pal, posts, isTablet, treeView, showBottomBorder], 264 + [onRefresh, onPressReply, pal, posts, isTablet, treeView], 277 265 ) 278 266 279 267 // loading

+47 -33

src/view/com/post-thread/PostThreadItem.tsx

··· 166 166 return ( 167 167 <> 168 168 {item.rootUri !== item.uri && ( 169 - <View style={{paddingLeft: 18, flexDirection: 'row', height: 16}}> 169 + <View style={{paddingLeft: 16, flexDirection: 'row', height: 16}}> 170 170 <View style={{width: 52}}> 171 171 <View 172 172 style={[ ··· 432 432 style={[ 433 433 styles.layout, 434 434 { 435 - paddingBottom: item._showChildReplyLine ? 0 : 8, 435 + paddingBottom: 436 + item._showChildReplyLine && !isThreadedChild ? 0 : 8, 436 437 }, 437 438 ]}> 438 - <View style={styles.layoutAvi}> 439 - <PreviewableUserAvatar 440 - size={isThreadedChild ? 24 : 52} 441 - did={item.post.author.did} 442 - handle={item.post.author.handle} 443 - avatar={item.post.author.avatar} 444 - moderation={item.moderation.avatar} 445 - /> 446 - 447 - {item._showChildReplyLine && ( 448 - <View 449 - style={[ 450 - styles.replyLine, 451 - { 452 - flexGrow: 1, 453 - backgroundColor: isThreadedChild 454 - ? pal.colors.border 455 - : pal.colors.replyLine, 456 - marginTop: 4, 457 - }, 458 - ]} 439 + {!isThreadedChild && ( 440 + <View style={styles.layoutAvi}> 441 + <PreviewableUserAvatar 442 + size={isThreadedChild ? 36 : 52} 443 + did={item.post.author.did} 444 + handle={item.post.author.handle} 445 + avatar={item.post.author.avatar} 446 + moderation={item.moderation.avatar} 459 447 /> 460 - )} 461 - </View> 448 + 449 + {item._showChildReplyLine && ( 450 + <View 451 + style={[ 452 + styles.replyLine, 453 + { 454 + flexGrow: 1, 455 + backgroundColor: isThreadedChild 456 + ? pal.colors.border 457 + : pal.colors.replyLine, 458 + marginTop: 4, 459 + }, 460 + ]} 461 + /> 462 + )} 463 + </View> 464 + )} 462 465 463 466 <View style={styles.layoutContent}> 464 467 <PostMeta ··· 466 469 authorHasWarning={!!item.post.author.labels?.length} 467 470 timestamp={item.post.indexedAt} 468 471 postHref={itemHref} 472 + showAvatar={isThreadedChild} 473 + avatarSize={26} 474 + displayNameType="md-bold" 475 + displayNameStyle={s.ml2} 476 + style={isThreadedChild && s.mb5} 469 477 /> 470 478 <PostAlerts 471 479 moderation={item.moderation.content} ··· 475 483 <View 476 484 style={[ 477 485 styles.postTextContainer, 478 - isThreadedChild && {paddingTop: 2}, 486 + // isThreadedChild && {paddingTop: 2}, 479 487 ]}> 480 488 <RichText 481 489 type="post-text" ··· 525 533 style={[ 526 534 styles.loadMore, 527 535 { 528 - paddingLeft: treeView ? 44 : 70, 536 + paddingLeft: treeView ? 8 : 70, 529 537 paddingTop: 0, 530 538 paddingBottom: treeView ? 4 : 12, 531 539 }, ··· 566 574 <View 567 575 style={[ 568 576 pal.view, 577 + pal.border, 569 578 styles.cursor, 570 - {flexDirection: 'row', paddingLeft: 10}, 579 + { 580 + flexDirection: 'row', 581 + paddingLeft: 10, 582 + borderTopWidth: item._depth === 1 ? 1 : 0, 583 + paddingTop: item._depth === 1 ? 8 : 0, 584 + }, 571 585 ]}> 572 586 {Array.from(Array(item._depth - 1)).map((_, n: number) => ( 573 587 <View ··· 575 589 style={{ 576 590 borderLeftWidth: 2, 577 591 borderLeftColor: pal.colors.border, 578 - marginLeft: 19, 579 - paddingLeft: isMobile ? 0 : 4, 592 + marginLeft: isMobile ? 6 : 14, 593 + paddingLeft: isMobile ? 6 : 12, 580 594 }} 581 595 /> 582 596 ))} ··· 626 640 const styles = StyleSheet.create({ 627 641 outer: { 628 642 borderTopWidth: 1, 629 - paddingLeft: 10, 643 + paddingLeft: 8, 630 644 }, 631 645 outerHighlighted: { 632 646 paddingTop: 16, 633 - paddingLeft: 10, 634 - paddingRight: 10, 647 + paddingLeft: 8, 648 + paddingRight: 8, 635 649 }, 636 650 noTopBorder: { 637 651 borderTopWidth: 0,

+15 -9

src/view/com/util/PostMeta.tsx

··· 1 1 import React from 'react' 2 - import {StyleSheet, View} from 'react-native' 2 + import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' 3 3 import {Text} from './text/Text' 4 4 import {DesktopWebTextLink} from './Link' 5 5 import {niceDate} from 'lib/strings/time' 6 6 import {usePalette} from 'lib/hooks/usePalette' 7 + import {TypographyVariant} from 'lib/ThemeContext' 7 8 import {UserAvatar} from './UserAvatar' 8 9 import {observer} from 'mobx-react-lite' 9 10 import {sanitizeDisplayName} from 'lib/strings/display-names' ··· 19 20 handle: string 20 21 displayName?: string | undefined 21 22 } 22 - showAvatar?: boolean 23 23 authorHasWarning: boolean 24 24 postHref: string 25 25 timestamp: string 26 + showAvatar?: boolean 27 + avatarSize?: number 28 + displayNameType?: TypographyVariant 29 + displayNameStyle?: StyleProp<TextStyle> 30 + style?: StyleProp<ViewStyle> 26 31 } 27 32 28 33 export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) { ··· 31 36 const handle = opts.author.handle 32 37 33 38 return ( 34 - <View style={styles.metaOneLine}> 35 - {opts.showAvatar && typeof opts.author.avatar !== 'undefined' && ( 39 + <View style={[styles.container, opts.style]}> 40 + {opts.showAvatar && ( 36 41 <View style={styles.avatar}> 37 42 <UserAvatar 38 43 avatar={opts.author.avatar} 39 - size={16} 44 + size={opts.avatarSize || 16} 40 45 // TODO moderation 41 46 /> 42 47 </View> 43 48 )} 44 49 <View style={styles.maxWidth}> 45 50 <DesktopWebTextLink 46 - type="lg-bold" 47 - style={pal.text} 51 + type={opts.displayNameType || 'lg-bold'} 52 + style={[pal.text, opts.displayNameStyle]} 48 53 numberOfLines={1} 49 54 lineHeight={1.2} 50 55 text={ ··· 90 95 }) 91 96 92 97 const styles = StyleSheet.create({ 93 - metaOneLine: { 98 + container: { 94 99 flexDirection: 'row', 95 - alignItems: isAndroid ? 'center' : 'baseline', 100 + alignItems: 'center', 96 101 paddingBottom: 2, 97 102 gap: 4, 98 103 zIndex: 1, 104 + flex: 1, 99 105 }, 100 106 avatar: { 101 107 alignSelf: 'center',

Configure Feed

Configure Feed