Fix space on bottom of mod screen (#3266)
* Fix space on bottom of mod screen * fix PWI label overflow + center loader (#3268) --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>zio/stable
Eric Bailey
GitHub
parent
2a5b0ab2ac
commit
877eab0fe3
|
|
@ -205,19 +205,111 @@ export function ModerationScreenInner({
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View>
|
<ScrollView
|
||||||
<ScrollView
|
contentContainerStyle={[
|
||||||
contentContainerStyle={[
|
a.border_0,
|
||||||
a.border_0,
|
a.pt_2xl,
|
||||||
a.pt_2xl,
|
a.px_lg,
|
||||||
a.px_lg,
|
gtMobile && a.px_2xl,
|
||||||
gtMobile && a.px_2xl,
|
]}>
|
||||||
]}>
|
<Text
|
||||||
<Text
|
style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}>
|
||||||
style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}>
|
<Trans>Moderation tools</Trans>
|
||||||
<Trans>Moderation tools</Trans>
|
</Text>
|
||||||
</Text>
|
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.w_full,
|
||||||
|
a.rounded_md,
|
||||||
|
a.overflow_hidden,
|
||||||
|
t.atoms.bg_contrast_25,
|
||||||
|
]}>
|
||||||
|
<Button
|
||||||
|
testID="mutedWordsBtn"
|
||||||
|
label={_(msg`Open muted words and tags settings`)}
|
||||||
|
onPress={() => mutedWordsDialogControl.open()}>
|
||||||
|
{state => (
|
||||||
|
<SubItem
|
||||||
|
title={_(msg`Muted words & tags`)}
|
||||||
|
icon={Filter}
|
||||||
|
style={[
|
||||||
|
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Divider />
|
||||||
|
<Link testID="moderationlistsBtn" to="/moderation/modlists">
|
||||||
|
{state => (
|
||||||
|
<SubItem
|
||||||
|
title={_(msg`Moderation lists`)}
|
||||||
|
icon={Group}
|
||||||
|
style={[
|
||||||
|
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
<Divider />
|
||||||
|
<Link testID="mutedAccountsBtn" to="/moderation/muted-accounts">
|
||||||
|
{state => (
|
||||||
|
<SubItem
|
||||||
|
title={_(msg`Muted accounts`)}
|
||||||
|
icon={Person}
|
||||||
|
style={[
|
||||||
|
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
<Divider />
|
||||||
|
<Link testID="blockedAccountsBtn" to="/moderation/blocked-accounts">
|
||||||
|
{state => (
|
||||||
|
<SubItem
|
||||||
|
title={_(msg`Blocked accounts`)}
|
||||||
|
icon={CircleBanSign}
|
||||||
|
style={[
|
||||||
|
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
a.pt_2xl,
|
||||||
|
a.pb_md,
|
||||||
|
a.text_md,
|
||||||
|
a.font_bold,
|
||||||
|
t.atoms.text_contrast_high,
|
||||||
|
]}>
|
||||||
|
<Trans>Content filters</Trans>
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={[a.gap_md]}>
|
||||||
|
{ageNotSet && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
label={_(msg`Confirm your birthdate`)}
|
||||||
|
size="small"
|
||||||
|
variant="solid"
|
||||||
|
color="secondary"
|
||||||
|
onPress={() => {
|
||||||
|
birthdateDialogControl.open()
|
||||||
|
}}
|
||||||
|
style={[a.justify_between, a.rounded_md, a.px_lg, a.py_lg]}>
|
||||||
|
<ButtonText>
|
||||||
|
<Trans>Confirm your age:</Trans>
|
||||||
|
</ButtonText>
|
||||||
|
<ButtonText>
|
||||||
|
<Trans>Set birthdate</Trans>
|
||||||
|
</ButtonText>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<BirthDateSettingsDialog control={birthdateDialogControl} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
a.w_full,
|
a.w_full,
|
||||||
|
|
@ -225,231 +317,137 @@ export function ModerationScreenInner({
|
||||||
a.overflow_hidden,
|
a.overflow_hidden,
|
||||||
t.atoms.bg_contrast_25,
|
t.atoms.bg_contrast_25,
|
||||||
]}>
|
]}>
|
||||||
<Button
|
{!ageNotSet && !isUnderage && (
|
||||||
testID="mutedWordsBtn"
|
|
||||||
label={_(msg`Open muted words and tags settings`)}
|
|
||||||
onPress={() => mutedWordsDialogControl.open()}>
|
|
||||||
{state => (
|
|
||||||
<SubItem
|
|
||||||
title={_(msg`Muted words & tags`)}
|
|
||||||
icon={Filter}
|
|
||||||
style={[
|
|
||||||
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
<Divider />
|
|
||||||
<Link testID="moderationlistsBtn" to="/moderation/modlists">
|
|
||||||
{state => (
|
|
||||||
<SubItem
|
|
||||||
title={_(msg`Moderation lists`)}
|
|
||||||
icon={Group}
|
|
||||||
style={[
|
|
||||||
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
<Divider />
|
|
||||||
<Link testID="mutedAccountsBtn" to="/moderation/muted-accounts">
|
|
||||||
{state => (
|
|
||||||
<SubItem
|
|
||||||
title={_(msg`Muted accounts`)}
|
|
||||||
icon={Person}
|
|
||||||
style={[
|
|
||||||
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
<Divider />
|
|
||||||
<Link testID="blockedAccountsBtn" to="/moderation/blocked-accounts">
|
|
||||||
{state => (
|
|
||||||
<SubItem
|
|
||||||
title={_(msg`Blocked accounts`)}
|
|
||||||
icon={CircleBanSign}
|
|
||||||
style={[
|
|
||||||
(state.hovered || state.pressed) && [t.atoms.bg_contrast_50],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
a.pt_2xl,
|
|
||||||
a.pb_md,
|
|
||||||
a.text_md,
|
|
||||||
a.font_bold,
|
|
||||||
t.atoms.text_contrast_high,
|
|
||||||
]}>
|
|
||||||
<Trans>Content filters</Trans>
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<View style={[a.gap_md]}>
|
|
||||||
{ageNotSet && (
|
|
||||||
<>
|
<>
|
||||||
<Button
|
<View
|
||||||
label={_(msg`Confirm your birthdate`)}
|
style={[
|
||||||
size="small"
|
a.py_lg,
|
||||||
variant="solid"
|
a.px_lg,
|
||||||
color="secondary"
|
a.flex_row,
|
||||||
onPress={() => {
|
a.align_center,
|
||||||
birthdateDialogControl.open()
|
a.justify_between,
|
||||||
}}
|
]}>
|
||||||
style={[a.justify_between, a.rounded_md, a.px_lg, a.py_lg]}>
|
<Text style={[a.font_semibold, t.atoms.text_contrast_high]}>
|
||||||
<ButtonText>
|
<Trans>Enable adult content</Trans>
|
||||||
<Trans>Confirm your age:</Trans>
|
</Text>
|
||||||
</ButtonText>
|
<Toggle.Item
|
||||||
<ButtonText>
|
label={_(msg`Toggle to enable or disable adult content`)}
|
||||||
<Trans>Set birthdate</Trans>
|
name="adultContent"
|
||||||
</ButtonText>
|
value={adultContentEnabled}
|
||||||
</Button>
|
onChange={onToggleAdultContentEnabled}>
|
||||||
|
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
|
||||||
<BirthDateSettingsDialog control={birthdateDialogControl} />
|
<Text style={[t.atoms.text_contrast_medium]}>
|
||||||
|
{adultContentEnabled ? (
|
||||||
|
<Trans>Enabled</Trans>
|
||||||
|
) : (
|
||||||
|
<Trans>Disabled</Trans>
|
||||||
|
)}
|
||||||
|
</Text>
|
||||||
|
<Toggle.Switch />
|
||||||
|
</View>
|
||||||
|
</Toggle.Item>
|
||||||
|
</View>
|
||||||
|
<Divider />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<View
|
{!isUnderage && adultContentEnabled && (
|
||||||
style={[
|
<>
|
||||||
a.w_full,
|
<GlobalModerationLabelPref labelValueDefinition={LABELS.porn} />
|
||||||
a.rounded_md,
|
<Divider />
|
||||||
a.overflow_hidden,
|
<GlobalModerationLabelPref labelValueDefinition={LABELS.sexual} />
|
||||||
t.atoms.bg_contrast_25,
|
<Divider />
|
||||||
]}>
|
<GlobalModerationLabelPref
|
||||||
{!ageNotSet && !isUnderage && (
|
labelValueDefinition={LABELS['graphic-media']}
|
||||||
<>
|
/>
|
||||||
<View
|
<Divider />
|
||||||
style={[
|
</>
|
||||||
a.py_lg,
|
)}
|
||||||
a.px_lg,
|
<GlobalModerationLabelPref labelValueDefinition={LABELS.nudity} />
|
||||||
a.flex_row,
|
|
||||||
a.align_center,
|
|
||||||
a.justify_between,
|
|
||||||
]}>
|
|
||||||
<Text style={[a.font_semibold, t.atoms.text_contrast_high]}>
|
|
||||||
<Trans>Enable adult content</Trans>
|
|
||||||
</Text>
|
|
||||||
<Toggle.Item
|
|
||||||
label={_(msg`Toggle to enable or disable adult content`)}
|
|
||||||
name="adultContent"
|
|
||||||
value={adultContentEnabled}
|
|
||||||
onChange={onToggleAdultContentEnabled}>
|
|
||||||
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
|
|
||||||
<Text style={[t.atoms.text_contrast_medium]}>
|
|
||||||
{adultContentEnabled ? (
|
|
||||||
<Trans>Enabled</Trans>
|
|
||||||
) : (
|
|
||||||
<Trans>Disabled</Trans>
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
<Toggle.Switch />
|
|
||||||
</View>
|
|
||||||
</Toggle.Item>
|
|
||||||
</View>
|
|
||||||
<Divider />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{!isUnderage && adultContentEnabled && (
|
|
||||||
<>
|
|
||||||
<GlobalModerationLabelPref labelValueDefinition={LABELS.porn} />
|
|
||||||
<Divider />
|
|
||||||
<GlobalModerationLabelPref
|
|
||||||
labelValueDefinition={LABELS.sexual}
|
|
||||||
/>
|
|
||||||
<Divider />
|
|
||||||
<GlobalModerationLabelPref
|
|
||||||
labelValueDefinition={LABELS['graphic-media']}
|
|
||||||
/>
|
|
||||||
<Divider />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<GlobalModerationLabelPref labelValueDefinition={LABELS.nudity} />
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
<Text
|
<Text
|
||||||
style={[
|
style={[
|
||||||
a.text_md,
|
a.text_md,
|
||||||
a.font_bold,
|
a.font_bold,
|
||||||
a.pt_2xl,
|
a.pt_2xl,
|
||||||
a.pb_md,
|
a.pb_md,
|
||||||
t.atoms.text_contrast_high,
|
t.atoms.text_contrast_high,
|
||||||
]}>
|
]}>
|
||||||
<Trans>Advanced</Trans>
|
<Trans>Advanced</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
{isLabelersLoading ? (
|
{isLabelersLoading ? (
|
||||||
<Loader />
|
<View style={[a.w_full, a.align_center, a.p_lg]}>
|
||||||
) : labelersError || !labelers ? (
|
<Loader size="xl" />
|
||||||
<View style={[a.p_lg, a.rounded_sm, t.atoms.bg_contrast_25]}>
|
</View>
|
||||||
<Text>
|
) : labelersError || !labelers ? (
|
||||||
<Trans>
|
<View style={[a.p_lg, a.rounded_sm, t.atoms.bg_contrast_25]}>
|
||||||
We were unable to load your configured labelers at this time.
|
<Text>
|
||||||
</Trans>
|
<Trans>
|
||||||
</Text>
|
We were unable to load your configured labelers at this time.
|
||||||
</View>
|
</Trans>
|
||||||
) : (
|
</Text>
|
||||||
<View style={[a.rounded_sm, t.atoms.bg_contrast_25]}>
|
</View>
|
||||||
{labelers.map((labeler, i) => {
|
) : (
|
||||||
return (
|
<View style={[a.rounded_sm, t.atoms.bg_contrast_25]}>
|
||||||
<React.Fragment key={labeler.creator.did}>
|
{labelers.map((labeler, i) => {
|
||||||
{i !== 0 && <Divider />}
|
return (
|
||||||
<LabelingService.Link labeler={labeler}>
|
<React.Fragment key={labeler.creator.did}>
|
||||||
{state => (
|
{i !== 0 && <Divider />}
|
||||||
<LabelingService.Outer
|
<LabelingService.Link labeler={labeler}>
|
||||||
style={[
|
{state => (
|
||||||
i === 0 && {
|
<LabelingService.Outer
|
||||||
borderTopLeftRadius: a.rounded_sm.borderRadius,
|
style={[
|
||||||
borderTopRightRadius: a.rounded_sm.borderRadius,
|
i === 0 && {
|
||||||
},
|
borderTopLeftRadius: a.rounded_sm.borderRadius,
|
||||||
i === labelers.length - 1 && {
|
borderTopRightRadius: a.rounded_sm.borderRadius,
|
||||||
borderBottomLeftRadius: a.rounded_sm.borderRadius,
|
},
|
||||||
borderBottomRightRadius: a.rounded_sm.borderRadius,
|
i === labelers.length - 1 && {
|
||||||
},
|
borderBottomLeftRadius: a.rounded_sm.borderRadius,
|
||||||
(state.hovered || state.pressed) && [
|
borderBottomRightRadius: a.rounded_sm.borderRadius,
|
||||||
t.atoms.bg_contrast_50,
|
},
|
||||||
],
|
(state.hovered || state.pressed) && [
|
||||||
]}>
|
t.atoms.bg_contrast_50,
|
||||||
<LabelingService.Avatar />
|
],
|
||||||
<LabelingService.Content>
|
]}>
|
||||||
<LabelingService.Title
|
<LabelingService.Avatar />
|
||||||
value={getLabelingServiceTitle({
|
<LabelingService.Content>
|
||||||
displayName: labeler.creator.displayName,
|
<LabelingService.Title
|
||||||
handle: labeler.creator.handle,
|
value={getLabelingServiceTitle({
|
||||||
})}
|
displayName: labeler.creator.displayName,
|
||||||
/>
|
handle: labeler.creator.handle,
|
||||||
<LabelingService.Description
|
})}
|
||||||
value={labeler.creator.description}
|
/>
|
||||||
handle={labeler.creator.handle}
|
<LabelingService.Description
|
||||||
/>
|
value={labeler.creator.description}
|
||||||
</LabelingService.Content>
|
handle={labeler.creator.handle}
|
||||||
</LabelingService.Outer>
|
/>
|
||||||
)}
|
</LabelingService.Content>
|
||||||
</LabelingService.Link>
|
</LabelingService.Outer>
|
||||||
</React.Fragment>
|
)}
|
||||||
)
|
</LabelingService.Link>
|
||||||
})}
|
</React.Fragment>
|
||||||
</View>
|
)
|
||||||
)}
|
})}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
<Text
|
<Text
|
||||||
style={[
|
style={[
|
||||||
a.text_md,
|
a.text_md,
|
||||||
a.font_bold,
|
a.font_bold,
|
||||||
a.pt_2xl,
|
a.pt_2xl,
|
||||||
a.pb_md,
|
a.pb_md,
|
||||||
t.atoms.text_contrast_high,
|
t.atoms.text_contrast_high,
|
||||||
]}>
|
]}>
|
||||||
<Trans>Logged-out visibility</Trans>
|
<Trans>Logged-out visibility</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<PwiOptOut />
|
<PwiOptOut />
|
||||||
|
|
||||||
<View style={{height: 200}} />
|
<View style={{height: 200}} />
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</View>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -517,11 +515,12 @@ function PwiOptOut() {
|
||||||
value={isOptedOut}
|
value={isOptedOut}
|
||||||
onChange={onToggleOptOut}
|
onChange={onToggleOptOut}
|
||||||
name="logged_out_visibility"
|
name="logged_out_visibility"
|
||||||
|
style={a.flex_1}
|
||||||
label={_(
|
label={_(
|
||||||
msg`Discourage apps from showing my account to logged-out users`,
|
msg`Discourage apps from showing my account to logged-out users`,
|
||||||
)}>
|
)}>
|
||||||
<Toggle.Switch />
|
<Toggle.Switch />
|
||||||
<Toggle.Label style={[a.text_md]}>
|
<Toggle.Label style={[a.text_md, a.flex_1]}>
|
||||||
<Trans>
|
<Trans>
|
||||||
Discourage apps from showing my account to logged-out users
|
Discourage apps from showing my account to logged-out users
|
||||||
</Trans>
|
</Trans>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue