An ATproto social media client -- with an independent Appview.

Mobile mod label setting component (#3267)

* Mobile mod label setting component

* Bump label title size

* Dont show disabled label config on mobile

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

authored by

Eric Bailey
Paul Frazee
and committed by
GitHub
b622f639 877eab0f

+64 -37
+4
src/alf/index.tsx
··· 16 16 const breakpoints: { 17 17 [key: string]: number 18 18 } = { 19 + gtPhone: 500, 19 20 gtMobile: 800, 20 21 gtTablet: 1300, 21 22 } ··· 26 27 27 28 return { 28 29 active: active[active.length - 1], 30 + gtPhone: active.includes('gtPhone'), 29 31 gtMobile: active.includes('gtMobile'), 30 32 gtTablet: active.includes('gtTablet'), 31 33 } ··· 39 41 theme: themes.Theme 40 42 breakpoints: { 41 43 active: BreakpointName | undefined 44 + gtPhone: boolean 42 45 gtMobile: boolean 43 46 gtTablet: boolean 44 47 } ··· 47 50 theme: themes.light, 48 51 breakpoints: { 49 52 active: undefined, 53 + gtPhone: false, 50 54 gtMobile: false, 51 55 gtTablet: false, 52 56 },
+60 -37
src/components/moderation/ModerationLabelPref.tsx
··· 12 12 } from '#/state/queries/preferences' 13 13 import {getLabelStrings} from '#/lib/moderation/useLabelInfo' 14 14 15 - import {useTheme, atoms as a} from '#/alf' 15 + import {useTheme, atoms as a, useBreakpoints} from '#/alf' 16 16 import {Text} from '#/components/Typography' 17 17 import {InlineLink} from '#/components/Link' 18 18 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '../icons/CircleInfo' ··· 29 29 }) { 30 30 const {_, i18n} = useLingui() 31 31 const t = useTheme() 32 + const {gtPhone} = useBreakpoints() 32 33 33 34 const isGlobalLabel = !labelValueDefinition.definedBy 34 35 const {identifier} = labelValueDefinition ··· 57 58 adultOnly && !preferences?.moderationPrefs.adultContentEnabled 58 59 // are there any reasons we cant configure this label here? 59 60 const cantConfigure = isGlobalLabel || adultDisabled 61 + const showConfig = !disabled && (gtPhone || !cantConfigure) 60 62 61 63 // adjust the pref based on whether warn is available 62 64 let prefAdjusted = pref ··· 85 87 ) 86 88 87 89 return ( 88 - <View style={[a.flex_row, a.gap_sm, a.px_lg, a.py_lg, a.justify_between]}> 90 + <View 91 + style={[ 92 + a.flex_row, 93 + a.gap_md, 94 + a.px_lg, 95 + a.py_lg, 96 + a.justify_between, 97 + a.flex_wrap, 98 + ]}> 89 99 <View style={[a.gap_xs, a.flex_1]}> 90 - <Text style={[a.font_bold]}>{labelStrings.name}</Text> 100 + <Text style={[a.font_bold, gtPhone ? a.text_sm : a.text_md]}> 101 + {labelStrings.name} 102 + </Text> 91 103 <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}> 92 104 {labelStrings.description} 93 105 </Text> ··· 113 125 </View> 114 126 )} 115 127 </View> 116 - {disabled ? ( 117 - <></> 118 - ) : cantConfigure ? ( 119 - <View style={[{minHeight: 35}, a.px_sm, a.py_md]}> 120 - <Text style={[a.font_bold, t.atoms.text_contrast_medium]}> 121 - {currentPrefLabel} 122 - </Text> 123 - </View> 124 - ) : ( 125 - <View style={[{minHeight: 35}]}> 126 - <ToggleButton.Group 127 - label={_( 128 - msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`, 129 - )} 130 - values={[prefAdjusted]} 131 - onChange={newPref => 132 - mutate({ 133 - label: identifier, 134 - visibility: newPref[0] as LabelPreference, 135 - labelerDid, 136 - }) 137 - }> 138 - <ToggleButton.Button name="ignore" label={ignoreLabel}> 139 - {ignoreLabel} 140 - </ToggleButton.Button> 141 - {canWarn && ( 142 - <ToggleButton.Button name="warn" label={warnLabel}> 143 - {warnLabel} 144 - </ToggleButton.Button> 145 - )} 146 - <ToggleButton.Button name="hide" label={hideLabel}> 147 - {hideLabel} 148 - </ToggleButton.Button> 149 - </ToggleButton.Group> 128 + 129 + {showConfig && ( 130 + <View style={[gtPhone ? undefined : a.w_full]}> 131 + {cantConfigure ? ( 132 + <View 133 + style={[ 134 + {minHeight: 35}, 135 + a.px_md, 136 + a.py_md, 137 + a.rounded_sm, 138 + a.border, 139 + t.atoms.border_contrast_low, 140 + ]}> 141 + <Text style={[a.font_bold, t.atoms.text_contrast_low]}> 142 + {currentPrefLabel} 143 + </Text> 144 + </View> 145 + ) : ( 146 + <View style={[{minHeight: 35}]}> 147 + <ToggleButton.Group 148 + label={_( 149 + msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`, 150 + )} 151 + values={[prefAdjusted]} 152 + onChange={newPref => 153 + mutate({ 154 + label: identifier, 155 + visibility: newPref[0] as LabelPreference, 156 + labelerDid, 157 + }) 158 + }> 159 + <ToggleButton.Button name="ignore" label={ignoreLabel}> 160 + {ignoreLabel} 161 + </ToggleButton.Button> 162 + {canWarn && ( 163 + <ToggleButton.Button name="warn" label={warnLabel}> 164 + {warnLabel} 165 + </ToggleButton.Button> 166 + )} 167 + <ToggleButton.Button name="hide" label={hideLabel}> 168 + {hideLabel} 169 + </ToggleButton.Button> 170 + </ToggleButton.Group> 171 + </View> 172 + )} 150 173 </View> 151 174 )} 152 175 </View>