quilling.dev
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
+4
src/alf/index.tsx
+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
+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>