From a7211f23dfd33be28d6ca874fd63ba9788a8868e Mon Sep 17 00:00:00 2001 From: Dslak Date: Sun, 20 Oct 2019 17:46:52 +0200 Subject: [PATCH] use variables --- vds-app/App/components/Alert.js | 25 ++++---- vds-app/App/components/Button.js | 15 ++--- vds-app/App/components/Results.js | 35 ++++++----- vds-app/App/components/RowItem.js | 20 +++--- vds-app/App/components/Variables.js | 31 +++++++++ vds-app/App/index.js | 20 +++--- vds-app/App/screens/Quiz.js | 18 +++--- vds-app/App/screens/QuizIndex.js | 97 +++++++++++++++++------------ 8 files changed, 159 insertions(+), 102 deletions(-) create mode 100644 vds-app/App/components/Variables.js diff --git a/vds-app/App/components/Alert.js b/vds-app/App/components/Alert.js index 7f4adaf..71d70bf 100644 --- a/vds-app/App/components/Alert.js +++ b/vds-app/App/components/Alert.js @@ -1,7 +1,8 @@ -import React from "react"; -import { View, StyleSheet, Dimensions, Image } from "react-native"; +import React from "react" +import { View, StyleSheet, Dimensions, Image } from "react-native" +import { colors } from "../components/Variables" -const screen = Dimensions.get("window"); +const screen = Dimensions.get("window") const styles = StyleSheet.create({ container: { @@ -15,7 +16,7 @@ const styles = StyleSheet.create({ justifyContent: "center" }, circle: { - backgroundColor: "#af321e", + backgroundColor: colors.red, width: screen.width / 2, height: screen.width / 2, borderRadius: screen.width / 2, @@ -23,24 +24,24 @@ const styles = StyleSheet.create({ justifyContent: "center" }, circleCorrect: { - backgroundColor: "#28A125" + backgroundColor: colors.green }, icon: { width: screen.width / 3 } -}); +}) export const Alert = ({ correct, visible }) => { - if (!visible) return null; + if (!visible) return null const icon = correct ? require("../assets/check.png") - : require("../assets/close.png"); + : require("../assets/close.png") - const circleStyles = [styles.circle]; + const circleStyles = [styles.circle] if (correct) { - circleStyles.push(styles.circleCorrect); + circleStyles.push(styles.circleCorrect) } return ( @@ -49,5 +50,5 @@ export const Alert = ({ correct, visible }) => { - ); -}; + ) +} diff --git a/vds-app/App/components/Button.js b/vds-app/App/components/Button.js index 892e4dd..dfaf86c 100644 --- a/vds-app/App/components/Button.js +++ b/vds-app/App/components/Button.js @@ -1,9 +1,10 @@ -import React from "react"; -import { View, TouchableOpacity, Text, StyleSheet } from "react-native"; +import React from "react" +import { View, TouchableOpacity, Text, StyleSheet } from "react-native" +import { colors } from "../components/Variables" const styles = StyleSheet.create({ button: { - backgroundColor: "rgba(255, 255, 255, 0.3)", + backgroundColor: colors.white_alpha, borderRadius: 10, paddingHorizontal: 10, paddingVertical: 10, @@ -13,7 +14,7 @@ const styles = StyleSheet.create({ marginTop: 20 }, text: { - color: "#fff", + color: colors.white, fontSize: 20, textAlign: "center" }, @@ -23,14 +24,14 @@ const styles = StyleSheet.create({ marginTop: 10, justifyContent: "space-between" } -}); +}) export const Button = ({ text, onPress = () => {} }) => ( {text} -); +) export const ButtonContainer = ({ children }) => ( {children} -); +) diff --git a/vds-app/App/components/Results.js b/vds-app/App/components/Results.js index 88cab72..6e95233 100644 --- a/vds-app/App/components/Results.js +++ b/vds-app/App/components/Results.js @@ -1,7 +1,8 @@ -import React from "react"; -import { View, StyleSheet, Dimensions, Text } from "react-native"; +import React from "react" +import { View, StyleSheet, Dimensions, Text } from "react-native" +import { colors, texts } from "../components/Variables" -const screen = Dimensions.get("window"); +const screen = Dimensions.get("window") const styles = StyleSheet.create({ container: { @@ -15,27 +16,27 @@ const styles = StyleSheet.create({ justifyContent: "center" }, box: { - backgroundColor: 'rgba(40, 160, 40, 0.9)', + backgroundColor: colors.green_alpha, width: screen.width / 1.1, height: screen.height / 2, borderRadius: 5, - borderColor: 'rgba(255, 255, 255, 0.5)', + borderColor: colors.white_alpha, borderWidth: 5, alignItems: "center", justifyContent: "center" }, boxLooser: { - backgroundColor: 'rgba(175, 50, 30, 0.9)', + backgroundColor: colors.red_alpha, width: screen.width / 1.1, height: screen.height / 2, borderRadius: 5, - borderColor: 'rgba(255, 255, 255, 0.5)', + borderColor: colors.white_alpha, borderWidth: 5, alignItems: "center", justifyContent: "center" }, text: { - color: "#fff", + color: colors.white, fontSize: 25, textAlign: "center", letterSpacing: -0.02, @@ -47,15 +48,15 @@ const styles = StyleSheet.create({ paddingVertical: 20 }, correct: { - color: "#28A125" + color: colors.green }, wrong: { - color: "#af321e" + color: colors.red } -}); +}) export const Results = ({ correct, wrong, visible }) => { - if (!visible) return null; + if (!visible) return null const total = wrong+correct const percentage = (100/total) * correct @@ -66,24 +67,24 @@ export const Results = ({ correct, wrong, visible }) => { - {`Corrette: `} + {`${texts.corrects}: `} {`${correct}`} - {`Sbagliate: `} + {`${texts.wrongs}: `} {`${wrong}`} - {`Percentuale: `} + {`${texts.percentage}: `} {`${Math.round(percentage)}%`} - ); -}; + ) +} diff --git a/vds-app/App/components/RowItem.js b/vds-app/App/components/RowItem.js index 7564aa4..4930195 100644 --- a/vds-app/App/components/RowItem.js +++ b/vds-app/App/components/RowItem.js @@ -1,19 +1,21 @@ -import React from "react"; -import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; +import React from "react" +import { View, Text, TouchableOpacity, StyleSheet } from "react-native" +import { colors } from "../components/Variables" const styles = StyleSheet.create({ row: { paddingHorizontal: 15, - paddingVertical: 10, - backgroundColor: "#36B1F0", - marginBottom: 1 + paddingVertical: 20, + backgroundColor: colors.blue, + borderBottomColor: colors.dark_blue, + borderBottomWidth: 1 }, text: { fontSize: 18, - color: "#fff", - fontWeight: "600" + color: colors.white, + fontWeight: "400" } -}); +}) export const RowItem = ({ onPress = () => {}, name, color }) => ( @@ -21,4 +23,4 @@ export const RowItem = ({ onPress = () => {}, name, color }) => ( {name} -); +) diff --git a/vds-app/App/components/Variables.js b/vds-app/App/components/Variables.js new file mode 100644 index 0000000..a3200ab --- /dev/null +++ b/vds-app/App/components/Variables.js @@ -0,0 +1,31 @@ +export const colors = { + white: "#fff", + white_alpha: "rgba(255, 255, 255, 0.3)", + black: "#000", + blue: "#36b1f0", + dark_blue: "#15a7f0", + red: "#af321e", + red_alpha: "rgba(175, 50, 30, 0.9)", + green: "#28A125", + green_alpha: "rgba(40, 160, 40, 0.9)", + yellow: "#e1ff3c", + yellow_alpha: "rgba(225, 255, 60, 0.9)", + orange: "#ff9b32" +} + +export const texts = { + quizzes: "Seleziona un quiz", + exam: "Simulazione esame", + corrects: "Corrette", + wrongs: "Sbagliate", + percentage: "Percentuale", + aerodynamics: "Aerodinamica", + first_aid: "Primo soccorso", + flight_safety: "Sicurezza in volo", + instruments: "Strumentazione", + legislation: "Normativa e legislazione", + materials: "Materiali", + meteorology: "Meteorologia e aerologia", + physiopathology: "Fisiopatologia del volo", + piloting_techniques: "Tecniche di pilotaggio" +} diff --git a/vds-app/App/index.js b/vds-app/App/index.js index 8d2c498..eff7a1a 100644 --- a/vds-app/App/index.js +++ b/vds-app/App/index.js @@ -1,26 +1,32 @@ -import { createStackNavigator, createAppContainer } from "react-navigation"; +import { createStackNavigator, createAppContainer } from "react-navigation" -import QuizIndex from "./screens/QuizIndex"; -import Quiz from "./screens/Quiz"; +import QuizIndex from "./screens/QuizIndex" +import Quiz from "./screens/Quiz" +import { colors, texts} from "./components/Variables" const MainStack = createStackNavigator({ QuizIndex: { screen: QuizIndex, navigationOptions: { - headerTitle: "Quizzes" + headerTitle: texts.quizzes, + headerTintColor: colors.white, + backgroundColor: colors.dark_blue, + headerStyle: { + backgroundColor: colors.dark_blue + } } }, Quiz: { screen: Quiz, navigationOptions: ({ navigation }) => ({ headerTitle: navigation.getParam("title"), - headerTintColor: "#fff", + headerTintColor: colors.white, headerStyle: { backgroundColor: navigation.getParam("color"), borderBottomColor: navigation.getParam("color") } }) } -}); +}) -export default createAppContainer(MainStack); +export default createAppContainer(MainStack) diff --git a/vds-app/App/screens/Quiz.js b/vds-app/App/screens/Quiz.js index 40b51ca..0760ef0 100644 --- a/vds-app/App/screens/Quiz.js +++ b/vds-app/App/screens/Quiz.js @@ -1,27 +1,28 @@ import React from "react" -import { View, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native" +import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native" import { Button, ButtonContainer } from "../components/Button" import { Alert } from "../components/Alert" import { Results } from "../components/Results" +import { colors } from "../components/Variables" const styles = StyleSheet.create({ container: { - backgroundColor: "#36B1F0", + backgroundColor: colors.blue, flex: 1, paddingHorizontal: 20 }, text: { - color: "#fff", + color: colors.white, fontSize: 20, textAlign: "center", - letterSpacing: -0.02, fontWeight: "600", - paddingVertical: 20 + paddingVertical: 20, + marginTop: 20, }, safearea: { flex: 1, - marginTop: 30, + marginTop: 20, justifyContent: "space-between" } }) @@ -90,8 +91,7 @@ class Quiz extends React.Component { const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0] return ( - - + ) } } diff --git a/vds-app/App/screens/QuizIndex.js b/vds-app/App/screens/QuizIndex.js index 48a5eac..c28b1e9 100644 --- a/vds-app/App/screens/QuizIndex.js +++ b/vds-app/App/screens/QuizIndex.js @@ -1,84 +1,99 @@ -import React from "react"; -import { ScrollView, StatusBar } from "react-native"; +import React from "react" +import { ScrollView, StatusBar } from "react-native" -import testQuestions from "../data/test"; -import aerodynamicsQuestions from "../data/aerodynamics"; -import firstAidQuestions from "../data/firstAid"; -import flightSafetyQuestions from "../data/flightSafety"; -import instrumentsQuestions from "../data/instruments"; -import legislationQuestions from "../data/legislation"; -import materialsQuestions from "../data/materials"; -import meteorologyQuestions from "../data/meteorology"; -import physiopathologyQuestions from "../data/physiopathology"; -import pilotingTechniquesQuestions from "../data/pilotingTechniques"; +import testQuestions from "../data/test" +import aerodynamicsQuestions from "../data/aerodynamics" +import firstAidQuestions from "../data/firstAid" +import flightSafetyQuestions from "../data/flightSafety" +import instrumentsQuestions from "../data/instruments" +import legislationQuestions from "../data/legislation" +import materialsQuestions from "../data/materials" +import meteorologyQuestions from "../data/meteorology" +import physiopathologyQuestions from "../data/physiopathology" +import pilotingTechniquesQuestions from "../data/pilotingTechniques" -import { RowItem } from "../components/RowItem"; +import { RowItem } from "../components/RowItem" +import { colors, texts } from "../components/Variables" export default ({ navigation }) => ( - + - + navigation.navigate("Quiz", { - title: "Aerodinamica", + title: texts.aerodynamics, questions: aerodynamicsQuestions, - color: "#36b1f0" + color: colors.blue })}/> - + navigation.navigate("Quiz", { - title: "Primo soccorso", + title: texts.first_aid, questions: firstAidQuestions, - color: "#36b1f0" + color: colors.blue })}/> - + navigation.navigate("Quiz", { - title: "Sicurezza in volo", + title: texts.flight_safety, questions: flightSafetyQuestions, - color: "#36b1f0" + color: colors.blue })}/> - + navigation.navigate("Quiz", { - title: "Strumentazione", + title: texts.instruments, questions: instrumentsQuestions, - color: "#36b1f0" + color: colors.blue })}/> - + navigation.navigate("Quiz", { - title: "Materiali", + title: texts.legislation, + questions: legislationQuestions, + color: colors.blue + })}/> + + + navigation.navigate("Quiz", { + title: texts.materials, questions: materialsQuestions, - color: "#36b1f0" + color: colors.blue })}/> - + navigation.navigate("Quiz", { - title: "Meteorologia e aerologia", + title: texts.meteorology, questions: meteorologyQuestions, - color: "#36b1f0" + color: colors.blue })}/> - + navigation.navigate("Quiz", { - title: "Fisiopatologia del volo", + title: texts.physiopathology, questions: physiopathologyQuestions, - color: "#36b1f0" + color: colors.blue + })}/> + + + navigation.navigate("Quiz", { + title: texts.piloting_techniques, + questions: pilotingTechniquesQuestions, + color: colors.blue })}/> - + navigation.navigate("Quiz", { - title: "Tecniche di pilotaggio", + title: texts.exam, questions: pilotingTechniquesQuestions, - color: "#36b1f0" + color: colors.blue })}/> - + navigation.navigate("Quiz", { title: "TEST", questions: testQuestions, - color: "#36b1f0" + color: colors.orange })}/> -); +)