diff options
Diffstat (limited to 'src/view/com/modals/lang-settings')
4 files changed, 305 insertions, 0 deletions
diff --git a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx new file mode 100644 index 000000000..e1ecce589 --- /dev/null +++ b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import {StyleSheet, Text, View, Pressable} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {s, colors, gradients} from 'lib/styles' +import {isDesktopWeb} from 'platform/detection' +import {usePalette} from 'lib/hooks/usePalette' + +export const ConfirmLanguagesButton = ({ + onPress, + extraText, +}: { + onPress: () => void + extraText?: string +}) => { + const pal = usePalette('default') + return ( + <View style={[styles.btnContainer, pal.borderDark]}> + <Pressable + testID="confirmContentLanguagesBtn" + onPress={onPress} + accessibilityRole="button" + accessibilityLabel="Confirm content language settings" + accessibilityHint=""> + <LinearGradient + colors={[gradients.blueLight.start, gradients.blueLight.end]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={[styles.btn]}> + <Text style={[s.white, s.bold, s.f18]}>Done{extraText}</Text> + </LinearGradient> + </Pressable> + </View> + ) +} + +const styles = StyleSheet.create({ + btnContainer: { + paddingTop: 10, + paddingHorizontal: 10, + paddingBottom: isDesktopWeb ? 0 : 40, + borderTopWidth: isDesktopWeb ? 0 : 1, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 14, + backgroundColor: colors.gray1, + }, +}) diff --git a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx new file mode 100644 index 000000000..4f7bbc9c7 --- /dev/null +++ b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx @@ -0,0 +1,100 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {ScrollView} from '../util' +import {useStores} from 'state/index' +import {Text} from '../../util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {isDesktopWeb, deviceLocales} from 'platform/detection' +import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' +import {LanguageToggle} from './LanguageToggle' +import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' + +export const snapPoints = ['100%'] + +export function Component({}: {}) { + const store = useStores() + const pal = usePalette('default') + const onPressDone = React.useCallback(() => { + store.shell.closeModal() + }, [store]) + + const languages = React.useMemo(() => { + const langs = LANGUAGES.filter( + lang => + !!lang.code2.trim() && + LANGUAGES_MAP_CODE2[lang.code2].code3 === lang.code3, + ) + // sort so that device & selected languages are on top, then alphabetically + langs.sort((a, b) => { + const hasA = + store.preferences.hasContentLanguage(a.code2) || + deviceLocales.includes(a.code2) + const hasB = + store.preferences.hasContentLanguage(b.code2) || + deviceLocales.includes(b.code2) + if (hasA === hasB) return a.name.localeCompare(b.name) + if (hasA) return -1 + return 1 + }) + return langs + }, [store]) + + const onPress = React.useCallback( + (code2: string) => { + store.preferences.toggleContentLanguage(code2) + }, + [store], + ) + + return ( + <View testID="contentLanguagesModal" style={[pal.view, styles.container]}> + <Text style={[pal.text, styles.title]}>Content Languages</Text> + <Text style={[pal.text, styles.description]}> + Which languages would you like to see in your algorithmic feeds? + </Text> + <Text style={[pal.textLight, styles.description]}> + Leave them all unchecked to see any language. + </Text> + <ScrollView style={styles.scrollContainer}> + {languages.map(lang => ( + <LanguageToggle + key={lang.code2} + code2={lang.code2} + langType="contentLanguages" + name={lang.name} + onPress={() => { + onPress(lang.code2) + }} + /> + ))} + <View style={styles.bottomSpacer} /> + </ScrollView> + <ConfirmLanguagesButton onPress={onPressDone} /> + </View> + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: 20, + }, + title: { + textAlign: 'center', + fontWeight: 'bold', + fontSize: 24, + marginBottom: 12, + }, + description: { + textAlign: 'center', + paddingHorizontal: 16, + marginBottom: 10, + }, + scrollContainer: { + flex: 1, + paddingHorizontal: 10, + }, + bottomSpacer: { + height: isDesktopWeb ? 0 : 60, + }, +}) diff --git a/src/view/com/modals/lang-settings/LanguageToggle.tsx b/src/view/com/modals/lang-settings/LanguageToggle.tsx new file mode 100644 index 000000000..df1b405ca --- /dev/null +++ b/src/view/com/modals/lang-settings/LanguageToggle.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import {StyleSheet} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' +import {observer} from 'mobx-react-lite' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {useStores} from 'state/index' + +export const LanguageToggle = observer( + ({ + code2, + name, + onPress, + langType, + }: { + code2: string + name: string + onPress: () => void + langType: 'contentLanguages' | 'postLanguages' + }) => { + const pal = usePalette('default') + const store = useStores() + + const isSelected = store.preferences[langType].includes(code2) + + // enforce a max of 3 selections for post languages + let isDisabled = false + if ( + langType === 'postLanguages' && + store.preferences[langType].length >= 3 && + !isSelected + ) { + isDisabled = true + } + + return ( + <ToggleButton + label={name} + isSelected={isSelected} + onPress={isDisabled ? undefined : onPress} + style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]} + /> + ) + }, +) + +const styles = StyleSheet.create({ + languageToggle: { + borderTopWidth: 1, + borderRadius: 0, + paddingHorizontal: 6, + paddingVertical: 12, + }, + dimmed: { + opacity: 0.5, + }, +}) diff --git a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx new file mode 100644 index 000000000..3dc35e9ed --- /dev/null +++ b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx @@ -0,0 +1,97 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {ScrollView} from '../util' +import {useStores} from 'state/index' +import {Text} from '../../util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {isDesktopWeb, deviceLocales} from 'platform/detection' +import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' +import {LanguageToggle} from './LanguageToggle' +import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' + +export const snapPoints = ['100%'] + +export function Component({}: {}) { + const store = useStores() + const pal = usePalette('default') + const onPressDone = React.useCallback(() => { + store.shell.closeModal() + }, [store]) + + const languages = React.useMemo(() => { + const langs = LANGUAGES.filter( + lang => + !!lang.code2.trim() && + LANGUAGES_MAP_CODE2[lang.code2].code3 === lang.code3, + ) + // sort so that device & selected languages are on top, then alphabetically + langs.sort((a, b) => { + const hasA = + store.preferences.hasPostLanguage(a.code2) || + deviceLocales.includes(a.code2) + const hasB = + store.preferences.hasPostLanguage(b.code2) || + deviceLocales.includes(b.code2) + if (hasA === hasB) return a.name.localeCompare(b.name) + if (hasA) return -1 + return 1 + }) + return langs + }, [store]) + + const onPress = React.useCallback( + (code2: string) => { + store.preferences.togglePostLanguage(code2) + }, + [store], + ) + + return ( + <View testID="postLanguagesModal" style={[pal.view, styles.container]}> + <Text style={[pal.text, styles.title]}>Post Languages</Text> + <Text style={[pal.text, styles.description]}> + Which languages are used in this post? + </Text> + <ScrollView style={styles.scrollContainer}> + {languages.map(lang => ( + <LanguageToggle + key={lang.code2} + code2={lang.code2} + langType="postLanguages" + name={lang.name} + onPress={() => { + onPress(lang.code2) + }} + /> + ))} + <View style={styles.bottomSpacer} /> + </ScrollView> + <ConfirmLanguagesButton onPress={onPressDone} /> + </View> + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: 20, + }, + title: { + textAlign: 'center', + fontWeight: 'bold', + fontSize: 24, + marginBottom: 12, + }, + description: { + textAlign: 'center', + paddingHorizontal: 16, + marginBottom: 10, + }, + scrollContainer: { + flex: 1, + paddingHorizontal: 10, + }, + bottomSpacer: { + height: isDesktopWeb ? 0 : 60, + }, +}) |