From 228a3dbabf6f52ff9965d3d6613b2194f71172b6 Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 7 Aug 2019 14:39:20 +0200 Subject: [PATCH] added translations for intro slides and moved intro in separate custom component --- App.js | 117 ++-------------------------- components/CustomIntroSlider.js | 133 ++++++++++++++++++++++++++++++++ translations/en.json | 26 +++++++ translations/fr.json | 26 +++++++ 4 files changed, 190 insertions(+), 112 deletions(-) create mode 100644 components/CustomIntroSlider.js diff --git a/App.js b/App.js index 2aa6fd4..97494d1 100644 --- a/App.js +++ b/App.js @@ -1,95 +1,18 @@ // @flow import * as React from 'react'; -import {Root, StyleProvider, Text} from 'native-base'; -import {Image, StyleSheet, View} from 'react-native' +import {Root, StyleProvider} from 'native-base'; +import {View} from 'react-native' import AppNavigator from './navigation/AppNavigator'; import ThemeManager from './utils/ThemeManager'; import LocaleManager from './utils/LocaleManager'; import * as Font from 'expo-font'; -import {LinearGradient} from 'expo-linear-gradient'; -import AppIntroSlider from 'react-native-app-intro-slider'; // edited native-base-shoutem-theme according to // https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422 // to allow for dynamic theme switching import {clearThemeCache} from 'native-base-shoutem-theme'; import AsyncStorageManager from "./utils/AsyncStorageManager"; -import CustomMaterialIcon from "./components/CustomMaterialIcon"; -import SideBar from "./components/Sidebar"; -import SideMenu from "react-native-side-menu"; - -const styles = StyleSheet.create({ - mainContent: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - paddingBottom: 100 - }, - image: { - width: 200, - height: 200, - }, - text: { - color: 'rgba(255, 255, 255, 0.8)', - backgroundColor: 'transparent', - textAlign: 'center', - paddingHorizontal: 16, - }, - title: { - fontSize: 22, - color: 'white', - backgroundColor: 'transparent', - textAlign: 'center', - marginBottom: 16, - }, -}); - -// Content to be used int the intro slides -const slides = [ - { - key: '1', - title: 'Bienvenue sur COFFEE', - text: ' La nouvelle app à consulter pendant la pause café pour être au courant de la vie du campus !', - image: require('./assets/drawer-cover.png'), - colors: ['#e01928', '#be1522'], - }, - { - key: '2', - title: 'Restez informés', - 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 !', - icon: 'calendar-range', - colors: ['#d99e09', '#c28d08'], - }, - { - key: '3', - title: 'N\'oubliez plus votre linge !', - text: 'COFFEE vous informe de la disponibilité des machines et vous permet d\'être notifiés lorsque la vôtre se termine bientôt !', - icon: 'washing-machine', - colors: ['#1fa5ee', '#1c97da'], - }, - { - key: '4', - title: 'Proximo', - 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', - icon: 'shopping', - colors: ['#ec5904', '#da5204'], - }, - { - key: '5', - title: 'Planex', - text: 'Consultez votre emploi du temps sur COFFEE', - icon: 'timetable', - colors: ['#7c33ec', '#732fda'], - }, - { - key: '6', - title: 'Toujours en développement', - text: 'D\'autres fonctionnalités arrivent bientôt, n\'hésitez pas à nous donner votre avis pour améliorer l\'appli', - icon: 'cogs', - colors: ['#37c13e', '#26852b'], - }, -]; - +import CustomIntroSlider from "./components/CustomIntroSlider"; type Props = {}; @@ -143,33 +66,6 @@ export default class App extends React.Component { clearThemeCache(); } - /** - * Render item to be used for the intro slides - * @param item - * @param dimensions - */ - getIntroRenderItem(item: Object, dimensions: Object) { - return ( - - {item.image !== undefined ? - - : } - - {item.title} - {item.text} - - - ); - } - /** * Callback when user ends the intro. Save in preferences to avaoid showing back the slides */ @@ -186,18 +82,15 @@ export default class App extends React.Component { return ; } if (this.state.showIntro) { - return this.getIntroRenderItem(item, dimensions)} - slides={slides} onDone={() => this.onIntroDone()} bottomButton showSkipButton/>; + return this.onIntroDone()}/>; } else { return ( - + ); } } - - menu = ; } diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js new file mode 100644 index 0000000..7d91ed9 --- /dev/null +++ b/components/CustomIntroSlider.js @@ -0,0 +1,133 @@ +// @flow + +import * as React from 'react'; +import {LinearGradient} from "expo-linear-gradient"; +import {Image, StyleSheet, View} from "react-native"; +import CustomMaterialIcon from "./CustomMaterialIcon"; +import {Text} from "native-base"; +import i18n from 'i18n-js'; +import AppIntroSlider from "react-native-app-intro-slider"; + +// Content to be used int the intro slides + +const styles = StyleSheet.create({ + mainContent: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + paddingBottom: 100 + }, + image: { + width: 200, + height: 200, + }, + text: { + color: 'rgba(255, 255, 255, 0.8)', + backgroundColor: 'transparent', + textAlign: 'center', + paddingHorizontal: 16, + }, + title: { + fontSize: 22, + color: 'white', + backgroundColor: 'transparent', + textAlign: 'center', + marginBottom: 16, + }, +}); + +type Props = { + onDone: Function, +}; + +export default class CustomIntroSlider extends React.Component { + + slides: Array; + + constructor() { + super(); + this.slides = [ + { + key: '1', + title: i18n.t('intro.slide1.title'), + text: i18n.t('intro.slide1.text'), + image: require('../assets/drawer-cover.png'), + colors: ['#e01928', '#be1522'], + }, + { + key: '2', + title: i18n.t('intro.slide2.title'), + text: i18n.t('intro.slide2.text'), + icon: 'calendar-range', + colors: ['#d99e09', '#c28d08'], + }, + { + key: '3', + title: i18n.t('intro.slide3.title'), + text: i18n.t('intro.slide3.text'), + icon: 'washing-machine', + colors: ['#1fa5ee', '#1c97da'], + }, + { + key: '4', + title: i18n.t('intro.slide4.title'), + text: i18n.t('intro.slide4.text'), + icon: 'shopping', + colors: ['#ec5904', '#da5204'], + }, + { + key: '5', + title: i18n.t('intro.slide5.title'), + text: i18n.t('intro.slide5.text'), + icon: 'timetable', + colors: ['#7c33ec', '#732fda'], + }, + { + key: '6', + title: i18n.t('intro.slide6.title'), + text: i18n.t('intro.slide6.text'), + icon: 'cogs', + colors: ['#37c13e', '#26852b'], + }, + ]; + } + + + /** + * Render item to be used for the intro slides + * @param item + * @param dimensions + */ + static getIntroRenderItem(item: Object, dimensions: Object) { + + return ( + + {item.image !== undefined ? + + : } + + {item.title} + {item.text} + + + ); + } + + render() { + return ( + CustomIntroSlider.getIntroRenderItem(item, dimensions)} + slides={this.slides} onDone={() => this.props.onDone()} bottomButton showSkipButton/> + ); + } + +} + + diff --git a/translations/en.json b/translations/en.json index 30aa158..00f5790 100644 --- a/translations/en.json +++ b/translations/en.json @@ -7,6 +7,32 @@ "settings": "Settings", "about": "About" }, + "intro": { + "slide1": { + "title": "Welcome to COFFEE", + "text": "The new app to use during your coffee break to get updates on the campus life!", + }, + "slide2": { + "title": "Stay up to date", + "text": "COFFEE will soon allow you to be aware of any event occuring on the campus, from pancake sales to Enfoiros concerts!" + }, + "slide3": { + "title": "Never forget your laundry", + "text": "COFFEE will inform you on the availability of washing machines and will remind you just before yours finishes !" + }, + "slide4": { + "title": "Proximo", + "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" + }, + "slide5": { + "title": "Planex", + "text": "Lookup your timetable on COFFE" + }, + "slide6": { + "title": "Still in development", + "text": "New features coming soon, do not hesitate to give us feedback to improve the app" + } + }, "settingsScreen": { "appearanceCard": "Appearance", "nightMode": "Night Mode", diff --git a/translations/fr.json b/translations/fr.json index 891b5b1..498621b 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -7,6 +7,32 @@ "settings": "Paramètres", "about": "À Propos" }, + "intro": { + "slide1": { + "title": "Bienvenue sur COFFEE", + "text": "La nouvelle app à consulter pendant la pause café pour être au courant de la vie du campus !" + }, + "slide2": { + "title": "Restez informés", + "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 !" + }, + "slide3": { + "title": "N'oubliez plus votre linge !", + "text": "COFFEE vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !" + }, + "slide4": { + "title": "Proximo", + "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" + }, + "slide5": { + "title": "Planex", + "text": "Consultez votre emploi du temps sur COFFEE" + }, + "slide6": { + "title": "Toujours en développement", + "text": "D'autres fonctionnalités arrivent bientôt, n'hésitez pas à nous donner votre avis pour améliorer l'appli" + } + }, "settingsScreen": { "appearanceCard": "Apparence", "nightMode": "Mode Nuit",