From 1c97279b5e3781231d7d26b926c02a9dcda0a725 Mon Sep 17 00:00:00 2001 From: Carmine De Rosa Date: Sat, 22 Feb 2020 10:23:32 +0100 Subject: [PATCH 1/3] add question ids add button bg --- vds-app/App/assets/buttonBg.png | Bin 0 -> 5020 bytes vds-app/App/components/Button.js | 73 +++++++++++++++++++------- vds-app/App/screens/Exam.js | 12 ++++- vds-app/App/screens/Quiz.js | 12 ++++- vds-app/App/screens/Recap.js | 11 +++- vds-app/App/screens/RecapTrueFalse.js | 11 +++- vds-app/App/screens/Splash.js | 6 +++ vds-app/App/screens/TrueFalse.js | 12 ++++- vds-app/package.json | 1 + 9 files changed, 115 insertions(+), 23 deletions(-) create mode 100644 vds-app/App/assets/buttonBg.png diff --git a/vds-app/App/assets/buttonBg.png b/vds-app/App/assets/buttonBg.png new file mode 100644 index 0000000000000000000000000000000000000000..b1709a85321c2208fbe05c95463d0fe80e16d626 GIT binary patch literal 5020 zcmeHKdsLH07QX>Xd07J}hAJ9D5qv=LwMSNxgntZW?6OqU zX`SR1nzUUQo0Jlrup3fRQk?h13ld|ZMZ2Aa330_kZf^rvuJGe|hNPAZc6uf}^k#l> z&(`!v%#)dauCJ6?7ELiS-%(hvS3V5=%8+}lGI*+BUvclG8t)4my3*!@D0aJ=fh`p` zQO)2xWU(TpM%adK%jRc~m16P?`~Z#~d1A`wQSLh&dL&;;|MTWx!uqQFJ<2Vjtu;!0 zatKkyHyS7@oZv0YV&RU}Ompg-W%C){0z95<&jGGYIcuRT23a=Pk(_`fr%XJ}fZA?> zE(8uaNP}gLhOmf3oV&}sd1fp-1mDINk~70e+F zzk3z$%d4(xn1>Vk-RV!mG#efB;IG>v#t0RC1l)$_dy9_V^ z<_w_LSMTrT1J)(RRUSL+%EvYsY8-Pv6V6u2gsc(!i;u>*yl0uDyW@&HxmJUDN6^>I9s|f>5rg1D)!67Rq_DA zvoViL#}5F`!6^UIiHou{HwS8)1xZE#&YnC3SuYI;T-=H*sCD+tIcu;MI%GtdL+tXf zE+sjjpw#ISvpEpyJ8ml9tPWY1n7$Xt@uPd^M1Wr^&C4WE{!P`Ngl^(Z2~2WQ{^~Z% zxSAG2)(JK#ST0^)XU;&9s>|mp7o^WuWrP^WOA3?7fQT&8?iDz429T_*%rpa4IiW@d zhrj~c$iCD$v=Yj79^M22Bv5$a#U%tmKmygFdNnoZ-jCtMkLp`L%k?BEQI`TXb#`|d zG3?B5l8%`wA0CBth|XJ(S}cX20-g3i`Z45R$^MPBY>P}VOzEYxaC1K=a&rO2CBlVz zgIJ=ySvW2g=jrG=vjx`+6?SyGrt)PmHm@$1mZi=<%+wI>z+3BW(r4}T-$?%lO{R!D z_h>Q^2?G8RDTpF<5(FY#{hZ;_5(KPl%!zKAF5tKs^Mx-Yu#g%GnYuCx*HEbG%BX3) z3N}$0<)L~tOKDsp-bfVMlp5ocf?IUoXy?*j^bRdQM2`OTXtq&MzK$)ZO4Iu-$wNKX zA)Mq%y;z5<9DX_qKjV)9rjIwhaGm{c+F++7>Yx!?ca#o2Ze?|?P+k?at-h)5SyNa1 z0c`{-%2Cr50NGZH)W7u0d+VG=#dO(3-8Wcs=+c$HZj(4`V`mC;pGOdm8Ji?+*58ZAlhLQog-1~}v+rpJ z`g_aV8#P0&cylVn?OKJTH=?ekwMS&VENbZPNWGPHVR>_5qP!|ODpm6Q&-wTR0vaC< z=WobWR~1SG9+7cj^Bto1EloGJk!!6NhflkHGO#y!uzofk&+NT2YCZZ~Ea)wBExyxy z*=kH-_x-biaAO;RIp>6W?>sa`v8pukUz*yU+!3o0MNwGae{Qx&27hg97yEo!*64s4 zC;CWW`s=7x-k$OC9-;C4A9B4M2UIf0;fbjSp_j%Rrf>AiHGX&Bk3&<>ZuK9j@|x=I zZ&hp4Qnh_qGfxFhU5t){_O=&qZE>6&ToZAn+9}knF=PCA!_eh1^_3(mfIFY=x&ET| zMPOV_{mk>*J2el6ON0^!(`4wl^MRSl%QV{lW={1Du{uKXlD(a0}ltaoTI- zet&i8qsmapc%y$})3mZi<8+%rrG%=$rDQ+1?PqcH<03_6>&UoA+t0&Ihh2w@cBsd` zySpIcEkpStK9USbEXqjf~c#pWBaVS0AhyUQ-flKy!o`e+PlbJ zJhNnPPuVT+GVN{uTkdfZ&CVT1mHAIykk7B%YXn{+@EU>t6M+kpZ|a{oX~wzi$Hs5? Mc?I&$Z{}zH585lBX8-^I literal 0 HcmV?d00001 diff --git a/vds-app/App/components/Button.js b/vds-app/App/components/Button.js index 1d89d81..d29bb36 100644 --- a/vds-app/App/components/Button.js +++ b/vds-app/App/components/Button.js @@ -1,7 +1,9 @@ import React from "react" -import { View, TouchableOpacity, Text, StyleSheet } from "react-native" +import { View, TouchableOpacity, Text, StyleSheet, ImageBackground } from "react-native" import { colors } from "../components/Variables" +const bgImage = require("../assets/buttonBg.png") + const styles = StyleSheet.create({ button: { backgroundColor: colors.white_alpha, @@ -15,6 +17,10 @@ const styles = StyleSheet.create({ width: "100%", marginTop: 15 }, + noPadding: { + paddingHorizontal: 0, + paddingVertical: 0, + }, text: { color: colors.white, fontSize: 20, @@ -37,10 +43,20 @@ const styles = StyleSheet.create({ justifyContent: "space-between", overflow: "hidden", borderRadius: 10 + }, + buttonBg: { + flex: 1, + paddingVertical: 15, + height: '100%', + width: '100%', + resizeMode: 'cover' + }, + buttonPadding: { + paddingHorizontal: 20 } }) -export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false, noPadding = false, noBorder = false, halfSize = false, hasShadow = false, onPress = false }) => { +export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false, noPadding = false, noBorder = false, halfSize = false, hasShadow = false, hasBg = false, onPress = false }) => { const buttonBig = isBig ? {fontSize: 25} : {} const isClicked = colorize.clicked == colorize.id @@ -65,32 +81,53 @@ export const Button = ({ text, subtitle = null, isBig = false, colorize = false, } if(onPress) { - if(subtitle) { - return ( - - {text} - {subtitle} - - ) + if(hasBg) { + if(subtitle) { + return ( + + + {text} + {subtitle} + + + ) + } else { + return ( + + + {text} + + + ) + } } else { - return ( - - {text} - - ) + if(subtitle) { + return ( + + {text} + {subtitle} + + ) + } else { + return ( + + {text} + + ) + } } } else { if(subtitle) { return ( - {text} - {subtitle} + {text} + {subtitle} ) } else { return ( - {text} + {text} ) } @@ -100,7 +137,7 @@ export const Button = ({ text, subtitle = null, isBig = false, colorize = false, export const ButtonContainer = ({ children, isBoxed = false}) => { - let boxedStyle = isBoxed ? {borderWidth: 3, borderColor: colors.white_alpha2} : {} + let boxedStyle = isBoxed ? {borderWidth: 2, borderColor: colors.white_alpha2} : {} return ( {children} diff --git a/vds-app/App/screens/Exam.js b/vds-app/App/screens/Exam.js index 1a2d637..ab14cd8 100644 --- a/vds-app/App/screens/Exam.js +++ b/vds-app/App/screens/Exam.js @@ -37,7 +37,16 @@ const styles = StyleSheet.create({ fontSize: 20, textAlign: "center", fontWeight: "600", - paddingVertical: 20 + paddingTop: 5, + paddingBottom: 20 + }, + textCode: { + color: colors.white, + fontSize: 12, + textAlign: "center", + fontWeight: "500", + paddingTop: 20, + paddingBottom: 0 }, timer: { color: colors.white, @@ -219,6 +228,7 @@ class Exam extends React.Component { {new Date(this.state.timer * 1000).toISOString().substr(11, 8)} + {question.id} {question.question} diff --git a/vds-app/App/screens/Quiz.js b/vds-app/App/screens/Quiz.js index 6ba17cc..e033e44 100644 --- a/vds-app/App/screens/Quiz.js +++ b/vds-app/App/screens/Quiz.js @@ -17,7 +17,16 @@ const styles = StyleSheet.create({ fontSize: 20, textAlign: "center", fontWeight: "600", - paddingVertical: 20 + paddingTop: 5, + paddingBottom: 20 + }, + textCode: { + color: colors.white, + fontSize: 12, + textAlign: "center", + fontWeight: "500", + paddingTop: 20, + paddingBottom: 0 }, safearea: { flex: 1, @@ -159,6 +168,7 @@ class Quiz extends React.Component { {!this.state.results ? + {question.id} {question.question} diff --git a/vds-app/App/screens/Recap.js b/vds-app/App/screens/Recap.js index 82019b9..26d4168 100644 --- a/vds-app/App/screens/Recap.js +++ b/vds-app/App/screens/Recap.js @@ -66,7 +66,15 @@ const styles = StyleSheet.create({ fontSize: 20, textAlign: "center", fontWeight: "600", - paddingTop: 10 + paddingTop: 0 + }, + textCode: { + color: colors.white, + fontSize: 12, + textAlign: "center", + fontWeight: "500", + paddingTop: 10, + paddingBottom: 0 }, textBig: { color: colors.white, @@ -141,6 +149,7 @@ class Recap extends React.Component { {questions.map( (question, index) => ( + {question.id} {question.text} diff --git a/vds-app/App/screens/RecapTrueFalse.js b/vds-app/App/screens/RecapTrueFalse.js index 9fbd61b..1d388ad 100644 --- a/vds-app/App/screens/RecapTrueFalse.js +++ b/vds-app/App/screens/RecapTrueFalse.js @@ -66,7 +66,15 @@ const styles = StyleSheet.create({ fontSize: 20, textAlign: "center", fontWeight: "600", - paddingTop: 10 + paddingTop: 0 + }, + textCode: { + color: colors.white, + fontSize: 12, + textAlign: "center", + fontWeight: "500", + paddingTop: 10, + paddingBottom: 0 }, textBig: { color: colors.white, @@ -145,6 +153,7 @@ class RecapTrueFalse extends React.Component { {questions.map( (question, index) => ( + {question.id} {question.text} diff --git a/vds-app/App/screens/Splash.js b/vds-app/App/screens/Splash.js index 836c2d4..54e9dd2 100644 --- a/vds-app/App/screens/Splash.js +++ b/vds-app/App/screens/Splash.js @@ -145,6 +145,7 @@ class Splash extends React.Component { text={texts.section_quizzes} subtitle={`(${texts.section_quizzes_subtitle})`} isBig={false} + hasBg={true} noPadding={true} hasShadow={true} color={colors.white_alpha} @@ -158,6 +159,7 @@ class Splash extends React.Component { text={texts.exam} subtitle={`(${texts.exam_simulation})`} isBig={false} + hasBg={true} noPadding={true} hasShadow={true} color={colors.white_alpha} @@ -173,6 +175,7 @@ class Splash extends React.Component { text={texts.trueFalse} subtitle={`(${texts.trueFalseSubtitle})`} isBig={false} + hasBg={true} noPadding={true} hasShadow={true} color={colors.white_alpha} @@ -187,6 +190,7 @@ class Splash extends React.Component { text={texts.dictionaryTitle} subtitle={`(${texts.dictionarySubtitle})`} isBig={false} + hasBg={true} noPadding={true} hasShadow={true} color={colors.white_alpha} @@ -195,6 +199,7 @@ class Splash extends React.Component {