diff options
Diffstat (limited to 'src/view')
-rw-r--r-- | src/view/index.ts | 2 | ||||
-rw-r--r-- | src/view/screens/PreferencesHomeFeed.tsx | 7 | ||||
-rw-r--r-- | src/view/screens/PreferencesThreads.tsx | 155 | ||||
-rw-r--r-- | src/view/screens/Settings.tsx | 22 |
4 files changed, 184 insertions, 2 deletions
diff --git a/src/view/index.ts b/src/view/index.ts index 2fdc34e7b..da1b78146 100644 --- a/src/view/index.ts +++ b/src/view/index.ts @@ -36,6 +36,7 @@ import {faClone} from '@fortawesome/free-solid-svg-icons/faClone' import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone' import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' import {faCommentSlash} from '@fortawesome/free-solid-svg-icons/faCommentSlash' +import {faComments} from '@fortawesome/free-regular-svg-icons/faComments' import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass' import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis' import {faEnvelope} from '@fortawesome/free-solid-svg-icons/faEnvelope' @@ -134,6 +135,7 @@ export function setup() { farClone, faComment, faCommentSlash, + faComments, faCompass, faEllipsis, faEnvelope, diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx index 81bdfc95e..34139bec1 100644 --- a/src/view/screens/PreferencesHomeFeed.tsx +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -66,7 +66,10 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ ]}> <ViewHeader title="Home Feed Preferences" showOnDesktop /> <View - style={[styles.titleSection, isTabletOrDesktop && {paddingTop: 20}]}> + style={[ + styles.titleSection, + isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, + ]}> <Text type="xl" style={[pal.textLight, styles.description]}> Fine-tune the content you see on your home screen. </Text> @@ -175,7 +178,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ style={[ styles.btnContainer, !isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20}, - pal.borderDark, + pal.border, ]}> <TouchableOpacity testID="confirmBtn" diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx new file mode 100644 index 000000000..731a98d71 --- /dev/null +++ b/src/view/screens/PreferencesThreads.tsx @@ -0,0 +1,155 @@ +import React from 'react' +import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' +import {observer} from 'mobx-react-lite' +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 {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' + +type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'> +export const PreferencesThreads = observer(function PreferencesThreadsImpl({ + navigation, +}: Props) { + const pal = usePalette('default') + const store = useStores() + const {isTabletOrDesktop} = useWebMediaQueries() + + return ( + <CenteredView + testID="preferencesThreadsScreen" + style={[ + pal.view, + pal.border, + styles.container, + isTabletOrDesktop && styles.desktopContainer, + ]}> + <ViewHeader title="Thread Preferences" showOnDesktop /> + <View + style={[ + styles.titleSection, + isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, + ]}> + <Text type="xl" style={[pal.textLight, styles.description]}> + Fine-tune the discussion threads. + </Text> + </View> + + <ScrollView> + <View style={styles.cardsContainer}> + <View style={[pal.viewLight, styles.card]}> + <Text type="title-sm" style={[pal.text, s.pb5]}> + Sort Replies + </Text> + <Text style={[pal.text, s.pb10]}> + Sort replies to the same post by: + </Text> + <View style={[pal.view, {borderRadius: 8, paddingVertical: 6}]}> + <RadioGroup + type="default-light" + items={[ + {key: 'oldest', label: 'Oldest replies first'}, + {key: 'newest', label: 'Newest replies first'}, + {key: 'most-likes', label: 'Most-liked replies first'}, + {key: 'random', label: 'Random (aka "Poster\'s Roulette")'}, + ]} + onSelect={store.preferences.setThreadDefaultSort} + initialSelection={store.preferences.threadDefaultSort} + /> + </View> + </View> + + <View style={[pal.viewLight, styles.card]}> + <Text type="title-sm" style={[pal.text, s.pb5]}> + Prioritize Your Follows + </Text> + <Text style={[pal.text, s.pb10]}> + Show replies by people you follow before all other replies. + </Text> + <ToggleButton + type="default-light" + label={store.preferences.threadFollowedUsersFirst ? 'Yes' : 'No'} + isSelected={store.preferences.threadFollowedUsersFirst} + onPress={store.preferences.toggleThreadFollowedUsersFirst} + /> + </View> + </View> + </ScrollView> + + <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="Confirm" + accessibilityHint=""> + <Text style={[s.white, s.bold, s.f18]}>Done</Text> + </TouchableOpacity> + </View> + </CenteredView> + ) +}) + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingBottom: 90, + }, + desktopContainer: { + borderLeftWidth: 1, + borderRightWidth: 1, + paddingBottom: 40, + }, + titleSection: { + paddingBottom: 30, + }, + 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, + }, + dimmed: { + opacity: 0.3, + }, +}) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 761f50d0a..1ff5f58ff 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -180,6 +180,10 @@ export const SettingsScreen = withAuthRequired( navigation.navigate('PreferencesHomeFeed') }, [navigation]) + const openThreadsPreferences = React.useCallback(() => { + navigation.navigate('PreferencesThreads') + }, [navigation]) + const onPressAppPasswords = React.useCallback(() => { navigation.navigate('AppPasswords') }, [navigation]) @@ -421,6 +425,24 @@ export const SettingsScreen = withAuthRequired( </Text> </TouchableOpacity> <TouchableOpacity + testID="preferencesThreadsButton" + style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} + onPress={openThreadsPreferences} + accessibilityRole="button" + accessibilityHint="" + accessibilityLabel="Opens the threads preferences"> + <View style={[styles.iconContainer, pal.btn]}> + <FontAwesomeIcon + icon={['far', 'comments']} + style={pal.text as FontAwesomeIconStyle} + size={18} + /> + </View> + <Text type="lg" style={pal.text}> + Thread Preferences + </Text> + </TouchableOpacity> + <TouchableOpacity testID="savedFeedsBtn" style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} accessibilityHint="My Saved Feeds" |