Move `PreferencesHomeFeed` to a screen instead of a modal (#1335)
* move `PreferencesHomeFeed` to a screen instead of a modal * add web route for home feed preferences * upgrade `@miblanchard/react-native-slider` to fix lint * fix web route naming * fix desktop web styling * add `react-native-slider` mockzio/stable
parent
a29f10aefe
commit
9446c67880
|
@ -0,0 +1 @@
|
|||
export const Slider = {}
|
|
@ -168,6 +168,7 @@ func serve(cctx *cli.Context) error {
|
|||
e.GET("/moderation/blocked-accounts", server.WebGeneric)
|
||||
e.GET("/settings", server.WebGeneric)
|
||||
e.GET("/settings/app-passwords", server.WebGeneric)
|
||||
e.GET("/settings/home-feed", server.WebGeneric)
|
||||
e.GET("/settings/saved-feeds", server.WebGeneric)
|
||||
e.GET("/sys/debug", server.WebGeneric)
|
||||
e.GET("/sys/log", server.WebGeneric)
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
"@fortawesome/react-native-fontawesome": "^0.3.0",
|
||||
"@gorhom/bottom-sheet": "^4.4.7",
|
||||
"@mattermost/react-native-paste-input": "^0.6.4",
|
||||
"@miblanchard/react-native-slider": "^2.2.0",
|
||||
"@miblanchard/react-native-slider": "^2.3.1",
|
||||
"@react-native-async-storage/async-storage": "^1.17.6",
|
||||
"@react-native-camera-roll/camera-roll": "^5.2.2",
|
||||
"@react-native-clipboard/clipboard": "^1.10.0",
|
||||
|
|
|
@ -67,6 +67,7 @@ import {getRoutingInstrumentation} from 'lib/sentry'
|
|||
import {bskyTitle} from 'lib/strings/headings'
|
||||
import {JSX} from 'react/jsx-runtime'
|
||||
import {timeout} from 'lib/async/timeout'
|
||||
import {PreferencesHomeFeed} from 'view/screens/PreferencesHomeFeed'
|
||||
|
||||
const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
|
||||
|
||||
|
@ -219,6 +220,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
|
|||
component={SavedFeeds}
|
||||
options={{title: title('Edit My Feeds')}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="PreferencesHomeFeed"
|
||||
component={PreferencesHomeFeed}
|
||||
options={{title: title('Home Feed Preferences')}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -29,6 +29,7 @@ export type CommonNavigatorParams = {
|
|||
CopyrightPolicy: undefined
|
||||
AppPasswords: undefined
|
||||
SavedFeeds: undefined
|
||||
PreferencesHomeFeed: undefined
|
||||
}
|
||||
|
||||
export type BottomTabNavigatorParams = CommonNavigatorParams & {
|
||||
|
|
|
@ -23,6 +23,7 @@ export const router = new Router({
|
|||
Debug: '/sys/debug',
|
||||
Log: '/sys/log',
|
||||
AppPasswords: '/settings/app-passwords',
|
||||
PreferencesHomeFeed: '/settings/home-feed',
|
||||
SavedFeeds: '/settings/saved-feeds',
|
||||
Support: '/support',
|
||||
PrivacyPolicy: '/support/privacy',
|
||||
|
|
|
@ -136,10 +136,6 @@ export interface PostLanguagesSettingsModal {
|
|||
name: 'post-languages-settings'
|
||||
}
|
||||
|
||||
export interface PreferencesHomeFeed {
|
||||
name: 'preferences-home-feed'
|
||||
}
|
||||
|
||||
export interface OnboardingModal {
|
||||
name: 'onboarding'
|
||||
}
|
||||
|
@ -156,7 +152,6 @@ export type Modal =
|
|||
| ContentFilteringSettingsModal
|
||||
| ContentLanguagesSettingsModal
|
||||
| PostLanguagesSettingsModal
|
||||
| PreferencesHomeFeed
|
||||
|
||||
// Moderation
|
||||
| ModerationDetailsModal
|
||||
|
|
|
@ -28,7 +28,6 @@ import * as AddAppPassword from './AddAppPasswords'
|
|||
import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
|
||||
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
|
||||
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
|
||||
import * as PreferencesHomeFeed from './PreferencesHomeFeed'
|
||||
import * as OnboardingModal from './OnboardingModal'
|
||||
import * as ModerationDetailsModal from './ModerationDetails'
|
||||
|
||||
|
@ -131,9 +130,6 @@ export const ModalsContainer = observer(function ModalsContainer() {
|
|||
} else if (activeModal?.name === 'post-languages-settings') {
|
||||
snapPoints = PostLanguagesSettingsModal.snapPoints
|
||||
element = <PostLanguagesSettingsModal.Component />
|
||||
} else if (activeModal?.name === 'preferences-home-feed') {
|
||||
snapPoints = PreferencesHomeFeed.snapPoints
|
||||
element = <PreferencesHomeFeed.Component />
|
||||
} else if (activeModal?.name === 'onboarding') {
|
||||
snapPoints = OnboardingModal.snapPoints
|
||||
element = <OnboardingModal.Component />
|
||||
|
|
|
@ -29,8 +29,6 @@ import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettin
|
|||
import * as OnboardingModal from './OnboardingModal'
|
||||
import * as ModerationDetailsModal from './ModerationDetails'
|
||||
|
||||
import * as PreferencesHomeFeed from './PreferencesHomeFeed'
|
||||
|
||||
export const ModalsContainer = observer(function ModalsContainer() {
|
||||
const store = useStores()
|
||||
|
||||
|
@ -107,8 +105,6 @@ function Modal({modal}: {modal: ModalIface}) {
|
|||
element = <AltTextImageModal.Component {...modal} />
|
||||
} else if (modal.name === 'edit-image') {
|
||||
element = <EditImageModal.Component {...modal} />
|
||||
} else if (modal.name === 'preferences-home-feed') {
|
||||
element = <PreferencesHomeFeed.Component />
|
||||
} else if (modal.name === 'onboarding') {
|
||||
element = <OnboardingModal.Component />
|
||||
} else if (modal.name === 'moderation-details') {
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
import React, {useState} from 'react'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {Slider} from '@miblanchard/react-native-slider'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {useStores} from 'state/index'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {isWeb, isDesktopWeb} from 'platform/detection'
|
||||
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
||||
import {ScrollView} from 'view/com/modals/util'
|
||||
|
||||
export const snapPoints = ['90%']
|
||||
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
|
||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
||||
import {CenteredView} from 'view/com/util/Views'
|
||||
|
||||
function RepliesThresholdInput({enabled}: {enabled: boolean}) {
|
||||
const store = useStores()
|
||||
|
@ -43,18 +43,25 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) {
|
|||
)
|
||||
}
|
||||
|
||||
export const Component = observer(function Component() {
|
||||
type Props = NativeStackScreenProps<
|
||||
CommonNavigatorParams,
|
||||
'PreferencesHomeFeed'
|
||||
>
|
||||
export const PreferencesHomeFeed = observer(({navigation}: Props) => {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
|
||||
return (
|
||||
<View
|
||||
testID="preferencesHomeFeedModal"
|
||||
style={[pal.view, styles.container]}>
|
||||
<CenteredView
|
||||
testID="preferencesHomeFeedScreen"
|
||||
style={[
|
||||
pal.view,
|
||||
pal.border,
|
||||
styles.container,
|
||||
isDesktopWeb && styles.desktopContainer,
|
||||
]}>
|
||||
<ViewHeader title="Home Feed Preferences" showOnDesktop />
|
||||
<View style={styles.titleSection}>
|
||||
<Text type="title-lg" style={[pal.text, styles.title]}>
|
||||
Home Feed Preferences
|
||||
</Text>
|
||||
<Text type="xl" style={[pal.textLight, styles.description]}>
|
||||
Fine-tune the content you see on your home screen.
|
||||
</Text>
|
||||
|
@ -119,27 +126,33 @@ export const Component = observer(function Component() {
|
|||
<TouchableOpacity
|
||||
testID="confirmBtn"
|
||||
onPress={() => {
|
||||
store.shell.closeModal()
|
||||
navigation.canGoBack()
|
||||
? navigation.goBack()
|
||||
: navigation.navigate('Settings')
|
||||
}}
|
||||
style={[styles.btn]}
|
||||
style={[styles.btn, isDesktopWeb && styles.btnDesktop]}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Confirm"
|
||||
accessibilityHint="">
|
||||
<Text style={[s.white, s.bold, s.f18]}>Done</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</CenteredView>
|
||||
)
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingBottom: isDesktopWeb ? 0 : 60,
|
||||
paddingBottom: isDesktopWeb ? 40 : 90,
|
||||
},
|
||||
desktopContainer: {
|
||||
borderLeftWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
},
|
||||
titleSection: {
|
||||
padding: 20,
|
||||
paddingBottom: 30,
|
||||
paddingTop: isDesktopWeb ? 20 : 0,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
|
@ -165,9 +178,12 @@ const styles = StyleSheet.create({
|
|||
padding: 14,
|
||||
backgroundColor: colors.blue3,
|
||||
},
|
||||
btnDesktop: {
|
||||
marginHorizontal: 'auto',
|
||||
paddingHorizontal: 80,
|
||||
},
|
||||
btnContainer: {
|
||||
paddingTop: 20,
|
||||
paddingHorizontal: 20,
|
||||
borderTopWidth: isDesktopWeb ? 0 : 1,
|
||||
},
|
||||
dimmed: {
|
|
@ -170,10 +170,8 @@ export const SettingsScreen = withAuthRequired(
|
|||
}, [])
|
||||
|
||||
const openPreferencesModal = React.useCallback(() => {
|
||||
store.shell.openModal({
|
||||
name: 'preferences-home-feed',
|
||||
})
|
||||
}, [store])
|
||||
navigation.navigate('PreferencesHomeFeed')
|
||||
}, [navigation])
|
||||
|
||||
const onPressAppPasswords = React.useCallback(() => {
|
||||
navigation.navigate('AppPasswords')
|
||||
|
@ -386,7 +384,7 @@ export const SettingsScreen = withAuthRequired(
|
|||
Advanced
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
testID="preferencesHomeFeedModalButton"
|
||||
testID="preferencesHomeFeedButton"
|
||||
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
||||
onPress={openPreferencesModal}
|
||||
accessibilityRole="button"
|
||||
|
|
|
@ -3497,7 +3497,7 @@
|
|||
dependencies:
|
||||
semver "7.5.4"
|
||||
|
||||
"@miblanchard/react-native-slider@^2.2.0":
|
||||
"@miblanchard/react-native-slider@^2.3.1":
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@miblanchard/react-native-slider/-/react-native-slider-2.3.1.tgz#79e0f1f9b1ce43ef25ee51ee9256c012e5dfa412"
|
||||
integrity sha512-J/hZDBWmXq8fJeOnTVHqIUVDHshqMSpJVxJ4WqwuCBKl5Rke9OBYXIdkSlgi75OgtScAr8FKK5KNkDKHUf6JIg==
|
||||
|
|
Loading…
Reference in New Issue