forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Modernise thread/following feed settings screen (#4797)
* fix web
* show back button on tablet for certain settings screens
* move headers to inside of scrollview
---------
Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
authored by
Samuel Newman
Samuel Newman
and committed by
GitHub
8fe5ddfa
cfb8a316
+90
-148
+2
-2
src/view/screens/AccessibilitySettings.tsx
+2
-2
src/view/screens/AccessibilitySettings.tsx
···
36
36
const pal = usePalette('default')
37
37
const setMinimalShellMode = useSetMinimalShellMode()
38
38
const {screen} = useAnalytics()
39
-
const {isMobile} = useWebMediaQueries()
39
+
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
40
40
const {_} = useLingui()
41
41
42
42
const requireAltTextEnabled = useRequireAltTextEnabled()
···
58
58
return (
59
59
<View style={s.hContentRegion} testID="accessibilitySettingsScreen">
60
60
<SimpleViewHeader
61
-
showBackButton={isMobile}
61
+
showBackButton={isTabletOrMobile}
62
62
style={[
63
63
pal.border,
64
64
{borderBottomWidth: 1},
+15
-18
src/view/screens/PreferencesExternalEmbeds.tsx
+15
-18
src/view/screens/PreferencesExternalEmbeds.tsx
···
30
30
const pal = usePalette('default')
31
31
const setMinimalShellMode = useSetMinimalShellMode()
32
32
const {screen} = useAnalytics()
33
-
const {isMobile} = useWebMediaQueries()
33
+
const {isTabletOrMobile} = useWebMediaQueries()
34
34
35
35
useFocusEffect(
36
36
React.useCallback(() => {
···
41
41
42
42
return (
43
43
<View style={s.hContentRegion} testID="preferencesExternalEmbedsScreen">
44
-
<SimpleViewHeader
45
-
showBackButton={isMobile}
46
-
style={[
47
-
pal.border,
48
-
{borderBottomWidth: 1},
49
-
!isMobile && {borderLeftWidth: 1, borderRightWidth: 1},
50
-
]}>
51
-
<View style={{flex: 1}}>
52
-
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
53
-
<Trans>External Media Preferences</Trans>
54
-
</Text>
55
-
<Text style={pal.textLight}>
56
-
<Trans>Customize media from external sites.</Trans>
57
-
</Text>
58
-
</View>
59
-
</SimpleViewHeader>
60
44
<ScrollView
61
45
// @ts-ignore web only -prf
62
46
dataSet={{'stable-gutters': 1}}
63
-
contentContainerStyle={[pal.viewLight, {paddingBottom: 200}]}>
47
+
contentContainerStyle={[pal.viewLight, {paddingBottom: 75}]}>
48
+
<SimpleViewHeader
49
+
showBackButton={isTabletOrMobile}
50
+
style={[pal.border, {borderBottomWidth: 1}]}>
51
+
<View style={{flex: 1}}>
52
+
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
53
+
<Trans>External Media Preferences</Trans>
54
+
</Text>
55
+
<Text style={pal.textLight}>
56
+
<Trans>Customize media from external sites.</Trans>
57
+
</Text>
58
+
</View>
59
+
</SimpleViewHeader>
60
+
64
61
<View style={[pal.view]}>
65
62
<View style={styles.infoCard}>
66
63
<Text style={pal.text}>
+34
-59
src/view/screens/PreferencesFollowingFeed.tsx
+34
-59
src/view/screens/PreferencesFollowingFeed.tsx
···
1
1
import React, {useState} from 'react'
2
-
import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
2
+
import {StyleSheet, View} from 'react-native'
3
3
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
4
4
import {msg, Plural, Trans} from '@lingui/macro'
5
5
import {useLingui} from '@lingui/react'
6
6
import {Slider} from '@miblanchard/react-native-slider'
7
7
import debounce from 'lodash.debounce'
8
8
9
+
import {usePalette} from '#/lib/hooks/usePalette'
10
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
11
+
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
12
+
import {colors, s} from '#/lib/styles'
13
+
import {isWeb} from '#/platform/detection'
9
14
import {
10
15
usePreferencesQuery,
11
16
useSetFeedViewPreferencesMutation,
12
17
} from '#/state/queries/preferences'
13
-
import {usePalette} from 'lib/hooks/usePalette'
14
-
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
15
-
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
16
-
import {colors, s} from 'lib/styles'
17
-
import {isWeb} from 'platform/detection'
18
-
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
19
-
import {ViewHeader} from 'view/com/util/ViewHeader'
20
-
import {CenteredView} from 'view/com/util/Views'
21
-
import {Text} from '../com/util/text/Text'
18
+
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
19
+
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
20
+
import {Text} from '#/view/com/util/text/Text'
21
+
import {ScrollView} from '#/view/com/util/Views'
22
22
23
23
function RepliesThresholdInput({
24
24
enabled,
···
79
79
CommonNavigatorParams,
80
80
'PreferencesFollowingFeed'
81
81
>
82
-
export function PreferencesFollowingFeed({navigation}: Props) {
82
+
export function PreferencesFollowingFeed({}: Props) {
83
83
const pal = usePalette('default')
84
84
const {_} = useLingui()
85
-
const {isTabletOrDesktop} = useWebMediaQueries()
85
+
const {isTabletOrMobile} = useWebMediaQueries()
86
86
const {data: preferences} = usePreferencesQuery()
87
87
const {mutate: setFeedViewPref, variables} =
88
88
useSetFeedViewPreferencesMutation()
···
92
92
)
93
93
94
94
return (
95
-
<CenteredView
96
-
testID="preferencesHomeFeedScreen"
97
-
style={[
98
-
pal.view,
99
-
pal.border,
100
-
styles.container,
101
-
isTabletOrDesktop && styles.desktopContainer,
102
-
]}>
103
-
<ViewHeader title={_(msg`Following Feed Preferences`)} showOnDesktop />
104
-
<View
105
-
style={[
106
-
styles.titleSection,
107
-
isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20},
108
-
]}>
109
-
<Text type="xl" style={[pal.textLight, styles.description]}>
110
-
<Trans>Fine-tune the content you see on your Following feed.</Trans>
111
-
</Text>
112
-
</View>
113
-
114
-
<ScrollView>
95
+
<View testID="preferencesHomeFeedScreen" style={s.hContentRegion}>
96
+
<ScrollView
97
+
// @ts-ignore web only -sfn
98
+
dataSet={{'stable-gutters': 1}}
99
+
contentContainerStyle={{paddingBottom: 75}}>
100
+
<SimpleViewHeader
101
+
showBackButton={isTabletOrMobile}
102
+
style={[pal.border, {borderBottomWidth: 1}]}>
103
+
<View style={{flex: 1}}>
104
+
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
105
+
<Trans>Following Feed Preferences</Trans>
106
+
</Text>
107
+
<Text style={pal.textLight}>
108
+
<Trans>
109
+
Fine-tune the content you see on your Following feed.
110
+
</Trans>
111
+
</Text>
112
+
</View>
113
+
</SimpleViewHeader>
115
114
<View style={styles.cardsContainer}>
116
115
<View style={[pal.viewLight, styles.card]}>
117
116
<Text type="title-sm" style={[pal.text, s.pb5]}>
···
253
252
254
253
<View style={[pal.viewLight, styles.card]}>
255
254
<Text type="title-sm" style={[pal.text, s.pb5]}>
256
-
<FontAwesomeIcon icon="flask" color={pal.colors.text} />
255
+
<FontAwesomeIcon icon="flask" color={pal.colors.text} />{' '}
257
256
<Trans>Show Posts from My Feeds</Trans>
258
257
</Text>
259
258
<Text style={[pal.text, s.pb10]}>
···
288
287
</View>
289
288
</View>
290
289
</ScrollView>
291
-
292
-
<View
293
-
style={[
294
-
styles.btnContainer,
295
-
!isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20},
296
-
pal.border,
297
-
]}>
298
-
<TouchableOpacity
299
-
testID="confirmBtn"
300
-
onPress={() => {
301
-
navigation.canGoBack()
302
-
? navigation.goBack()
303
-
: navigation.navigate('Settings')
304
-
}}
305
-
style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]}
306
-
accessibilityRole="button"
307
-
accessibilityLabel={_(msg`Confirm`)}
308
-
accessibilityHint="">
309
-
<Text style={[s.white, s.bold, s.f18]}>
310
-
<Trans>Done</Trans>
311
-
</Text>
312
-
</TouchableOpacity>
313
-
</View>
314
-
</CenteredView>
290
+
</View>
315
291
)
316
292
}
317
293
318
294
const styles = StyleSheet.create({
319
295
container: {
320
296
flex: 1,
321
-
paddingBottom: 90,
322
297
},
323
298
desktopContainer: {
324
299
borderLeftWidth: 1,
325
300
borderRightWidth: 1,
326
-
paddingBottom: 40,
327
301
},
328
302
titleSection: {
329
303
paddingBottom: 30,
···
338
312
},
339
313
cardsContainer: {
340
314
paddingHorizontal: 20,
315
+
paddingVertical: 16,
341
316
},
342
317
card: {
343
318
padding: 16,
+39
-69
src/view/screens/PreferencesThreads.tsx
+39
-69
src/view/screens/PreferencesThreads.tsx
···
1
1
import React from 'react'
2
-
import {
3
-
ActivityIndicator,
4
-
ScrollView,
5
-
StyleSheet,
6
-
TouchableOpacity,
7
-
View,
8
-
} from 'react-native'
2
+
import {ActivityIndicator, StyleSheet, View} from 'react-native'
9
3
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10
-
import {Text} from '../com/util/text/Text'
11
-
import {s, colors} from 'lib/styles'
12
-
import {usePalette} from 'lib/hooks/usePalette'
13
-
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
14
-
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
15
-
import {RadioGroup} from 'view/com/util/forms/RadioGroup'
16
-
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
17
-
import {ViewHeader} from 'view/com/util/ViewHeader'
18
-
import {CenteredView} from 'view/com/util/Views'
19
-
import {Trans, msg} from '@lingui/macro'
4
+
import {msg, Trans} from '@lingui/macro'
20
5
import {useLingui} from '@lingui/react'
6
+
7
+
import {usePalette} from '#/lib/hooks/usePalette'
8
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
9
+
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
10
+
import {colors, s} from '#/lib/styles'
21
11
import {
22
12
usePreferencesQuery,
23
13
useSetThreadViewPreferencesMutation,
24
14
} from '#/state/queries/preferences'
15
+
import {RadioGroup} from '#/view/com/util/forms/RadioGroup'
16
+
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
17
+
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
18
+
import {Text} from '#/view/com/util/text/Text'
19
+
import {ScrollView} from '#/view/com/util/Views'
20
+
import {atoms as a} from '#/alf'
25
21
26
22
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
27
-
export function PreferencesThreads({navigation}: Props) {
23
+
export function PreferencesThreads({}: Props) {
28
24
const pal = usePalette('default')
29
25
const {_} = useLingui()
30
-
const {isTabletOrDesktop} = useWebMediaQueries()
26
+
const {isTabletOrMobile} = useWebMediaQueries()
31
27
const {data: preferences} = usePreferencesQuery()
32
28
const {mutate: setThreadViewPrefs, variables} =
33
29
useSetThreadViewPreferencesMutation()
···
42
38
)
43
39
44
40
return (
45
-
<CenteredView
46
-
testID="preferencesThreadsScreen"
47
-
style={[
48
-
pal.view,
49
-
pal.border,
50
-
styles.container,
51
-
isTabletOrDesktop && styles.desktopContainer,
52
-
]}>
53
-
<ViewHeader title={_(msg`Thread Preferences`)} showOnDesktop />
54
-
<View
55
-
style={[
56
-
styles.titleSection,
57
-
isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20},
58
-
]}>
59
-
<Text type="xl" style={[pal.textLight, styles.description]}>
60
-
<Trans>Fine-tune the discussion threads.</Trans>
61
-
</Text>
62
-
</View>
41
+
<View testID="preferencesThreadsScreen" style={s.hContentRegion}>
42
+
<ScrollView
43
+
// @ts-ignore web only -prf
44
+
dataSet={{'stable-gutters': 1}}
45
+
contentContainerStyle={{paddingBottom: 75}}>
46
+
<SimpleViewHeader
47
+
showBackButton={isTabletOrMobile}
48
+
style={[pal.border, {borderBottomWidth: 1}]}>
49
+
<View style={{flex: 1}}>
50
+
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
51
+
<Trans>Thread Preferences</Trans>
52
+
</Text>
53
+
<Text style={pal.textLight}>
54
+
<Trans>Fine-tune the discussion threads.</Trans>
55
+
</Text>
56
+
</View>
57
+
</SimpleViewHeader>
63
58
64
-
{preferences ? (
65
-
<ScrollView>
59
+
{preferences ? (
66
60
<View style={styles.cardsContainer}>
67
61
<View style={[pal.viewLight, styles.card]}>
68
62
<Text type="title-sm" style={[pal.text, s.pb5]}>
···
136
130
/>
137
131
</View>
138
132
</View>
139
-
</ScrollView>
140
-
) : (
141
-
<ActivityIndicator />
142
-
)}
143
-
144
-
<View
145
-
style={[
146
-
styles.btnContainer,
147
-
!isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20},
148
-
pal.border,
149
-
]}>
150
-
<TouchableOpacity
151
-
testID="confirmBtn"
152
-
onPress={() => {
153
-
navigation.canGoBack()
154
-
? navigation.goBack()
155
-
: navigation.navigate('Settings')
156
-
}}
157
-
style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]}
158
-
accessibilityRole="button"
159
-
accessibilityLabel={_(msg`Confirm`)}
160
-
accessibilityHint="">
161
-
<Text style={[s.white, s.bold, s.f18]}>
162
-
<Trans context="action">Done</Trans>
163
-
</Text>
164
-
</TouchableOpacity>
165
-
</View>
166
-
</CenteredView>
133
+
) : (
134
+
<ActivityIndicator style={a.flex_1} />
135
+
)}
136
+
</ScrollView>
137
+
</View>
167
138
)
168
139
}
169
140
170
141
const styles = StyleSheet.create({
171
142
container: {
172
143
flex: 1,
173
-
paddingBottom: 90,
174
144
},
175
145
desktopContainer: {
176
146
borderLeftWidth: 1,
177
147
borderRightWidth: 1,
178
-
paddingBottom: 40,
179
148
},
180
149
titleSection: {
181
150
paddingBottom: 30,
···
190
159
},
191
160
cardsContainer: {
192
161
paddingHorizontal: 20,
162
+
paddingVertical: 16,
193
163
},
194
164
card: {
195
165
padding: 16,