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

Tune the treeview UI a bit more (#1494)

zio/stable
Paul Frazee 2023-09-20 19:13:54 -07:00 committed by GitHub
parent acc98ac1ab
commit 498c3e2c27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/view/com/post-thread/PostThread.tsx
View File

@ -103,12 +103,6 @@ export const PostThread = observer(function PostThread({
return []
}, [view.isLoadingFromCache, view.thread, maxVisible])
const highlightedPostIndex = posts.findIndex(post => post._isHighlightedPost)
const showBottomBorder =
!treeView ||
// in the treeview, only show the bottom border
// if there are replies under the highlighted posts
posts.findLast(v => v instanceof PostThreadItemModel) !==
posts[highlightedPostIndex]
useSetTitle(
view.thread?.postRecord &&
`${sanitizeDisplayName(
@ -194,10 +188,7 @@ export const PostThread = observer(function PostThread({
)
} else if (item === REPLY_PROMPT) {
return (
<View
style={
treeView && [pal.border, {borderBottomWidth: 1, marginBottom: 6}]
}>
<View>
{isDesktopWeb && <ComposePrompt onPressCompose={onPressReply} />}
</View>
)
@ -242,14 +233,11 @@ export const PostThread = observer(function PostThread({
// -prf
return (
<View
style={[
{height: 400},
showBottomBorder && {
borderTopWidth: 1,
borderColor: pal.colors.border,
},
treeView && {marginTop: 10},
]}
style={{
height: 400,
borderTopWidth: 1,
borderColor: pal.colors.border,
}}
/>
)
} else if (item === CHILD_SPINNER) {
@ -273,7 +261,7 @@ export const PostThread = observer(function PostThread({
}
return <></>
},
[onRefresh, onPressReply, pal, posts, isTablet, treeView, showBottomBorder],
[onRefresh, onPressReply, pal, posts, isTablet, treeView],
)
// loading

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

@ -166,7 +166,7 @@ export const PostThreadItem = observer(function PostThreadItem({
return (
<>
{item.rootUri !== item.uri && (
<View style={{paddingLeft: 18, flexDirection: 'row', height: 16}}>
<View style={{paddingLeft: 16, flexDirection: 'row', height: 16}}>
<View style={{width: 52}}>
<View
style={[
@ -432,33 +432,36 @@ export const PostThreadItem = observer(function PostThreadItem({
style={[
styles.layout,
{
paddingBottom: item._showChildReplyLine ? 0 : 8,
paddingBottom:
item._showChildReplyLine && !isThreadedChild ? 0 : 8,
},
]}>
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
size={isThreadedChild ? 24 : 52}
did={item.post.author.did}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
moderation={item.moderation.avatar}
/>
{item._showChildReplyLine && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: isThreadedChild
? pal.colors.border
: pal.colors.replyLine,
marginTop: 4,
},
]}
{!isThreadedChild && (
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
size={isThreadedChild ? 36 : 52}
did={item.post.author.did}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
moderation={item.moderation.avatar}
/>
)}
</View>
{item._showChildReplyLine && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: isThreadedChild
? pal.colors.border
: pal.colors.replyLine,
marginTop: 4,
},
]}
/>
)}
</View>
)}
<View style={styles.layoutContent}>
<PostMeta
@ -466,6 +469,11 @@ export const PostThreadItem = observer(function PostThreadItem({
authorHasWarning={!!item.post.author.labels?.length}
timestamp={item.post.indexedAt}
postHref={itemHref}
showAvatar={isThreadedChild}
avatarSize={26}
displayNameType="md-bold"
displayNameStyle={s.ml2}
style={isThreadedChild && s.mb5}
/>
<PostAlerts
moderation={item.moderation.content}
@ -475,7 +483,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<View
style={[
styles.postTextContainer,
isThreadedChild && {paddingTop: 2},
// isThreadedChild && {paddingTop: 2},
]}>
<RichText
type="post-text"
@ -525,7 +533,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={[
styles.loadMore,
{
paddingLeft: treeView ? 44 : 70,
paddingLeft: treeView ? 8 : 70,
paddingTop: 0,
paddingBottom: treeView ? 4 : 12,
},
@ -566,8 +574,14 @@ function PostOuterWrapper({
<View
style={[
pal.view,
pal.border,
styles.cursor,
{flexDirection: 'row', paddingLeft: 10},
{
flexDirection: 'row',
paddingLeft: 10,
borderTopWidth: item._depth === 1 ? 1 : 0,
paddingTop: item._depth === 1 ? 8 : 0,
},
]}>
{Array.from(Array(item._depth - 1)).map((_, n: number) => (
<View
@ -575,8 +589,8 @@ function PostOuterWrapper({
style={{
borderLeftWidth: 2,
borderLeftColor: pal.colors.border,
marginLeft: 19,
paddingLeft: isMobile ? 0 : 4,
marginLeft: isMobile ? 6 : 14,
paddingLeft: isMobile ? 6 : 12,
}}
/>
))}
@ -626,12 +640,12 @@ function ExpandedPostDetails({
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
paddingLeft: 10,
paddingLeft: 8,
},
outerHighlighted: {
paddingTop: 16,
paddingLeft: 10,
paddingRight: 10,
paddingLeft: 8,
paddingRight: 8,
},
noTopBorder: {
borderTopWidth: 0,

24
src/view/com/util/PostMeta.tsx
View File

@ -1,9 +1,10 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import {Text} from './text/Text'
import {DesktopWebTextLink} from './Link'
import {niceDate} from 'lib/strings/time'
import {usePalette} from 'lib/hooks/usePalette'
import {TypographyVariant} from 'lib/ThemeContext'
import {UserAvatar} from './UserAvatar'
import {observer} from 'mobx-react-lite'
import {sanitizeDisplayName} from 'lib/strings/display-names'
@ -19,10 +20,14 @@ interface PostMetaOpts {
handle: string
displayName?: string | undefined
}
showAvatar?: boolean
authorHasWarning: boolean
postHref: string
timestamp: string
showAvatar?: boolean
avatarSize?: number
displayNameType?: TypographyVariant
displayNameStyle?: StyleProp<TextStyle>
style?: StyleProp<ViewStyle>
}
export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
@ -31,20 +36,20 @@ export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
const handle = opts.author.handle
return (
<View style={styles.metaOneLine}>
{opts.showAvatar && typeof opts.author.avatar !== 'undefined' && (
<View style={[styles.container, opts.style]}>
{opts.showAvatar && (
<View style={styles.avatar}>
<UserAvatar
avatar={opts.author.avatar}
size={16}
size={opts.avatarSize || 16}
// TODO moderation
/>
</View>
)}
<View style={styles.maxWidth}>
<DesktopWebTextLink
type="lg-bold"
style={pal.text}
type={opts.displayNameType || 'lg-bold'}
style={[pal.text, opts.displayNameStyle]}
numberOfLines={1}
lineHeight={1.2}
text={
@ -90,12 +95,13 @@ export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
})
const styles = StyleSheet.create({
metaOneLine: {
container: {
flexDirection: 'row',
alignItems: isAndroid ? 'center' : 'baseline',
alignItems: 'center',
paddingBottom: 2,
gap: 4,
zIndex: 1,
flex: 1,
},
avatar: {
alignSelf: 'center',