From aa6aad652e8091ea6039af82f41d4de3669a5944 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 31 Oct 2024 20:45:34 +0000 Subject: [Settings] Thread prefs revamp (#5772) * thread preferences screen * minor tweaks * more spacing * replace gate with IS_INTERNAL * [Settings] Following feed prefs revamp (#5773) * gated new settings screen * Following feed prefs * Update src/screens/Settings/FollowingFeedPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update src/screens/Settings/FollowingFeedPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * replace pref following feed gate * Update src/screens/Settings/FollowingFeedPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * use "Experimental" as the header --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] External media prefs revamp (#5774) * gated new settings screen * external media prefs revamp * replace gate ext media embeds * Update src/screens/Settings/ExternalMediaPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * add imports for translation * alternate list style on native --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] Languages revamp (partial) (#5775) * language settings (lazy restyle) * replace gate * fix text determining flex space * [Settings] App passwords revamp (#5777) * rework app passwords screen * Apply surfdude's copy changes Thanks @surfdude29! Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * format * replace gate * use admonition for input error and animate --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] Change handle dialog (#5781) * new change handle dialog * animations native only * overflow hidden on togglebutton animation * add a low-contrast border * extract out copybutton * finish change handle dialog * invalidate query on success * web fixes * error message for rate limit exceeded * typo * em dash! Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * another em dash Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * set maxwidth of suffixtext * Copy tweak Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] Notifs settings revamp (#5884) * rename, move, and restyle notif settings * bold "experimental:" --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> --- src/screens/Settings/LanguageSettings.tsx | 275 ++++++++++++++++++++++++++++++ 1 file changed, 275 insertions(+) create mode 100644 src/screens/Settings/LanguageSettings.tsx (limited to 'src/screens/Settings/LanguageSettings.tsx') diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx new file mode 100644 index 000000000..c6cd8bb5a --- /dev/null +++ b/src/screens/Settings/LanguageSettings.tsx @@ -0,0 +1,275 @@ +import React, {useCallback, useMemo} from 'react' +import {View} from 'react-native' +import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useModalControls} from '#/state/modals' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {atoms as a, useTheme, web} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check' +import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron' +import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus' +import * as Layout from '#/components/Layout' +import {Text} from '#/components/Typography' +import * as SettingsList from './components/SettingsList' + +type Props = NativeStackScreenProps +export function LanguageSettingsScreen({}: Props) { + const {_} = useLingui() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + const t = useTheme() + + const {openModal} = useModalControls() + + const onPressContentLanguages = useCallback(() => { + openModal({name: 'content-languages-settings'}) + }, [openModal]) + + const onChangePrimaryLanguage = useCallback( + (value: Parameters[0]) => { + if (!value) return + if (langPrefs.primaryLanguage !== value) { + setLangPrefs.setPrimaryLanguage(value) + } + }, + [langPrefs, setLangPrefs], + ) + + const onChangeAppLanguage = useCallback( + (value: Parameters[0]) => { + if (!value) return + if (langPrefs.appLanguage !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [langPrefs, setLangPrefs], + ) + + const myLanguages = useMemo(() => { + return ( + langPrefs.contentLanguages + .map(lang => LANGUAGES.find(l => l.code2 === lang)) + .filter(Boolean) + // @ts-ignore + .map(l => l.name) + .join(', ') + ) + }, [langPrefs.contentLanguages]) + + return ( + + + + + + + App Language + + + + + Select your app language for the default text to display in + the app. + + + + Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2, + }))} + style={{ + inputAndroid: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputIOS: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputWeb: { + flex: 1, + width: '100%', + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + }} + /> + + + + + + + + + + + Primary Language + + + + + Select your preferred language for translations in your feed. + + + + Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2 + l.code3, + }))} + style={{ + inputAndroid: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputIOS: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputWeb: { + flex: 1, + width: '100%', + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + }} + /> + + + + + + + + + + + Content Languages + + + + + Select which languages you want your subscribed feeds to + include. If none are selected, all languages will be shown. + + + + + + + + + + ) +} -- cgit 1.4.1