Browse Source

Improved intro slides

Arnaud Vergnet 3 years ago
parent
commit
5f9132a670

+ 2
- 2
locales/fr.json View File

@@ -380,7 +380,7 @@
380 380
       "text": "Regarde ton emploi du temps et celui de tes amis avec un Planex adapté mobile !"
381 381
     },
382 382
     "slideEvents": {
383
-      "title": "Plein d'infos",
383
+      "title": "Les Events",
384 384
       "text": "Sois au courant de tout ce qui se passe sur le campus, de la vente de crêpes jusqu'aux concerts Enfoiros !"
385 385
     },
386 386
     "slideServices": {
@@ -388,7 +388,7 @@
388 388
       "text": "Tu peux faire bien plus avec CAMPUS, mais je n'ai pas le temps de tout dire ici. Balade toi sur l'appli pour tout découvrir !"
389 389
     },
390 390
     "slideDone": {
391
-      "title": "Réalisé par un étudiant",
391
+      "title": "Ton avis compte !",
392 392
       "text": "Cette appli à été réalisée par un seul étudiant (avec un peu d'aide par-ci par-là), donc tes retours sont les bienvenus !"
393 393
     },
394 394
     "updateSlide0": {

+ 12
- 6
src/components/Mascot/MascotPopup.js View File

@@ -64,7 +64,7 @@ class MascotPopup extends React.Component<Props, State> {
64 64
     shouldComponentUpdate(nextProps: Props): boolean {
65 65
         if (nextProps.visible) {
66 66
             this.state.shouldShowDialog = true;
67
-        }else if (nextProps.visible !== this.props.visible) {
67
+        } else if (nextProps.visible !== this.props.visible) {
68 68
             setTimeout(this.onAnimationEnd, 300);
69 69
         }
70 70
         return true;
@@ -144,7 +144,7 @@ class MascotPopup extends React.Component<Props, State> {
144 144
                         </ScrollView>
145 145
                     </Card.Content>
146 146
 
147
-                    <Card.Actions>
147
+                    <Card.Actions style={{marginTop: 10, marginBottom: 10}}>
148 148
                         {this.getButtons()}
149 149
                     </Card.Actions>
150 150
                 </Card>
@@ -239,11 +239,17 @@ class MascotPopup extends React.Component<Props, State> {
239 239
                         marginTop: "auto",
240 240
                         marginBottom: "auto",
241 241
                     }}>
242
-                        {this.getMascot()}
243
-                        {this.getSpeechBubble()}
242
+                        <View style={{
243
+                            marginTop: -80,
244
+                        }}>
245
+                            {this.getMascot()}
246
+                            {this.getSpeechBubble()}
244 247
                     </View>
245
-                </Portal>
246
-            );
248
+
249
+                </View>
250
+        </Portal>
251
+        )
252
+            ;
247 253
         } else
248 254
             return null;
249 255
 

+ 66
- 4
src/components/Overrides/CustomIntroSlider.js View File

@@ -91,7 +91,7 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
91 91
                 key: '4',
92 92
                 title: i18n.t('intro.slideDone.title'),
93 93
                 text: i18n.t('intro.slideDone.text'),
94
-                view: () => this.getIconView("account-heart",),
94
+                view: () => this.getEndView(),
95 95
                 mascotStyle: MASCOT_STYLE.COOL,
96 96
                 colors: ['#9c165b', '#3e042b'],
97 97
             },
@@ -146,7 +146,7 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
146 146
                         </View>
147 147
                         <Animatable.View
148 148
                             animation={"fadeIn"}>
149
-                            {index !== 0
149
+                            {index !== 0 && index !== this.introSlides.length -1
150 150
                                 ? <Animatable.View
151 151
                                     animation={"pulse"}
152 152
                                     iterationCount={"infinite"}
@@ -154,9 +154,10 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
154 154
                                     style={{
155 155
                                         marginLeft: 30,
156 156
                                         marginBottom: 0,
157
-                                        width: 80
157
+                                        width: 100,
158
+                                        marginTop: -30,
158 159
                                     }}>
159
-                                    <Mascot emotion={item.mascotStyle} size={80}/>
160
+                                    <Mascot emotion={item.mascotStyle} size={100}/>
160 161
                                 </Animatable.View> : null}
161 162
 
162 163
                             <View style={{
@@ -200,6 +201,30 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
200 201
         );
201 202
     }
202 203
 
204
+    getEndView = () => {
205
+        return (
206
+            <View style={{flex: 1}}>
207
+                <View
208
+                    style={styles.center}>
209
+                    <Mascot
210
+                        size={250}
211
+                        emotion={MASCOT_STYLE.COOL}
212
+                        animated={true}
213
+                        entryAnimation={{
214
+                            animation: "slideInDown",
215
+                            duration: 2000,
216
+                        }}
217
+                        loopAnimation={{
218
+                            animation: "pulse",
219
+                            duration: 2000,
220
+                            iterationCount: "infinite"
221
+                        }}
222
+                    />
223
+                </View>
224
+            </View>
225
+        );
226
+    }
227
+
203 228
     getWelcomeView = () => {
204 229
         return (
205 230
             <View style={{flex: 1}}>
@@ -214,6 +239,43 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
214 239
                             duration: 2000,
215 240
                         }}
216 241
                     />
242
+                    <Animatable.Text
243
+                        useNativeDriver={true}
244
+                        animation={"fadeInUp"}
245
+                        duration={500}
246
+
247
+                        style={{
248
+                        color: "#fff",
249
+                        textAlign: "center",
250
+                        fontSize: 25,
251
+                    }}>
252
+                        PABLO
253
+                    </Animatable.Text>
254
+                    <Animatable.View
255
+                        useNativeDriver={true}
256
+                        animation={"fadeInUp"}
257
+                        duration={500}
258
+                        delay={200}
259
+
260
+                        style={{
261
+                            position: "absolute",
262
+                            top: 210,
263
+                            left: 160,
264
+                            width: 50,
265
+                            height: 50,
266
+                        }}>
267
+                        <MaterialCommunityIcons
268
+                            style={{
269
+                                marginLeft: "auto",
270
+                                marginRight: "auto",
271
+                                marginTop: "auto",
272
+                                marginBottom: "auto",
273
+                                transform: [{rotateZ: "70deg"}],
274
+                            }}
275
+                            name={"undo"}
276
+                            color={'#fff'}
277
+                            size={40}/>
278
+                    </Animatable.View>
217 279
                 </View>
218 280
             </View>
219 281
         )

+ 4
- 5
src/components/Tabbar/TabIcon.js View File

@@ -3,6 +3,7 @@
3 3
 import * as React from 'react';
4 4
 import {View} from "react-native";
5 5
 import {TouchableRipple, withTheme} from 'react-native-paper';
6
+import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
6 7
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
7 8
 import * as Animatable from "react-native-animatable";
8 9
 
@@ -10,15 +11,13 @@ type Props = {
10 11
     focused: boolean,
11 12
     color: string,
12 13
     label: string,
13
-    icon: string,
14
+    icon: MaterialCommunityIconsGlyphs,
14 15
     onPress: Function,
15 16
     onLongPress: Function,
16 17
     theme: Object,
17 18
     extraData: any,
18 19
 }
19 20
 
20
-const AnimatedIcon = Animatable.createAnimatableComponent(MaterialCommunityIcons);
21
-
22 21
 
23 22
 /**
24 23
  * Abstraction layer for Agenda component, using custom configuration
@@ -83,7 +82,7 @@ class TabIcon extends React.Component<Props> {
83 82
                         animation={props.focused ? "focusIn" : "focusOut"}
84 83
                         useNativeDriver
85 84
                     >
86
-                        <AnimatedIcon
85
+                        <MaterialCommunityIcons
87 86
                             name={props.icon}
88 87
                             color={props.color}
89 88
                             size={26}
@@ -112,4 +111,4 @@ class TabIcon extends React.Component<Props> {
112 111
     }
113 112
 }
114 113
 
115
-export default withTheme(TabIcon);
114
+export default withTheme(TabIcon);

Loading…
Cancel
Save