Browse Source

added translations for intro slides and moved intro in separate custom component

keplyx 4 years ago
parent
commit
228a3dbabf
4 changed files with 190 additions and 112 deletions
  1. 5
    112
      App.js
  2. 133
    0
      components/CustomIntroSlider.js
  3. 26
    0
      translations/en.json
  4. 26
    0
      translations/fr.json

+ 5
- 112
App.js View File

@@ -1,95 +1,18 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Root, StyleProvider, Text} from 'native-base';
5
-import {Image, StyleSheet, View} from 'react-native'
4
+import {Root, StyleProvider} from 'native-base';
5
+import {View} from 'react-native'
6 6
 import AppNavigator from './navigation/AppNavigator';
7 7
 import ThemeManager from './utils/ThemeManager';
8 8
 import LocaleManager from './utils/LocaleManager';
9 9
 import * as Font from 'expo-font';
10
-import {LinearGradient} from 'expo-linear-gradient';
11
-import AppIntroSlider from 'react-native-app-intro-slider';
12 10
 // edited native-base-shoutem-theme according to
13 11
 // https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
14 12
 // to allow for dynamic theme switching
15 13
 import {clearThemeCache} from 'native-base-shoutem-theme';
16 14
 import AsyncStorageManager from "./utils/AsyncStorageManager";
17
-import CustomMaterialIcon from "./components/CustomMaterialIcon";
18
-import SideBar from "./components/Sidebar";
19
-import SideMenu from "react-native-side-menu";
20
-
21
-const styles = StyleSheet.create({
22
-    mainContent: {
23
-        flex: 1,
24
-        alignItems: 'center',
25
-        justifyContent: 'center',
26
-        paddingBottom: 100
27
-    },
28
-    image: {
29
-        width: 200,
30
-        height: 200,
31
-    },
32
-    text: {
33
-        color: 'rgba(255, 255, 255, 0.8)',
34
-        backgroundColor: 'transparent',
35
-        textAlign: 'center',
36
-        paddingHorizontal: 16,
37
-    },
38
-    title: {
39
-        fontSize: 22,
40
-        color: 'white',
41
-        backgroundColor: 'transparent',
42
-        textAlign: 'center',
43
-        marginBottom: 16,
44
-    },
45
-});
46
-
47
-// Content to be used int the intro slides
48
-const slides = [
49
-    {
50
-        key: '1',
51
-        title: 'Bienvenue sur COFFEE',
52
-        text: ' La nouvelle app à consulter pendant la pause café pour être au courant de la vie du campus !',
53
-        image: require('./assets/drawer-cover.png'),
54
-        colors: ['#e01928', '#be1522'],
55
-    },
56
-    {
57
-        key: '2',
58
-        title: 'Restez informés',
59
-        text: 'COFFEE vous permettra bientôt d\'être au courant de tous les événements qui ont lieu sur le campus, de la vente de crêpes jusqu\'aux concerts enfoiros !',
60
-        icon: 'calendar-range',
61
-        colors: ['#d99e09', '#c28d08'],
62
-    },
63
-    {
64
-        key: '3',
65
-        title: 'N\'oubliez plus votre linge !',
66
-        text: 'COFFEE vous informe de la disponibilité des machines et vous permet d\'être notifiés lorsque la vôtre se termine bientôt !',
67
-        icon: 'washing-machine',
68
-        colors: ['#1fa5ee', '#1c97da'],
69
-    },
70
-    {
71
-        key: '4',
72
-        title: 'Proximo',
73
-        text: 'Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel',
74
-        icon: 'shopping',
75
-        colors: ['#ec5904', '#da5204'],
76
-    },
77
-    {
78
-        key: '5',
79
-        title: 'Planex',
80
-        text: 'Consultez votre emploi du temps sur COFFEE',
81
-        icon: 'timetable',
82
-        colors: ['#7c33ec', '#732fda'],
83
-    },
84
-    {
85
-        key: '6',
86
-        title: 'Toujours en développement',
87
-        text: 'D\'autres fonctionnalités arrivent bientôt, n\'hésitez pas à nous donner votre avis pour améliorer l\'appli',
88
-        icon: 'cogs',
89
-        colors: ['#37c13e', '#26852b'],
90
-    },
91
-];
92
-
15
+import CustomIntroSlider from "./components/CustomIntroSlider";
93 16
 
94 17
 type Props = {};
95 18
 
@@ -144,33 +67,6 @@ export default class App extends React.Component<Props, State> {
144 67
     }
145 68
 
146 69
     /**
147
-     * Render item to be used for the intro slides
148
-     * @param item
149
-     * @param dimensions
150
-     */
151
-    getIntroRenderItem(item: Object, dimensions: Object) {
152
-        return (
153
-            <LinearGradient
154
-                style={[
155
-                    styles.mainContent,
156
-                    dimensions,
157
-                ]}
158
-                colors={item.colors}
159
-                start={{x: 0, y: 0.1}}
160
-                end={{x: 0.1, y: 1}}
161
-            >
162
-                {item.image !== undefined ?
163
-                    <Image source={item.image} style={styles.image}/>
164
-                    : <CustomMaterialIcon icon={item.icon} color={'#fff'} fontSize={200} width={200}/>}
165
-                <View style={{marginTop: 20}}>
166
-                    <Text style={styles.title}>{item.title}</Text>
167
-                    <Text style={styles.text}>{item.text}</Text>
168
-                </View>
169
-            </LinearGradient>
170
-        );
171
-    }
172
-
173
-    /**
174 70
      * Callback when user ends the intro. Save in preferences to avaoid showing back the slides
175 71
      */
176 72
     onIntroDone() {
@@ -186,18 +82,15 @@ export default class App extends React.Component<Props, State> {
186 82
             return <View/>;
187 83
         }
188 84
         if (this.state.showIntro) {
189
-            return <AppIntroSlider renderItem={({item, dimensions}) => this.getIntroRenderItem(item, dimensions)}
190
-                                   slides={slides} onDone={() => this.onIntroDone()} bottomButton showSkipButton/>;
85
+            return <CustomIntroSlider onDone={() => this.onIntroDone()}/>;
191 86
         } else {
192 87
             return (
193 88
                 <Root>
194 89
                     <StyleProvider style={this.state.currentTheme}>
195
-                            <AppNavigator/>
90
+                        <AppNavigator/>
196 91
                     </StyleProvider>
197 92
                 </Root>
198 93
             );
199 94
         }
200 95
     }
201
-
202
-    menu = <View/>;
203 96
 }

+ 133
- 0
components/CustomIntroSlider.js View File

@@ -0,0 +1,133 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {LinearGradient} from "expo-linear-gradient";
5
+import {Image, StyleSheet, View} from "react-native";
6
+import CustomMaterialIcon from "./CustomMaterialIcon";
7
+import {Text} from "native-base";
8
+import i18n from 'i18n-js';
9
+import AppIntroSlider from "react-native-app-intro-slider";
10
+
11
+// Content to be used int the intro slides
12
+
13
+const styles = StyleSheet.create({
14
+    mainContent: {
15
+        flex: 1,
16
+        alignItems: 'center',
17
+        justifyContent: 'center',
18
+        paddingBottom: 100
19
+    },
20
+    image: {
21
+        width: 200,
22
+        height: 200,
23
+    },
24
+    text: {
25
+        color: 'rgba(255, 255, 255, 0.8)',
26
+        backgroundColor: 'transparent',
27
+        textAlign: 'center',
28
+        paddingHorizontal: 16,
29
+    },
30
+    title: {
31
+        fontSize: 22,
32
+        color: 'white',
33
+        backgroundColor: 'transparent',
34
+        textAlign: 'center',
35
+        marginBottom: 16,
36
+    },
37
+});
38
+
39
+type Props = {
40
+    onDone: Function,
41
+};
42
+
43
+export default class CustomIntroSlider extends React.Component<Props> {
44
+
45
+    slides: Array<Object>;
46
+
47
+    constructor() {
48
+        super();
49
+        this.slides = [
50
+            {
51
+                key: '1',
52
+                title: i18n.t('intro.slide1.title'),
53
+                text: i18n.t('intro.slide1.text'),
54
+                image: require('../assets/drawer-cover.png'),
55
+                colors: ['#e01928', '#be1522'],
56
+            },
57
+            {
58
+                key: '2',
59
+                title: i18n.t('intro.slide2.title'),
60
+                text: i18n.t('intro.slide2.text'),
61
+                icon: 'calendar-range',
62
+                colors: ['#d99e09', '#c28d08'],
63
+            },
64
+            {
65
+                key: '3',
66
+                title: i18n.t('intro.slide3.title'),
67
+                text: i18n.t('intro.slide3.text'),
68
+                icon: 'washing-machine',
69
+                colors: ['#1fa5ee', '#1c97da'],
70
+            },
71
+            {
72
+                key: '4',
73
+                title: i18n.t('intro.slide4.title'),
74
+                text: i18n.t('intro.slide4.text'),
75
+                icon: 'shopping',
76
+                colors: ['#ec5904', '#da5204'],
77
+            },
78
+            {
79
+                key: '5',
80
+                title: i18n.t('intro.slide5.title'),
81
+                text: i18n.t('intro.slide5.text'),
82
+                icon: 'timetable',
83
+                colors: ['#7c33ec', '#732fda'],
84
+            },
85
+            {
86
+                key: '6',
87
+                title: i18n.t('intro.slide6.title'),
88
+                text: i18n.t('intro.slide6.text'),
89
+                icon: 'cogs',
90
+                colors: ['#37c13e', '#26852b'],
91
+            },
92
+        ];
93
+    }
94
+
95
+
96
+    /**
97
+     * Render item to be used for the intro slides
98
+     * @param item
99
+     * @param dimensions
100
+     */
101
+    static getIntroRenderItem(item: Object, dimensions: Object) {
102
+
103
+        return (
104
+            <LinearGradient
105
+                style={[
106
+                    styles.mainContent,
107
+                    dimensions,
108
+                ]}
109
+                colors={item.colors}
110
+                start={{x: 0, y: 0.1}}
111
+                end={{x: 0.1, y: 1}}
112
+            >
113
+                {item.image !== undefined ?
114
+                    <Image source={item.image} style={styles.image}/>
115
+                    : <CustomMaterialIcon icon={item.icon} color={'#fff'} fontSize={200} width={200}/>}
116
+                <View style={{marginTop: 20}}>
117
+                    <Text style={styles.title}>{item.title}</Text>
118
+                    <Text style={styles.text}>{item.text}</Text>
119
+                </View>
120
+            </LinearGradient>
121
+        );
122
+    }
123
+
124
+    render() {
125
+        return (
126
+            <AppIntroSlider renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)}
127
+                            slides={this.slides} onDone={() => this.props.onDone()} bottomButton showSkipButton/>
128
+        );
129
+    }
130
+
131
+}
132
+
133
+

+ 26
- 0
translations/en.json View File

@@ -7,6 +7,32 @@
7 7
     "settings": "Settings",
8 8
     "about": "About"
9 9
   },
10
+  "intro": {
11
+    "slide1": {
12
+      "title": "Welcome to COFFEE",
13
+      "text": "The new app to use during your coffee break to get updates on the campus life!",
14
+    },
15
+    "slide2": {
16
+      "title": "Stay up to date",
17
+      "text": "COFFEE will soon allow you to be aware of any event occuring on the campus, from pancake sales to Enfoiros concerts!"
18
+    },
19
+    "slide3": {
20
+      "title": "Never forget your laundry",
21
+      "text": "COFFEE will inform you on the availability of washing machines and will remind you just before yours finishes !"
22
+    },
23
+    "slide4": {
24
+      "title": "Proximo",
25
+      "text": "Are you short on pasta? Or you maybe you feel a little peckish, then lookup the stock for your insa shop in real time"
26
+    },
27
+    "slide5": {
28
+      "title": "Planex",
29
+      "text": "Lookup your timetable on COFFE"
30
+    },
31
+    "slide6": {
32
+      "title": "Still in development",
33
+      "text": "New features coming soon, do not hesitate to give us feedback to improve the app"
34
+    }
35
+  },
10 36
   "settingsScreen": {
11 37
     "appearanceCard": "Appearance",
12 38
     "nightMode": "Night Mode",

+ 26
- 0
translations/fr.json View File

@@ -7,6 +7,32 @@
7 7
     "settings": "Paramètres",
8 8
     "about": "À Propos"
9 9
   },
10
+  "intro": {
11
+    "slide1": {
12
+      "title": "Bienvenue sur COFFEE",
13
+      "text": "La nouvelle app à consulter pendant la pause café pour être au courant de la vie du campus !"
14
+    },
15
+    "slide2": {
16
+      "title": "Restez informés",
17
+      "text": "COFFEE vous permettra bientôt d'être au courant de tous les événements qui ont lieu sur le campus, de la vente de crêpes jusqu'aux concerts enfoiros !"
18
+    },
19
+    "slide3": {
20
+      "title": "N'oubliez plus votre linge !",
21
+      "text": "COFFEE vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !"
22
+    },
23
+    "slide4": {
24
+      "title": "Proximo",
25
+      "text": "Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel"
26
+    },
27
+    "slide5": {
28
+      "title": "Planex",
29
+      "text": "Consultez votre emploi du temps sur COFFEE"
30
+    },
31
+    "slide6": {
32
+      "title": "Toujours en développement",
33
+      "text": "D'autres fonctionnalités arrivent bientôt, n'hésitez pas à nous donner votre avis pour améliorer l'appli"
34
+    }
35
+  },
10 36
   "settingsScreen": {
11 37
     "appearanceCard": "Apparence",
12 38
     "nightMode": "Mode Nuit",

Loading…
Cancel
Save