Remove the 'Who can reply' element except when viewing root, and add "edit" (#4615)

* Remove the 'Who can reply' element except when viewing root, and add the edit text to authors

* Switch to icon
This commit is contained in:
Paul Frazee 2024-06-24 10:11:43 -07:00 committed by GitHub
parent 0a0c738790
commit f769564edf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 165 additions and 237 deletions

View file

@ -34,8 +34,8 @@ import {ContentHider} from '../../../components/moderation/ContentHider'
import {LabelsOnMyPost} from '../../../components/moderation/LabelsOnMe'
import {PostAlerts} from '../../../components/moderation/PostAlerts'
import {PostHider} from '../../../components/moderation/PostHider'
import {WhoCanReply} from '../../../components/WhoCanReply'
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {WhoCanReplyBlock, WhoCanReplyInline} from '../threadgate/WhoCanReply'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Link, TextLink} from '../util/Link'
import {formatCount} from '../util/numeric/format'
@ -406,177 +406,172 @@ let PostThreadItemLoaded = ({
const isThreadedChildAdjacentBot =
isThreadedChild && nextPost?.ctx.depth === depth
return (
<>
<PostOuterWrapper
post={post}
depth={depth}
showParentReplyLine={!!showParentReplyLine}
treeView={treeView}
hasPrecedingItem={hasPrecedingItem}
hideTopBorder={hideTopBorder}>
<PostHider
testID={`postThreadItem-by-${post.author.handle}`}
href={postHref}
disabled={overrideBlur}
style={[pal.view]}
modui={moderation.ui('contentList')}
iconSize={isThreadedChild ? 26 : 38}
iconStyles={
isThreadedChild
? {marginRight: 4}
: {marginLeft: 2, marginRight: 2}
}
profile={post.author}
interpretFilterAsBlur>
<View
style={{
flexDirection: 'row',
gap: 10,
paddingLeft: 8,
height: isThreadedChildAdjacentTop ? 8 : 16,
}}>
<View style={{width: 38}}>
{!isThreadedChild && showParentReplyLine && (
<PostOuterWrapper
post={post}
depth={depth}
showParentReplyLine={!!showParentReplyLine}
treeView={treeView}
hasPrecedingItem={hasPrecedingItem}
hideTopBorder={hideTopBorder}>
<PostHider
testID={`postThreadItem-by-${post.author.handle}`}
href={postHref}
disabled={overrideBlur}
style={[pal.view]}
modui={moderation.ui('contentList')}
iconSize={isThreadedChild ? 26 : 38}
iconStyles={
isThreadedChild ? {marginRight: 4} : {marginLeft: 2, marginRight: 2}
}
profile={post.author}
interpretFilterAsBlur>
<View
style={{
flexDirection: 'row',
gap: 10,
paddingLeft: 8,
height: isThreadedChildAdjacentTop ? 8 : 16,
}}>
<View style={{width: 38}}>
{!isThreadedChild && showParentReplyLine && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
marginBottom: 4,
},
]}
/>
)}
</View>
</View>
<View
style={[
styles.layout,
{
paddingBottom:
showChildReplyLine && !isThreadedChild
? 0
: isThreadedChildAdjacentBot
? 4
: 8,
},
]}>
{/* If we are in threaded mode, the avatar is rendered in PostMeta */}
{!isThreadedChild && (
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
size={38}
profile={post.author}
moderation={moderation.ui('avatar')}
type={post.author.associated?.labeler ? 'labeler' : 'user'}
/>
{showChildReplyLine && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
marginBottom: 4,
marginTop: 4,
},
]}
/>
)}
</View>
</View>
)}
<View
style={[
styles.layout,
{
paddingBottom:
showChildReplyLine && !isThreadedChild
? 0
: isThreadedChildAdjacentBot
? 4
: 8,
},
]}>
{/* If we are in threaded mode, the avatar is rendered in PostMeta */}
{!isThreadedChild && (
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
size={38}
profile={post.author}
moderation={moderation.ui('avatar')}
type={post.author.associated?.labeler ? 'labeler' : 'user'}
style={
isThreadedChild
? styles.layoutContentThreaded
: styles.layoutContent
}>
<PostMeta
author={post.author}
moderation={moderation}
authorHasWarning={!!post.author.labels?.length}
timestamp={post.indexedAt}
postHref={postHref}
showAvatar={isThreadedChild}
avatarModeration={moderation.ui('avatar')}
avatarSize={28}
displayNameType="md-bold"
displayNameStyle={isThreadedChild && s.ml2}
style={
isThreadedChild && {
alignItems: 'center',
paddingBottom: isWeb ? 5 : 2,
}
}
/>
<LabelsOnMyPost post={post} />
<PostAlerts
modui={moderation.ui('contentList')}
style={[a.pt_2xs, a.pb_2xs]}
/>
{richText?.text ? (
<View style={styles.postTextContainer}>
<RichText
enableTags
value={richText}
style={[a.flex_1, a.text_md]}
numberOfLines={limitLines ? MAX_POST_LINES : undefined}
authorHandle={post.author.handle}
/>
{showChildReplyLine && (
<View
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
marginTop: 4,
},
]}
/>
)}
</View>
) : undefined}
{limitLines ? (
<TextLink
text={_(msg`Show More`)}
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{post.embed && (
<View style={[a.pb_xs]}>
<PostEmbeds embed={post.embed} moderation={moderation} />
</View>
)}
<View
style={
isThreadedChild
? styles.layoutContentThreaded
: styles.layoutContent
}>
<PostMeta
author={post.author}
moderation={moderation}
authorHasWarning={!!post.author.labels?.length}
timestamp={post.indexedAt}
postHref={postHref}
showAvatar={isThreadedChild}
avatarModeration={moderation.ui('avatar')}
avatarSize={28}
displayNameType="md-bold"
displayNameStyle={isThreadedChild && s.ml2}
style={
isThreadedChild && {
alignItems: 'center',
paddingBottom: isWeb ? 5 : 2,
}
}
/>
<LabelsOnMyPost post={post} />
<PostAlerts
modui={moderation.ui('contentList')}
style={[a.pt_2xs, a.pb_2xs]}
/>
{richText?.text ? (
<View style={styles.postTextContainer}>
<RichText
enableTags
value={richText}
style={[a.flex_1, a.text_md]}
numberOfLines={limitLines ? MAX_POST_LINES : undefined}
authorHandle={post.author.handle}
/>
</View>
) : undefined}
{limitLines ? (
<TextLink
text={_(msg`Show More`)}
style={pal.link}
onPress={onPressShowMore}
href="#"
/>
) : undefined}
{post.embed && (
<View style={[a.pb_xs]}>
<PostEmbeds embed={post.embed} moderation={moderation} />
</View>
)}
<PostCtrls
post={post}
record={record}
richText={richText}
onPressReply={onPressReply}
logContext="PostThreadItem"
/>
</View>
<PostCtrls
post={post}
record={record}
richText={richText}
onPressReply={onPressReply}
logContext="PostThreadItem"
/>
</View>
{hasMore ? (
<Link
style={[
styles.loadMore,
{
paddingLeft: treeView ? 8 : 70,
paddingTop: 0,
paddingBottom: treeView ? 4 : 12,
},
]}
href={postHref}
title={itemTitle}
noFeedback>
<Text type="sm-medium" style={pal.textLight}>
<Trans>More</Trans>
</Text>
<FontAwesomeIcon
icon="angle-right"
color={pal.colors.textLight}
size={14}
/>
</Link>
) : undefined}
</PostHider>
</PostOuterWrapper>
<WhoCanReplyBlock post={post} isThreadAuthor={isThreadAuthor} />
</>
</View>
{hasMore ? (
<Link
style={[
styles.loadMore,
{
paddingLeft: treeView ? 8 : 70,
paddingTop: 0,
paddingBottom: treeView ? 4 : 12,
},
]}
href={postHref}
title={itemTitle}
noFeedback>
<Text type="sm-medium" style={pal.textLight}>
<Trans>More</Trans>
</Text>
<FontAwesomeIcon
icon="angle-right"
color={pal.colors.textLight}
size={14}
/>
</Link>
) : undefined}
</PostHider>
</PostOuterWrapper>
)
}
}
@ -671,7 +666,7 @@ function ExpandedPostDetails({
s.mb10,
]}>
<Text style={[a.text_sm, pal.textLight]}>{niceDate(post.indexedAt)}</Text>
<WhoCanReplyInline post={post} isThreadAuthor={isThreadAuthor} />
<WhoCanReply post={post} isThreadAuthor={isThreadAuthor} />
{needsTranslation && (
<>
<Text style={[a.text_sm, pal.textLight]}>&middot;</Text>