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
GitHub
parent
971c402788
commit
a46059ca46
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,9 +47,9 @@ export function PostHider({
|
|||
)
|
||||
}
|
||||
|
||||
const isMute = moderation.cause.type === 'muted'
|
||||
const desc = describeModerationCause(moderation.cause, 'content')
|
||||
return (
|
||||
<>
|
||||
return !override ? (
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
if (!moderation.noOverride) {
|
||||
|
|
@ -61,8 +61,8 @@ export function PostHider({
|
|||
accessibilityLabel=""
|
||||
style={[
|
||||
styles.description,
|
||||
{paddingRight: isMobile ? 22 : 18},
|
||||
pal.viewLight,
|
||||
override ? {paddingBottom: 0} : undefined,
|
||||
pal.view,
|
||||
]}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
|
|
@ -75,19 +75,39 @@ export function PostHider({
|
|||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Learn more about this warning`)}
|
||||
accessibilityHint="">
|
||||
<ShieldExclamation size={18} style={pal.text} />
|
||||
<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="lg" style={[{flex: 1}, pal.text]} numberOfLines={1}>
|
||||
<Text type="sm" style={[{flex: 1}, pal.textLight]} numberOfLines={1}>
|
||||
{desc.name}
|
||||
</Text>
|
||||
{!moderation.noOverride && (
|
||||
<Text type="xl" style={[styles.showBtn, pal.link]}>
|
||||
<Text type="sm" 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)}
|
||||
|
|
@ -95,9 +115,6 @@ export function PostHider({
|
|||
noFeedback>
|
||||
{children}
|
||||
</Link>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue