diff options
Diffstat (limited to 'src/view/screens')
| -rw-r--r-- | src/view/screens/PreferencesHomeFeed.tsx | 192 | ||||
| -rw-r--r-- | src/view/screens/ProfileList.tsx | 2 | ||||
| -rw-r--r-- | src/view/screens/Search.web.tsx | 20 | ||||
| -rw-r--r-- | src/view/screens/Settings.tsx | 8 |
4 files changed, 214 insertions, 8 deletions
diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx new file mode 100644 index 000000000..b04f274f7 --- /dev/null +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -0,0 +1,192 @@ +import React, {useState} from 'react' +import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' +import {observer} from 'mobx-react-lite' +import {Slider} from '@miblanchard/react-native-slider' +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 {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() + const pal = usePalette('default') + const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold) + + return ( + <View style={[s.mt10, !enabled && styles.dimmed]}> + <Text type="xs" style={pal.text}> + {value === 0 + ? `Show all replies` + : `Show replies with at least ${value} ${ + value > 1 ? `likes` : `like` + }`} + </Text> + <Slider + value={value} + onValueChange={(v: number | number[]) => { + const threshold = Math.floor(Array.isArray(v) ? v[0] : v) + setValue(threshold) + store.preferences.setHomeFeedRepliesThreshold(threshold) + }} + minimumValue={0} + maximumValue={25} + containerStyle={isWeb ? undefined : s.flex1} + disabled={!enabled} + thumbTintColor={colors.blue3} + /> + </View> + ) +} + +type Props = NativeStackScreenProps< + CommonNavigatorParams, + 'PreferencesHomeFeed' +> +export const PreferencesHomeFeed = observer(({navigation}: Props) => { + const pal = usePalette('default') + const store = useStores() + + return ( + <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="xl" style={[pal.textLight, styles.description]}> + Fine-tune the content you see on your home screen. + </Text> + </View> + + <ScrollView> + <View style={styles.cardsContainer}> + <View style={[pal.viewLight, styles.card]}> + <Text type="title-sm" style={[pal.text, s.pb5]}> + Show Replies + </Text> + <Text style={[pal.text, s.pb10]}> + Adjust the number of likes a reply must have to be shown in your + feed. + </Text> + <ToggleButton + type="default-light" + label={store.preferences.homeFeedRepliesEnabled ? 'Yes' : 'No'} + isSelected={store.preferences.homeFeedRepliesEnabled} + onPress={store.preferences.toggleHomeFeedRepliesEnabled} + /> + + <RepliesThresholdInput + enabled={store.preferences.homeFeedRepliesEnabled} + /> + </View> + + <View style={[pal.viewLight, styles.card]}> + <Text type="title-sm" style={[pal.text, s.pb5]}> + Show Reposts + </Text> + <Text style={[pal.text, s.pb10]}> + Set this setting to "No" to hide all reposts from your feed. + </Text> + <ToggleButton + type="default-light" + label={store.preferences.homeFeedRepostsEnabled ? 'Yes' : 'No'} + isSelected={store.preferences.homeFeedRepostsEnabled} + onPress={store.preferences.toggleHomeFeedRepostsEnabled} + /> + </View> + + <View style={[pal.viewLight, styles.card]}> + <Text type="title-sm" style={[pal.text, s.pb5]}> + Show Quote Posts + </Text> + <Text style={[pal.text, s.pb10]}> + Set this setting to "No" to hide all quote posts from your feed. + Reposts will still be visible. + </Text> + <ToggleButton + type="default-light" + label={store.preferences.homeFeedQuotePostsEnabled ? 'Yes' : 'No'} + isSelected={store.preferences.homeFeedQuotePostsEnabled} + onPress={store.preferences.toggleHomeFeedQuotePostsEnabled} + /> + </View> + </View> + </ScrollView> + + <View style={[styles.btnContainer, pal.borderDark]}> + <TouchableOpacity + testID="confirmBtn" + onPress={() => { + navigation.canGoBack() + ? navigation.goBack() + : navigation.navigate('Settings') + }} + style={[styles.btn, isDesktopWeb && styles.btnDesktop]} + accessibilityRole="button" + accessibilityLabel="Confirm" + accessibilityHint=""> + <Text style={[s.white, s.bold, s.f18]}>Done</Text> + </TouchableOpacity> + </View> + </CenteredView> + ) +}) + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingBottom: isDesktopWeb ? 40 : 90, + }, + desktopContainer: { + borderLeftWidth: 1, + borderRightWidth: 1, + }, + titleSection: { + paddingBottom: 30, + paddingTop: isDesktopWeb ? 20 : 0, + }, + title: { + textAlign: 'center', + marginBottom: 5, + }, + description: { + textAlign: 'center', + paddingHorizontal: 32, + }, + cardsContainer: { + paddingHorizontal: 20, + }, + card: { + padding: 16, + borderRadius: 10, + marginBottom: 20, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 32, + padding: 14, + backgroundColor: colors.blue3, + }, + btnDesktop: { + marginHorizontal: 'auto', + paddingHorizontal: 80, + }, + btnContainer: { + paddingTop: 20, + borderTopWidth: isDesktopWeb ? 0 : 1, + }, + dimmed: { + opacity: 0.3, + }, +}) diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 651fac21f..3c50fdde0 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -74,7 +74,7 @@ export const ProfileListScreen = withAuthRequired( store.shell.openModal({ name: 'confirm', title: 'Delete List', - message: 'Are you sure', + message: 'Are you sure?', async onPressConfirm() { await list.delete() if (navigation.canGoBack()) { diff --git a/src/view/screens/Search.web.tsx b/src/view/screens/Search.web.tsx index 85e8c212e..3218b4579 100644 --- a/src/view/screens/Search.web.tsx +++ b/src/view/screens/Search.web.tsx @@ -1,4 +1,5 @@ import React from 'react' +import {View, StyleSheet} from 'react-native' import {SearchUIModel} from 'state/models/ui/search' import {FoafsModel} from 'state/models/discovery/foafs' import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors' @@ -47,13 +48,28 @@ export const SearchScreen = withAuthRequired( const {isDesktop} = useWebMediaQueries() if (searchUIModel) { - return <SearchResults model={searchUIModel} /> + return ( + <View style={styles.scrollContainer}> + <SearchResults model={searchUIModel} /> + </View> + ) } if (!isDesktop) { - return <Mobile.SearchScreen navigation={navigation} route={route} /> + return ( + <View style={styles.scrollContainer}> + <Mobile.SearchScreen navigation={navigation} route={route} /> + </View> + ) } return <Suggestions foafs={foafs} suggestedActors={suggestedActors} /> }), ) + +const styles = StyleSheet.create({ + scrollContainer: { + height: '100%', + overflowY: 'auto', + }, +}) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 4a2c1c16a..481d77086 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -175,10 +175,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') @@ -391,7 +389,7 @@ export const SettingsScreen = withAuthRequired( Advanced </Text> <TouchableOpacity - testID="preferencesHomeFeedModalButton" + testID="preferencesHomeFeedButton" style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} onPress={openPreferencesModal} accessibilityRole="button" |