zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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>
zio/stable
Samuel Newman 2024-07-24 20:40:06 +01:00 committed by GitHub
parent cfb8a3160e
commit 8fe5ddfa49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 90 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/view/screens/AccessibilitySettings.tsx
View File

@ -36,7 +36,7 @@ export function AccessibilitySettingsScreen({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const {isMobile} = useWebMediaQueries() const {isMobile, isTabletOrMobile} = useWebMediaQueries()
const {_} = useLingui() const {_} = useLingui()
const requireAltTextEnabled = useRequireAltTextEnabled() const requireAltTextEnabled = useRequireAltTextEnabled()
@ -58,7 +58,7 @@ export function AccessibilitySettingsScreen({}: Props) {
return ( return (
<View style={s.hContentRegion} testID="accessibilitySettingsScreen"> <View style={s.hContentRegion} testID="accessibilitySettingsScreen">
<SimpleViewHeader <SimpleViewHeader
showBackButton={isMobile} showBackButton={isTabletOrMobile}
style={[ style={[
pal.border, pal.border,
{borderBottomWidth: 1}, {borderBottomWidth: 1},

33
src/view/screens/PreferencesExternalEmbeds.tsx
View File

@ -30,7 +30,7 @@ export function PreferencesExternalEmbeds({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const {isMobile} = useWebMediaQueries() const {isTabletOrMobile} = useWebMediaQueries()
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
@ -41,26 +41,23 @@ export function PreferencesExternalEmbeds({}: Props) {
return ( return (
<View style={s.hContentRegion} testID="preferencesExternalEmbedsScreen"> <View style={s.hContentRegion} testID="preferencesExternalEmbedsScreen">
<SimpleViewHeader
showBackButton={isMobile}
style={[
pal.border,
{borderBottomWidth: 1},
!isMobile && {borderLeftWidth: 1, borderRightWidth: 1},
]}>
<View style={{flex: 1}}>
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
<Trans>External Media Preferences</Trans>
</Text>
<Text style={pal.textLight}>
<Trans>Customize media from external sites.</Trans>
</Text>
</View>
</SimpleViewHeader>
<ScrollView <ScrollView
// @ts-ignore web only -prf // @ts-ignore web only -prf
dataSet={{'stable-gutters': 1}} dataSet={{'stable-gutters': 1}}
contentContainerStyle={[pal.viewLight, {paddingBottom: 200}]}> contentContainerStyle={[pal.viewLight, {paddingBottom: 75}]}>
<SimpleViewHeader
showBackButton={isTabletOrMobile}
style={[pal.border, {borderBottomWidth: 1}]}>
<View style={{flex: 1}}>
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
<Trans>External Media Preferences</Trans>
</Text>
<Text style={pal.textLight}>
<Trans>Customize media from external sites.</Trans>
</Text>
</View>
</SimpleViewHeader>
<View style={[pal.view]}> <View style={[pal.view]}>
<View style={styles.infoCard}> <View style={styles.infoCard}>
<Text style={pal.text}> <Text style={pal.text}>

93
src/view/screens/PreferencesFollowingFeed.tsx
View File

@ -1,24 +1,24 @@
import React, {useState} from 'react' import React, {useState} from 'react'
import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' import {StyleSheet, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg, Plural, Trans} from '@lingui/macro' import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {Slider} from '@miblanchard/react-native-slider' import {Slider} from '@miblanchard/react-native-slider'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
import {colors, s} from '#/lib/styles'
import {isWeb} from '#/platform/detection'
import { import {
usePreferencesQuery, usePreferencesQuery,
useSetFeedViewPreferencesMutation, useSetFeedViewPreferencesMutation,
} from '#/state/queries/preferences' } from '#/state/queries/preferences'
import {usePalette} from 'lib/hooks/usePalette' import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {Text} from '#/view/com/util/text/Text'
import {colors, s} from 'lib/styles' import {ScrollView} from '#/view/com/util/Views'
import {isWeb} from 'platform/detection'
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
import {ViewHeader} from 'view/com/util/ViewHeader'
import {CenteredView} from 'view/com/util/Views'
import {Text} from '../com/util/text/Text'
function RepliesThresholdInput({ function RepliesThresholdInput({
enabled, enabled,
@ -79,10 +79,10 @@ type Props = NativeStackScreenProps<
CommonNavigatorParams, CommonNavigatorParams,
'PreferencesFollowingFeed' 'PreferencesFollowingFeed'
> >
export function PreferencesFollowingFeed({navigation}: Props) { export function PreferencesFollowingFeed({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const {isTabletOrDesktop} = useWebMediaQueries() const {isTabletOrMobile} = useWebMediaQueries()
const {data: preferences} = usePreferencesQuery() const {data: preferences} = usePreferencesQuery()
const {mutate: setFeedViewPref, variables} = const {mutate: setFeedViewPref, variables} =
useSetFeedViewPreferencesMutation() useSetFeedViewPreferencesMutation()
@ -92,26 +92,25 @@ export function PreferencesFollowingFeed({navigation}: Props) {
) )
return ( return (
<CenteredView <View testID="preferencesHomeFeedScreen" style={s.hContentRegion}>
testID="preferencesHomeFeedScreen" <ScrollView
style={[ // @ts-ignore web only -sfn
pal.view, dataSet={{'stable-gutters': 1}}
pal.border, contentContainerStyle={{paddingBottom: 75}}>
styles.container, <SimpleViewHeader
isTabletOrDesktop && styles.desktopContainer, showBackButton={isTabletOrMobile}
]}> style={[pal.border, {borderBottomWidth: 1}]}>
<ViewHeader title={_(msg`Following Feed Preferences`)} showOnDesktop /> <View style={{flex: 1}}>
<View <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
style={[ <Trans>Following Feed Preferences</Trans>
styles.titleSection, </Text>
isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, <Text style={pal.textLight}>
]}> <Trans>
<Text type="xl" style={[pal.textLight, styles.description]}> Fine-tune the content you see on your Following feed.
<Trans>Fine-tune the content you see on your Following feed.</Trans> </Trans>
</Text> </Text>
</View> </View>
</SimpleViewHeader>
<ScrollView>
<View style={styles.cardsContainer}> <View style={styles.cardsContainer}>
<View style={[pal.viewLight, styles.card]}> <View style={[pal.viewLight, styles.card]}>
<Text type="title-sm" style={[pal.text, s.pb5]}> <Text type="title-sm" style={[pal.text, s.pb5]}>
@ -253,7 +252,7 @@ export function PreferencesFollowingFeed({navigation}: Props) {
<View style={[pal.viewLight, styles.card]}> <View style={[pal.viewLight, styles.card]}>
<Text type="title-sm" style={[pal.text, s.pb5]}> <Text type="title-sm" style={[pal.text, s.pb5]}>
<FontAwesomeIcon icon="flask" color={pal.colors.text} /> <FontAwesomeIcon icon="flask" color={pal.colors.text} />{' '}
<Trans>Show Posts from My Feeds</Trans> <Trans>Show Posts from My Feeds</Trans>
</Text> </Text>
<Text style={[pal.text, s.pb10]}> <Text style={[pal.text, s.pb10]}>
@ -288,42 +287,17 @@ export function PreferencesFollowingFeed({navigation}: Props) {
</View> </View>
</View> </View>
</ScrollView> </ScrollView>
</View>
<View
style={[
styles.btnContainer,
!isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20},
pal.border,
]}>
<TouchableOpacity
testID="confirmBtn"
onPress={() => {
navigation.canGoBack()
? navigation.goBack()
: navigation.navigate('Settings')
}}
style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]}
accessibilityRole="button"
accessibilityLabel={_(msg`Confirm`)}
accessibilityHint="">
<Text style={[s.white, s.bold, s.f18]}>
<Trans>Done</Trans>
</Text>
</TouchableOpacity>
</View>
</CenteredView>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
paddingBottom: 90,
}, },
desktopContainer: { desktopContainer: {
borderLeftWidth: 1, borderLeftWidth: 1,
borderRightWidth: 1, borderRightWidth: 1,
paddingBottom: 40,
}, },
titleSection: { titleSection: {
paddingBottom: 30, paddingBottom: 30,
@ -338,6 +312,7 @@ const styles = StyleSheet.create({
}, },
cardsContainer: { cardsContainer: {
paddingHorizontal: 20, paddingHorizontal: 20,
paddingVertical: 16,
}, },
card: { card: {
padding: 16, padding: 16,

108
src/view/screens/PreferencesThreads.tsx
View File

@ -1,33 +1,29 @@
import React from 'react' import React from 'react'
import { import {ActivityIndicator, StyleSheet, View} from 'react-native'
ActivityIndicator,
ScrollView,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../com/util/text/Text' import {msg, Trans} from '@lingui/macro'
import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
import {RadioGroup} from 'view/com/util/forms/RadioGroup'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {ViewHeader} from 'view/com/util/ViewHeader'
import {CenteredView} from 'view/com/util/Views'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
import {colors, s} from '#/lib/styles'
import { import {
usePreferencesQuery, usePreferencesQuery,
useSetThreadViewPreferencesMutation, useSetThreadViewPreferencesMutation,
} from '#/state/queries/preferences' } from '#/state/queries/preferences'
import {RadioGroup} from '#/view/com/util/forms/RadioGroup'
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
import {Text} from '#/view/com/util/text/Text'
import {ScrollView} from '#/view/com/util/Views'
import {atoms as a} from '#/alf'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
export function PreferencesThreads({navigation}: Props) { export function PreferencesThreads({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const {isTabletOrDesktop} = useWebMediaQueries() const {isTabletOrMobile} = useWebMediaQueries()
const {data: preferences} = usePreferencesQuery() const {data: preferences} = usePreferencesQuery()
const {mutate: setThreadViewPrefs, variables} = const {mutate: setThreadViewPrefs, variables} =
useSetThreadViewPreferencesMutation() useSetThreadViewPreferencesMutation()
@ -42,27 +38,25 @@ export function PreferencesThreads({navigation}: Props) {
) )
return ( return (
<CenteredView <View testID="preferencesThreadsScreen" style={s.hContentRegion}>
testID="preferencesThreadsScreen" <ScrollView
style={[ // @ts-ignore web only -prf
pal.view, dataSet={{'stable-gutters': 1}}
pal.border, contentContainerStyle={{paddingBottom: 75}}>
styles.container, <SimpleViewHeader
isTabletOrDesktop && styles.desktopContainer, showBackButton={isTabletOrMobile}
]}> style={[pal.border, {borderBottomWidth: 1}]}>
<ViewHeader title={_(msg`Thread Preferences`)} showOnDesktop /> <View style={{flex: 1}}>
<View <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
style={[ <Trans>Thread Preferences</Trans>
styles.titleSection, </Text>
isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, <Text style={pal.textLight}>
]}> <Trans>Fine-tune the discussion threads.</Trans>
<Text type="xl" style={[pal.textLight, styles.description]}> </Text>
<Trans>Fine-tune the discussion threads.</Trans> </View>
</Text> </SimpleViewHeader>
</View>
{preferences ? ( {preferences ? (
<ScrollView>
<View style={styles.cardsContainer}> <View style={styles.cardsContainer}>
<View style={[pal.viewLight, styles.card]}> <View style={[pal.viewLight, styles.card]}>
<Text type="title-sm" style={[pal.text, s.pb5]}> <Text type="title-sm" style={[pal.text, s.pb5]}>
@ -136,46 +130,21 @@ export function PreferencesThreads({navigation}: Props) {
/> />
</View> </View>
</View> </View>
</ScrollView> ) : (
) : ( <ActivityIndicator style={a.flex_1} />
<ActivityIndicator /> )}
)} </ScrollView>
</View>
<View
style={[
styles.btnContainer,
!isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20},
pal.border,
]}>
<TouchableOpacity
testID="confirmBtn"
onPress={() => {
navigation.canGoBack()
? navigation.goBack()
: navigation.navigate('Settings')
}}
style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]}
accessibilityRole="button"
accessibilityLabel={_(msg`Confirm`)}
accessibilityHint="">
<Text style={[s.white, s.bold, s.f18]}>
<Trans context="action">Done</Trans>
</Text>
</TouchableOpacity>
</View>
</CenteredView>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
paddingBottom: 90,
}, },
desktopContainer: { desktopContainer: {
borderLeftWidth: 1, borderLeftWidth: 1,
borderRightWidth: 1, borderRightWidth: 1,
paddingBottom: 40,
}, },
titleSection: { titleSection: {
paddingBottom: 30, paddingBottom: 30,
@ -190,6 +159,7 @@ const styles = StyleSheet.create({
}, },
cardsContainer: { cardsContainer: {
paddingHorizontal: 20, paddingHorizontal: 20,
paddingVertical: 16,
}, },
card: { card: {
padding: 16, padding: 16,