diff options
| -rw-r--r-- | src/view/com/auth/SplashScreen.tsx | 79 | ||||
| -rw-r--r-- | src/view/com/auth/SplashScreen.web.tsx | 79 |
2 files changed, 150 insertions, 8 deletions
diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index ffd07d945..134ae11f1 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -1,5 +1,6 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {useSafeAreaInsets} from 'react-native-safe-area-context' import {Text} from 'view/com/util/text/Text' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' import {s, colors} from 'lib/styles' @@ -9,6 +10,14 @@ import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {APP_LANGUAGES} from '#/locale/languages' export const SplashScreen = ({ onPressSignin, @@ -20,6 +29,22 @@ export const SplashScreen = ({ const pal = usePalette('default') const {_} = useLingui() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + const insets = useSafeAreaInsets() + + const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage) + + const onChangeAppLanguage = React.useCallback( + (value: Parameters<PickerSelectProps['onValueChange']>[0]) => { + if (!value) return + if (sanitizedLang !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [sanitizedLang, setLangPrefs], + ) + return ( <CenteredView style={[styles.container, pal.view]}> <ErrorBoundary> @@ -58,6 +83,51 @@ export const SplashScreen = ({ </Text> </TouchableOpacity> </View> + <View style={styles.footer}> + <View style={{position: 'relative'}}> + <RNPickerSelect + placeholder={{}} + value={sanitizedLang} + onValueChange={onChangeAppLanguage} + items={APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2, + }))} + useNativeAndroidPickerStyle={false} + style={{ + inputAndroid: { + color: pal.textLight.color, + fontSize: 16, + paddingRight: 10 + 4, + }, + inputIOS: { + color: pal.text.color, + fontSize: 16, + paddingRight: 10 + 4, + }, + }} + /> + + <View + style={{ + position: 'absolute', + top: 0, + right: 0, + bottom: 0, + pointerEvents: 'none', + alignItems: 'center', + justifyContent: 'center', + }}> + <FontAwesomeIcon + icon="chevron-down" + size={10} + style={pal.textLight as FontAwesomeIconStyle} + /> + </View> + </View> + </View> + <View style={{height: insets.bottom}} /> </ErrorBoundary> </CenteredView> ) @@ -73,7 +143,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, btns: { - paddingBottom: 40, + paddingBottom: 0, }, title: { textAlign: 'center', @@ -95,4 +165,11 @@ const styles = StyleSheet.create({ textAlign: 'center', fontSize: 21, }, + footer: { + paddingHorizontal: 16, + paddingTop: 12, + paddingBottom: 24, + justifyContent: 'center', + alignItems: 'center', + }, }) diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 8ef64099f..f1921c7ff 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -9,9 +9,13 @@ import {usePalette} from 'lib/hooks/usePalette' import {CenteredView} from '../util/Views' import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' +import {useLingui} from '@lingui/react' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {APP_LANGUAGES} from '#/locale/languages' export const SplashScreen = ({ onDismiss, @@ -98,24 +102,84 @@ export const SplashScreen = ({ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) { const pal = usePalette('default') + const {_} = useLingui() + + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + + const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage) + + const onChangeAppLanguage = React.useCallback( + (ev: React.ChangeEvent<HTMLSelectElement>) => { + const value = ev.target.value + + if (!value) return + if (sanitizedLang !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [sanitizedLang, setLangPrefs], + ) return ( <View style={[styles.footer, pal.view, pal.border]}> <TextLink href="https://bsky.social" - text="Business" + text={_(msg`Business`)} style={[styles.footerLink, pal.link]} /> <TextLink href="https://bsky.social/about/blog" - text="Blog" + text={_(msg`Blog`)} style={[styles.footerLink, pal.link]} /> <TextLink href="https://bsky.social/about/join" - text="Jobs" + text={_(msg`Jobs`)} style={[styles.footerLink, pal.link]} /> + + <View style={styles.footerDivider} /> + + <View + style={{ + flexDirection: 'row', + gap: 8, + alignItems: 'center', + flexShrink: 1, + }}> + <Text aria-hidden={true} style={[pal.textLight]}> + {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name} + </Text> + <FontAwesomeIcon + icon="chevron-down" + size={12} + style={[pal.textLight, {flexShrink: 0}]} + /> + + <select + value={sanitizedLang} + onChange={onChangeAppLanguage} + style={{ + cursor: 'pointer', + MozAppearance: 'none', + WebkitAppearance: 'none', + appearance: 'none', + position: 'absolute', + inset: 0, + width: '100%', + color: 'transparent', + background: 'transparent', + border: 0, + padding: 0, + }}> + {APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ( + <option key={l.code2} value={l.code2}> + {l.name} + </option> + ))} + </select> + </View> </View> ) } @@ -188,9 +252,10 @@ const useStyles = () => { padding: 20, borderTopWidth: 1, flexDirection: 'row', + flexWrap: 'wrap', + gap: 20, }, - footerLink: { - marginRight: 20, - }, + footerDivider: {flexGrow: 1}, + footerLink: {}, }) } |