Improve the post-hiders and the header alerts (#2074)

* Improve the post-hider and the header alerts

* Adjust the contenthider (icon, font size)
zio/stable
Paul Frazee 2023-12-04 12:51:08 -08:00 committed by GitHub
parent 971c402788
commit a46059ca46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 102 additions and 66 deletions

View File

@ -426,7 +426,11 @@ let PostThreadItemLoaded = ({
testID={`postThreadItem-by-${post.author.handle}`}
href={postHref}
style={[pal.view]}
moderation={moderation.content}>
moderation={moderation.content}
iconSize={isThreadedChild ? 26 : 38}
iconStyles={
isThreadedChild ? {marginRight: 4} : {marginLeft: 2, marginRight: 2}
}>
<PostSandboxWarning />
<View

View File

@ -1,7 +1,7 @@
import React from 'react'
import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {ModerationUI} from '@atproto/api'
import {Text} from '../text/Text'
import {ShieldExclamation} from 'lib/icons'
@ -26,7 +26,6 @@ export function ContentHider({
}>) {
const pal = usePalette('default')
const {_} = useLingui()
const {isMobile} = useWebMediaQueries()
const [override, setOverride] = React.useState(false)
const {openModal} = useModalControls()
@ -38,6 +37,7 @@ export function ContentHider({
)
}
const isMute = moderation.cause.type === 'muted'
const desc = describeModerationCause(moderation.cause, 'content')
return (
<View testID={testID} style={[styles.outer, style]}>
@ -58,7 +58,6 @@ export function ContentHider({
accessibilityLabel=""
style={[
styles.cover,
{paddingRight: isMobile ? 22 : 18},
moderation.noOverride
? {borderWidth: 1, borderColor: pal.colors.borderDark}
: pal.viewLight,
@ -74,14 +73,22 @@ export function ContentHider({
accessibilityRole="button"
accessibilityLabel={_(msg`Learn more about this warning`)}
accessibilityHint="">
<ShieldExclamation size={18} style={pal.text} />
{isMute ? (
<FontAwesomeIcon
icon={['far', 'eye-slash']}
size={18}
color={pal.colors.textLight}
/>
) : (
<ShieldExclamation size={18} style={pal.textLight} />
)}
</Pressable>
<Text type="lg" style={pal.text}>
<Text type="md" style={pal.text}>
{desc.name}
</Text>
{!moderation.noOverride && (
<View style={styles.showBtn}>
<Text type="xl" style={pal.link}>
<Text type="lg" style={pal.link}>
{override ? 'Hide' : 'Show'}
</Text>
</View>
@ -104,6 +111,7 @@ const styles = StyleSheet.create({
marginTop: 4,
paddingVertical: 14,
paddingLeft: 14,
paddingRight: 18,
},
showBtn: {
marginLeft: 'auto',

View File

@ -1,8 +1,8 @@
import React, {ComponentProps} from 'react'
import {StyleSheet, Pressable, View} from 'react-native'
import {StyleSheet, Pressable, View, ViewStyle, StyleProp} from 'react-native'
import {ModerationUI} from '@atproto/api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {Link} from '../Link'
import {Text} from '../text/Text'
import {addStyle} from 'lib/styles'
@ -13,9 +13,8 @@ import {msg} from '@lingui/macro'
import {useModalControls} from '#/state/modals'
interface Props extends ComponentProps<typeof Link> {
// testID?: string
// href?: string
// style: StyleProp<ViewStyle>
iconSize: number
iconStyles: StyleProp<ViewStyle>
moderation: ModerationUI
}
@ -25,11 +24,12 @@ export function PostHider({
moderation,
style,
children,
iconSize,
iconStyles,
...props
}: Props) {
const pal = usePalette('default')
const {_} = useLingui()
const {isMobile} = useWebMediaQueries()
const [override, setOverride] = React.useState(false)
const {openModal} = useModalControls()
@ -47,57 +47,74 @@ export function PostHider({
)
}
const isMute = moderation.cause.type === 'muted'
const desc = describeModerationCause(moderation.cause, 'content')
return (
<>
return !override ? (
<Pressable
onPress={() => {
if (!moderation.noOverride) {
setOverride(v => !v)
}
}}
accessibilityRole="button"
accessibilityHint={override ? 'Hide the content' : 'Show the content'}
accessibilityLabel=""
style={[
styles.description,
override ? {paddingBottom: 0} : undefined,
pal.view,
]}>
<Pressable
onPress={() => {
if (!moderation.noOverride) {
setOverride(v => !v)
}
openModal({
name: 'moderation-details',
context: 'content',
moderation,
})
}}
accessibilityRole="button"
accessibilityHint={override ? 'Hide the content' : 'Show the content'}
accessibilityLabel=""
style={[
styles.description,
{paddingRight: isMobile ? 22 : 18},
pal.viewLight,
]}>
<Pressable
onPress={() => {
openModal({
name: 'moderation-details',
context: 'content',
moderation,
})
}}
accessibilityRole="button"
accessibilityLabel={_(msg`Learn more about this warning`)}
accessibilityHint="">
<ShieldExclamation size={18} style={pal.text} />
</Pressable>
<Text type="lg" style={[{flex: 1}, pal.text]} numberOfLines={1}>
{desc.name}
</Text>
{!moderation.noOverride && (
<Text type="xl" style={[styles.showBtn, pal.link]}>
{override ? 'Hide' : 'Show'}
</Text>
)}
</Pressable>
{override && (
<View style={[styles.childrenContainer, pal.border, pal.viewLight]}>
<Link
testID={testID}
style={addStyle(style, styles.child)}
href={href}
noFeedback>
{children}
</Link>
accessibilityLabel={_(msg`Learn more about this warning`)}
accessibilityHint="">
<View
style={[
pal.viewLight,
{
width: iconSize,
height: iconSize,
borderRadius: iconSize,
alignItems: 'center',
justifyContent: 'center',
},
iconStyles,
]}>
{isMute ? (
<FontAwesomeIcon
icon={['far', 'eye-slash']}
size={14}
color={pal.colors.textLight}
/>
) : (
<ShieldExclamation size={14} style={pal.textLight} />
)}
</View>
</Pressable>
<Text type="sm" style={[{flex: 1}, pal.textLight]} numberOfLines={1}>
{desc.name}
</Text>
{!moderation.noOverride && (
<Text type="sm" style={[styles.showBtn, pal.link]}>
{override ? 'Hide' : 'Show'}
</Text>
)}
</>
</Pressable>
) : (
<Link
testID={testID}
style={addStyle(style, styles.child)}
href={href}
noFeedback>
{children}
</Link>
)
}
@ -106,18 +123,15 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
gap: 4,
paddingVertical: 14,
paddingLeft: 18,
paddingVertical: 10,
paddingLeft: 6,
paddingRight: 18,
marginTop: 1,
},
showBtn: {
marginLeft: 'auto',
alignSelf: 'center',
},
childrenContainer: {
paddingHorizontal: 4,
paddingBottom: 6,
},
child: {
borderWidth: 0,
borderTopWidth: 0,

View File

@ -10,6 +10,7 @@ import {
} from 'lib/moderation'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useModalControls} from '#/state/modals'
export function ProfileHeaderAlerts({
@ -31,6 +32,7 @@ export function ProfileHeaderAlerts({
return (
<View style={styles.grid}>
{causes.map(cause => {
const isMute = cause.type === 'muted'
const desc = describeModerationCause(cause, 'account')
return (
<Pressable
@ -47,11 +49,19 @@ export function ProfileHeaderAlerts({
accessibilityLabel={_(msg`Learn more about this warning`)}
accessibilityHint=""
style={[styles.container, pal.viewLight, style]}>
<ShieldExclamation style={pal.text} size={24} />
<Text type="lg" style={[{flex: 1}, pal.text]}>
{isMute ? (
<FontAwesomeIcon
icon={['far', 'eye-slash']}
size={14}
color={pal.colors.textLight}
/>
) : (
<ShieldExclamation style={pal.text} size={18} />
)}
<Text type="sm" style={[{flex: 1}, pal.text]}>
{desc.name}
</Text>
<Text type="lg" style={[pal.link, styles.learnMoreBtn]}>
<Text type="sm" style={[pal.link, styles.learnMoreBtn]}>
<Trans>Learn More</Trans>
</Text>
</Pressable>