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

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
zio/stable
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/view/com/threadgate/WhoCanReply.tsx → src/components/WhoCanReply.tsx
View File

@ -33,7 +33,8 @@ import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/componen
import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe' import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {TextLink} from '../util/Link' import {TextLink} from '../view/com/util/Link'
import {PencilLine_Stroke2_Corner0_Rounded as PencilLine} from './icons/Pencil'
interface WhoCanReplyProps { interface WhoCanReplyProps {
post: AppBskyFeedDefs.PostView post: AppBskyFeedDefs.PostView
@ -41,11 +42,7 @@ interface WhoCanReplyProps {
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
} }
export function WhoCanReplyInline({ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
post,
isThreadAuthor,
style,
}: WhoCanReplyProps) {
const {_} = useLingui() const {_} = useLingui()
const t = useTheme() const t = useTheme()
const infoDialogControl = useDialogControl() const infoDialogControl = useDialogControl()
@ -90,73 +87,13 @@ export function WhoCanReplyInline({
]}> ]}>
{description} {description}
</Text> </Text>
{isThreadAuthor && (
<PencilLine width={12} fill={t.palette.primary_500} />
)}
</View> </View>
)} )}
</Button> </Button>
<InfoDialog control={infoDialogControl} post={post} settings={settings} /> <WhoCanReplyDialog control={infoDialogControl} post={post} />
</>
)
}
export function WhoCanReplyBlock({
post,
isThreadAuthor,
style,
}: WhoCanReplyProps) {
const {_} = useLingui()
const t = useTheme()
const infoDialogControl = useDialogControl()
const {settings, isRootPost, onPressEdit} = useWhoCanReply(post)
if (!isRootPost) {
return null
}
if (!settings.length && !isThreadAuthor) {
return null
}
const isEverybody = settings.length === 0
const isNobody = !!settings.find(gate => gate.type === 'nobody')
const description = isEverybody
? _(msg`Everybody can reply`)
: isNobody
? _(msg`Replies on this thread are disabled`)
: _(msg`Some people can reply`)
return (
<>
<Button
label={
isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`)
}
onPress={isThreadAuthor ? onPressEdit : infoDialogControl.open}
hitSlop={HITSLOP_10}>
{({hovered}) => (
<View
style={[
a.flex_1,
a.flex_row,
a.align_center,
a.py_sm,
a.pr_lg,
style,
]}>
<View style={[{paddingLeft: 25, paddingRight: 18}]}>
<Icon color={t.palette.contrast_300} settings={settings} />
</View>
<Text
style={[
a.text_sm,
a.leading_tight,
t.atoms.text_contrast_medium,
hovered && a.underline,
]}>
{description}
</Text>
</View>
)}
</Button>
<InfoDialog control={infoDialogControl} post={post} settings={settings} />
</> </>
) )
} }
@ -176,31 +113,24 @@ function Icon({
return <IconComponent fill={color} width={width} /> return <IconComponent fill={color} width={width} />
} }
function InfoDialog({ export function WhoCanReplyDialog({
control, control,
post, post,
settings,
}: { }: {
control: Dialog.DialogControlProps control: Dialog.DialogControlProps
post: AppBskyFeedDefs.PostView post: AppBskyFeedDefs.PostView
settings: ThreadgateSetting[]
}) { }) {
return ( return (
<Dialog.Outer control={control}> <Dialog.Outer control={control}>
<Dialog.Handle /> <Dialog.Handle />
<InfoDialogInner post={post} settings={settings} /> <WhoCanReplyDialogInner post={post} />
</Dialog.Outer> </Dialog.Outer>
) )
} }
function InfoDialogInner({ function WhoCanReplyDialogInner({post}: {post: AppBskyFeedDefs.PostView}) {
post,
settings,
}: {
post: AppBskyFeedDefs.PostView
settings: ThreadgateSetting[]
}) {
const {_} = useLingui() const {_} = useLingui()
const {settings} = useWhoCanReply(post)
return ( return (
<Dialog.ScrollableInner <Dialog.ScrollableInner
label={_(msg`Who can reply dialog`)} label={_(msg`Who can reply dialog`)}
@ -334,6 +264,9 @@ function useWhoCanReply(post: AppBskyFeedDefs.PostView) {
name: 'threadgate', name: 'threadgate',
settings, settings,
async onConfirm(newSettings: ThreadgateSetting[]) { async onConfirm(newSettings: ThreadgateSetting[]) {
if (JSON.stringify(settings) === JSON.stringify(newSettings)) {
return
}
try { try {
if (newSettings.length) { if (newSettings.length) {
await createThreadgate(agent, post.uri, newSettings) await createThreadgate(agent, post.uri, newSettings)

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

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