forked from vergnet/application-amicale
Improved intro slides
This commit is contained in:
parent
ca03b70603
commit
5f9132a670
4 changed files with 84 additions and 17 deletions
|
|
@ -380,7 +380,7 @@
|
|||
"text": "Regarde ton emploi du temps et celui de tes amis avec un Planex adapté mobile !"
|
||||
},
|
||||
"slideEvents": {
|
||||
"title": "Plein d'infos",
|
||||
"title": "Les Events",
|
||||
"text": "Sois au courant de tout ce qui se passe sur le campus, de la vente de crêpes jusqu'aux concerts Enfoiros !"
|
||||
},
|
||||
"slideServices": {
|
||||
|
|
@ -388,7 +388,7 @@
|
|||
"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 !"
|
||||
},
|
||||
"slideDone": {
|
||||
"title": "Réalisé par un étudiant",
|
||||
"title": "Ton avis compte !",
|
||||
"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 !"
|
||||
},
|
||||
"updateSlide0": {
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ class MascotPopup extends React.Component<Props, State> {
|
|||
</ScrollView>
|
||||
</Card.Content>
|
||||
|
||||
<Card.Actions>
|
||||
<Card.Actions style={{marginTop: 10, marginBottom: 10}}>
|
||||
{this.getButtons()}
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
|
|
@ -238,12 +238,18 @@ class MascotPopup extends React.Component<Props, State> {
|
|||
<View style={{
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
}}>
|
||||
<View style={{
|
||||
marginTop: -80,
|
||||
}}>
|
||||
{this.getMascot()}
|
||||
{this.getSpeechBubble()}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</Portal>
|
||||
);
|
||||
)
|
||||
;
|
||||
} else
|
||||
return null;
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
|
|||
key: '4',
|
||||
title: i18n.t('intro.slideDone.title'),
|
||||
text: i18n.t('intro.slideDone.text'),
|
||||
view: () => this.getIconView("account-heart",),
|
||||
view: () => this.getEndView(),
|
||||
mascotStyle: MASCOT_STYLE.COOL,
|
||||
colors: ['#9c165b', '#3e042b'],
|
||||
},
|
||||
|
|
@ -146,7 +146,7 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
|
|||
</View>
|
||||
<Animatable.View
|
||||
animation={"fadeIn"}>
|
||||
{index !== 0
|
||||
{index !== 0 && index !== this.introSlides.length -1
|
||||
? <Animatable.View
|
||||
animation={"pulse"}
|
||||
iterationCount={"infinite"}
|
||||
|
|
@ -154,9 +154,10 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
|
|||
style={{
|
||||
marginLeft: 30,
|
||||
marginBottom: 0,
|
||||
width: 80
|
||||
width: 100,
|
||||
marginTop: -30,
|
||||
}}>
|
||||
<Mascot emotion={item.mascotStyle} size={80}/>
|
||||
<Mascot emotion={item.mascotStyle} size={100}/>
|
||||
</Animatable.View> : null}
|
||||
|
||||
<View style={{
|
||||
|
|
@ -200,6 +201,30 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
getEndView = () => {
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<View
|
||||
style={styles.center}>
|
||||
<Mascot
|
||||
size={250}
|
||||
emotion={MASCOT_STYLE.COOL}
|
||||
animated={true}
|
||||
entryAnimation={{
|
||||
animation: "slideInDown",
|
||||
duration: 2000,
|
||||
}}
|
||||
loopAnimation={{
|
||||
animation: "pulse",
|
||||
duration: 2000,
|
||||
iterationCount: "infinite"
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getWelcomeView = () => {
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
|
|
@ -214,6 +239,43 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
|
|||
duration: 2000,
|
||||
}}
|
||||
/>
|
||||
<Animatable.Text
|
||||
useNativeDriver={true}
|
||||
animation={"fadeInUp"}
|
||||
duration={500}
|
||||
|
||||
style={{
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
fontSize: 25,
|
||||
}}>
|
||||
PABLO
|
||||
</Animatable.Text>
|
||||
<Animatable.View
|
||||
useNativeDriver={true}
|
||||
animation={"fadeInUp"}
|
||||
duration={500}
|
||||
delay={200}
|
||||
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 210,
|
||||
left: 160,
|
||||
width: 50,
|
||||
height: 50,
|
||||
}}>
|
||||
<MaterialCommunityIcons
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
transform: [{rotateZ: "70deg"}],
|
||||
}}
|
||||
name={"undo"}
|
||||
color={'#fff'}
|
||||
size={40}/>
|
||||
</Animatable.View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import * as React from 'react';
|
||||
import {View} from "react-native";
|
||||
import {TouchableRipple, withTheme} from 'react-native-paper';
|
||||
import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
|
||||
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
||||
import * as Animatable from "react-native-animatable";
|
||||
|
||||
|
|
@ -10,15 +11,13 @@ type Props = {
|
|||
focused: boolean,
|
||||
color: string,
|
||||
label: string,
|
||||
icon: string,
|
||||
icon: MaterialCommunityIconsGlyphs,
|
||||
onPress: Function,
|
||||
onLongPress: Function,
|
||||
theme: Object,
|
||||
extraData: any,
|
||||
}
|
||||
|
||||
const AnimatedIcon = Animatable.createAnimatableComponent(MaterialCommunityIcons);
|
||||
|
||||
|
||||
/**
|
||||
* Abstraction layer for Agenda component, using custom configuration
|
||||
|
|
@ -83,7 +82,7 @@ class TabIcon extends React.Component<Props> {
|
|||
animation={props.focused ? "focusIn" : "focusOut"}
|
||||
useNativeDriver
|
||||
>
|
||||
<AnimatedIcon
|
||||
<MaterialCommunityIcons
|
||||
name={props.icon}
|
||||
color={props.color}
|
||||
size={26}
|
||||
|
|
|
|||
Loading…
Reference in a new issue