acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add notice to labeler card, show all labelers

Browse Source
This commit is contained in:
Eric Bailey
2024-09-20 13:48:37 -05:00
parent bd4514035d
commit 2adce3ff8a
2 changed files with 65 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LabelingServiceCard/index.tsx
+24 -4
View File
@@ -9,6 +9,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
import {useLabelerInfoQuery} from '#/state/queries/labeler'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
import {Link as InternalLink, LinkProps} from '#/components/Link'
import {RichText} from '#/components/RichText'
import {Text} from '#/components/Typography'
@@ -43,21 +44,40 @@ export function Avatar({avatar}: {avatar?: string}) {
}
export function Title({value}: {value: string}) {
return <Text style={[a.text_md, a.font_bold]}>{value}</Text>
return <Text style={[a.text_md, a.font_bold, a.leading_tight]}>{value}</Text>
}
export function Description({value, handle}: {value?: string; handle: string}) {
return value ? (
<Text numberOfLines={2}>
<RichText value={value} style={[]} />
<RichText value={value} style={[a.leading_snug]} />
</Text>
) : (
<Text>
<Text style={[a.leading_snug]}>
<Trans>By {sanitizeHandle(handle, '@')}</Trans>
</Text>
)
}
export function RegionalNotice() {
const t = useTheme()
return (
<View
style={[
a.flex_row,
a.align_center,
a.gap_xs,
a.pt_2xs,
{marginLeft: -2},
]}>
<Flag fill={t.atoms.text_contrast_low.color} size="sm" />
<Text style={[a.italic, a.leading_snug]}>
<Trans>Required in your region</Trans>
</Text>
</View>
)
}
export function LikeCount({count}: {count: number}) {
const t = useTheme()
return (
@@ -85,7 +105,7 @@ export function Content({children}: React.PropsWithChildren<{}>) {
a.align_center,
a.justify_between,
]}>
<View style={[a.gap_xs, a.flex_1]}>{children}</View>
<View style={[a.gap_2xs, a.flex_1]}>{children}</View>
<ChevronRight size="md" style={[a.z_10, t.atoms.text_contrast_low]} />
</View>
src/screens/Moderation/index.tsx
+41 -67
View File
@@ -39,7 +39,6 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components
import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
import {Props as SVGIconProps} from '#/components/icons/common'
import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
import * as LabelingService from '#/components/LabelingServiceCard'
@@ -425,76 +424,51 @@ export function ModerationScreenInner({
</View>
) : (
<View style={[a.rounded_sm, t.atoms.bg_contrast_25]}>
{labelers
.filter(
labeler =>
!isNonConfigurableModerationAuthority(labeler.creator.did),
)
.map((labeler, i) => {
return (
<React.Fragment key={labeler.creator.did}>
{i !== 0 && <Divider />}
<LabelingService.Link labeler={labeler}>
{state => (
<LabelingService.Outer
style={[
i === 0 && {
borderTopLeftRadius: a.rounded_sm.borderRadius,
borderTopRightRadius: a.rounded_sm.borderRadius,
},
i === labelers.length - 1 && {
borderBottomLeftRadius: a.rounded_sm.borderRadius,
borderBottomRightRadius: a.rounded_sm.borderRadius,
},
(state.hovered || state.pressed) && [
t.atoms.bg_contrast_50,
],
]}>
<LabelingService.Avatar
avatar={labeler.creator.avatar}
{labelers.map((labeler, i) => {
return (
<React.Fragment key={labeler.creator.did}>
{i !== 0 && <Divider />}
<LabelingService.Link labeler={labeler}>
{state => (
<LabelingService.Outer
style={[
i === 0 && {
borderTopLeftRadius: a.rounded_sm.borderRadius,
borderTopRightRadius: a.rounded_sm.borderRadius,
},
i === labelers.length - 1 && {
borderBottomLeftRadius: a.rounded_sm.borderRadius,
borderBottomRightRadius: a.rounded_sm.borderRadius,
},
(state.hovered || state.pressed) && [
t.atoms.bg_contrast_50,
],
]}>
<LabelingService.Avatar avatar={labeler.creator.avatar} />
<LabelingService.Content>
<LabelingService.Title
value={getLabelingServiceTitle({
displayName: labeler.creator.displayName,
handle: labeler.creator.handle,
})}
/>
<LabelingService.Content>
<LabelingService.Title
value={getLabelingServiceTitle({
displayName: labeler.creator.displayName,
handle: labeler.creator.handle,
})}
/>
<LabelingService.Description
value={labeler.creator.description}
handle={labeler.creator.handle}
/>
</LabelingService.Content>
</LabelingService.Outer>
)}
</LabelingService.Link>
</React.Fragment>
)
})}
<LabelingService.Description
value={labeler.creator.description}
handle={labeler.creator.handle}
/>
{isNonConfigurableModerationAuthority(
labeler.creator.did,
) && <LabelingService.RegionalNotice />}
</LabelingService.Content>
</LabelingService.Outer>
)}
</LabelingService.Link>
</React.Fragment>
)
})}
</View>
)}
{labelers?.some(
labeler => !isNonConfigurableModerationAuthority(labeler.creator.did),
) && (
<View
style={[
a.p_lg,
a.mb_md,
a.flex_row,
a.align_center,
a.justify_center,
a.gap_sm,
]}>
<Flag fill={t.atoms.text_contrast_low.color} size="sm" />
<Text style={[a.italic]}>
<Trans>Additional moderation may apply in your region.</Trans>
</Text>
</View>
)}
<Divider />
<Text
style={[
a.text_md,