Skip to content

Commit fd954d1

Browse files
smaclellsmaclell
authored
Merge pull request #83 from smaclell/super-languages
An expand and collapse for languages
2 parents 5274866 + 5291108 commit fd954d1

File tree

8 files changed

+150
-70
lines changed

8 files changed

+150
-70
lines changed

‎assets/i18n/locales/de.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"resource/generic_bible": "# Bibeln verteilt",
3636
"settings/accept_invites": "Einladung annehmen",
3737
"settings/allow_download": "Laden Sie Orte in der Nähe herunter",
38-
"settings/change_language": "Sprache:",
38+
"settings/change_language": "Sprache",
3939
"settings/export": "Data exportieren",
4040
"settings/invite": "Einladung teilen",
4141
"settings/location_data": "Standortdaten",

‎assets/i18n/locales/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"resource/generic_bible": "# of Bibles Distributed",
3636
"settings/accept_invites": "Accept Invites",
3737
"settings/allow_download": "Download nearby locations",
38-
"settings/change_language": "Language:",
38+
"settings/change_language": "Language",
3939
"settings/export": "Export Data",
4040
"settings/invite": "Share Invite",
4141
"settings/location_data": "Location Data",

‎assets/i18n/locales/es.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"resource/generic_bible": "# de Biblias distribuidas",
3636
"settings/accept_invites": "Aceptar Invitaciones",
3737
"settings/allow_download": "Descargue ubicaciones cercanas",
38-
"settings/change_language": "Idioma:",
38+
"settings/change_language": "Idioma",
3939
"settings/export": "Exportar Datos",
4040
"settings/invite": "Comparte Invitación",
4141
"settings/location_data": "Datos de localización",

‎assets/i18n/locales/list.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,29 @@ export default {
1010
'locale/pt-br': 'Português',
1111
'locale/zh-cn': '中文',
1212
'locale/zh-hk': '標準粵語',
13+
// Testing a long language list
14+
/*
15+
'locale/a': 'a',
16+
'locale/b': 'b',
17+
'locale/c': 'c',
18+
'locale/d': 'd',
19+
'locale/e': 'e',
20+
'locale/f': 'f',
21+
'locale/g': 'g',
22+
'locale/h': 'h',
23+
'locale/i': 'i',
24+
'locale/j': 'j',
25+
'locale/k': 'k',
26+
'locale/l': 'l',
27+
'locale/m': 'm',
28+
'locale/n': 'n',
29+
'locale/o': 'o',
30+
'locale/p': 'p',
31+
'locale/q': 'q',
32+
'locale/r': 'r',
33+
'locale/s': 's',
34+
'locale/t': 't',
35+
'locale/u': 'u',
36+
'locale/v': 'v',
37+
*/
1338
};

‎assets/i18n/locales/nl.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"resource/generic_bible": "# bijbels gedistribueerd",
3636
"settings/accept_invites": "Uitnodiging accepteren",
3737
"settings/allow_download": "Download locaties in de buurt",
38-
"settings/change_language": "Taal:",
38+
"settings/change_language": "Taal",
3939
"settings/export": "Data exporteren",
4040
"settings/invite": "Uitnodiging delen",
4141
"settings/location_data": "Locatie gegevens",

‎assets/i18n/locales/pt-br.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"resource/generic_bible": "# de Bíblias Distribuídas",
3636
"settings/accept_invites": "Aceitar Convites",
3737
"settings/allow_download": "Baixe locais próximos",
38-
"settings/change_language": "Idioma:",
38+
"settings/change_language": "Idioma",
3939
"settings/export": "Exportar Dados",
4040
"settings/invite": "Compartilhar Convite",
4141
"settings/location_data": "Dados de localização",

‎assets/i18n/locales/th.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"resource/generic_bible": "จำนวนพระคัมภีร์ที่แจก",
3636
"settings/accept_invites": "ยอมรับคำเชิญ",
3737
"settings/allow_download": "ดาวน์โหลดสถานที่ใกล้เคียง",
38-
"settings/change_language": "ภาษา:",
38+
"settings/change_language": "ภาษา",
3939
"settings/export": "ส่งออกข้อมูล",
4040
"settings/invite": "แชร์คำเชิญ",
4141
"settings/location_data": "ข้อมูลตำแหน่ง",

‎components/Settings.js‎

Lines changed: 119 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* globals __DEV__ */
2-
import React from 'react';
2+
import React, { Component } from 'react';
33
import PropTypes from 'prop-types';
4-
import { Image, Picker, ScrollView, StyleSheet, Text, View, Switch } from 'react-native';
4+
import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, Switch } from 'react-native';
55
import SettingsItem from '../components/SettingsItem';
66

77
import colours from '../styles/colours';
@@ -32,6 +32,34 @@ const styles = StyleSheet.create({
3232
fontWeight: 'bold',
3333
fontSize: fonts.extraSmall,
3434
},
35+
language_container: {
36+
flex: 0,
37+
flexDirection: 'column',
38+
alignItems: 'flex-start',
39+
minHeight: 1.5 * fonts.large,
40+
paddingVertical: 10,
41+
paddingHorizontal: 20,
42+
width: '100%',
43+
},
44+
shown_languages_container: {
45+
flex: 1,
46+
},
47+
languagesOuter: {
48+
alignSelf: 'stretch',
49+
},
50+
languagesInner: {
51+
flexDirection: 'column',
52+
alignItems: 'flex-start',
53+
flexWrap: 'wrap',
54+
},
55+
language: {
56+
flex: 1,
57+
alignSelf: 'stretch',
58+
paddingVertical: 10,
59+
},
60+
bold: {
61+
fontWeight: 'bold',
62+
},
3563
options_container: {
3664
flex: 5,
3765
flexShrink: 0,
@@ -79,74 +107,101 @@ const styles = StyleSheet.create({
79107
},
80108
});
81109

82-
const Settings = (props) => {
83-
const {
84-
acceptInvite,
85-
allowDownload,
86-
canUpload,
87-
clearPushPermission,
88-
enableInvitations,
89-
exportData,
90-
logout,
91-
regionKey,
92-
sendFeedback,
93-
showLocationData,
94-
showPushDialog,
95-
updateAllowDownload,
96-
updateLocale,
97-
version,
98-
} = props;
110+
class Settings extends Component {
111+
state = {
112+
showAllLanguages: false,
113+
}
114+
115+
toggleLanguages = () => {
116+
this.setState(s => ({ ...s, showAllLanguages: !s.showAllLanguages }));
117+
}
99118

100-
return (
101-
<ScrollView contentContainerStyle={styles.container}>
102-
<View style={styles.options_container}>
103-
<View style={[SettingsItem.styles.container, { minHeight: 3 * fonts.large }]}>
104-
<Text style={[SettingsItem.styles.text, styles.changeLanguageTitle]}>{I18n.t('settings/change_language')}</Text>
105-
<Picker
106-
selectedValue={!/^(pt|zh)/.test(I18n.locale) ? I18n.locale.substring(0, 2) : I18n.locale}
107-
onValueChange={updateLocale}
108-
style={styles.changeLanguagePicker}
109-
itemStyle={SettingsItem.styles.text}
110-
mode="dropdown"
111-
enabled
112-
>
113-
{languages.map(([key, value]) => (
114-
<Picker.Item key={key} label={value} value={key.replace('locale/', '')} />
115-
))}
116-
</Picker>
119+
render = () => {
120+
const {
121+
showAllLanguages,
122+
} = this.state;
123+
const {
124+
acceptInvite,
125+
allowDownload,
126+
canUpload,
127+
clearPushPermission,
128+
enableInvitations,
129+
exportData,
130+
logout,
131+
regionKey,
132+
sendFeedback,
133+
showLocationData,
134+
showPushDialog,
135+
updateAllowDownload,
136+
updateLocale,
137+
version,
138+
} = this.props;
139+
140+
const selected = `locale/${!/^(pt|zh)/.test(I18n.locale) ? I18n.locale.substring(0, 2) : I18n.locale}`;
141+
const languageStyles = [
142+
styles.language_container,
143+
showAllLanguages && styles.shown_languages_container,
144+
];
145+
146+
const languageTitleStyles = [
147+
SettingsItem.styles.text,
148+
styles.changeLanguageTitle,
149+
showAllLanguages && styles.bold,
150+
showAllLanguages && { marginBottom: 10 },
151+
];
152+
153+
return (
154+
<ScrollView contentContainerStyle={styles.container}>
155+
<View style={languageStyles}>
156+
<TouchableOpacity onPress={this.toggleLanguages}>
157+
<Text style={languageTitleStyles}>{I18n.t('settings/change_language')}</Text>
158+
</TouchableOpacity>
159+
{ showAllLanguages && (
160+
<ScrollView style={styles.languagesOuter} contentContainerStyle={styles.languagesInner}>
161+
{languages.map(([key, value]) => (
162+
<TouchableOpacity style={[styles.language]} key={key} onPress={() => updateLocale(key.replace('locale/', ''))}>
163+
<Text style={[SettingsItem.styles.text, key === selected && styles.bold]}>{value}</Text>
164+
</TouchableOpacity>
165+
))}
166+
</ScrollView>
167+
)}
117168
</View>
118-
{ regionKey && (
119-
<View style={SettingsItem.styles.container}>
120-
<Text style={SettingsItem.styles.text}>{I18n.t('settings/region', { region: regionKey })}</Text>
169+
{ !showAllLanguages && (
170+
<View style={styles.options_container}>
171+
{ regionKey && (
172+
<View style={SettingsItem.styles.container}>
173+
<Text style={SettingsItem.styles.text}>{I18n.t('settings/region', { region: regionKey })}</Text>
174+
</View>
175+
)}
176+
{ !regionKey && enableInvitations && (
177+
<SettingsItem term="settings/accept_invites" onPress={acceptInvite} />
178+
)}
179+
{ regionKey && <SettingsItem term="settings/push_locations" onPress={showPushDialog} disabled={!canUpload} /> }
180+
{ regionKey && <SettingsItem term="settings/location_data" onPress={showLocationData} /> }
181+
{ regionKey && (
182+
<View style={SettingsItem.styles.container}>
183+
<Text style={SettingsItem.styles.text}>{I18n.t('settings/allow_download')}</Text>
184+
<Switch onValueChange={updateAllowDownload} value={allowDownload} />
185+
</View>
186+
)}
187+
<SettingsItem term="settings/export" onPress={exportData} />
188+
<SettingsItem term="settings/send_feedback" onPress={sendFeedback} />
189+
{ regionKey && <SettingsItem term="settings/logout" onPress={logout} /> }
190+
{ __DEV__ && <SettingsItem term="settings/push_locations_clear" onPress={clearPushPermission} /> }
121191
</View>
122192
)}
123-
{ !regionKey && enableInvitations && (
124-
<SettingsItem term="settings/accept_invites" onPress={acceptInvite} />
125-
)}
126-
{ regionKey && <SettingsItem term="settings/push_locations" onPress={showPushDialog} disabled={!canUpload} /> }
127-
{ regionKey && <SettingsItem term="settings/location_data" onPress={showLocationData} /> }
128-
{ regionKey && (
129-
<View style={SettingsItem.styles.container}>
130-
<Text style={SettingsItem.styles.text}>{I18n.t('settings/allow_download')}</Text>
131-
<Switch onValueChange={updateAllowDownload} value={allowDownload} />
193+
<View style={styles.version_container}>
194+
{ __DEV__ && <Text style={styles.dev}>DEVELOPMENT MODE</Text>}
195+
<View style={styles.logo_container}>
196+
<Image source={require('../assets/logo/logo.png')} style={styles.logo} />
132197
</View>
133-
)}
134-
<SettingsItem term="settings/export" onPress={exportData} />
135-
<SettingsItem term="settings/send_feedback" onPress={sendFeedback} />
136-
{ regionKey && <SettingsItem term="settings/logout" onPress={logout} /> }
137-
{ __DEV__ && <SettingsItem term="settings/push_locations_clear" onPress={clearPushPermission} /> }
138-
</View>
139-
<View style={styles.version_container}>
140-
{ __DEV__ && <Text style={styles.dev}>DEVELOPMENT MODE</Text>}
141-
<View style={styles.logo_container}>
142-
<Image source={require('../assets/logo/logo.png')} style={styles.logo} />
198+
<Text style={styles.header}> {I18n.t('title/share_bibles')} </Text>
199+
<Text style={styles.version}>{version}</Text>
143200
</View>
144-
<Text style={styles.header}> {I18n.t('title/share_bibles')} </Text>
145-
<Text style={styles.version}>{version}</Text>
146-
</View>
147-
</ScrollView>
148-
);
149-
};
201+
</ScrollView>
202+
);
203+
}
204+
}
150205

151206
Settings.propTypes = {
152207
acceptInvite: PropTypes.func.isRequired,

0 commit comments

Comments
 (0)