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