From 29a82fca9f3e71e279a05e4670aa9bd1c4e658e9 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 16 Aug 2018 19:40:57 +0200 Subject: [PATCH] Start styling the day overview --- app.js | 8 +- components/cycle-day/assets/placeholder.png | Bin 0 -> 4782 bytes components/cycle-day/cycle-day-overview.js | 130 ++++++++++---------- components/cycle-day/index.js | 8 -- components/cycle-day/symptoms/bleeding.js | 46 +++---- styles/index.js | 51 +++++--- 6 files changed, 127 insertions(+), 116 deletions(-) create mode 100644 components/cycle-day/assets/placeholder.png diff --git a/app.js b/app.js index 7735256..0c951c8 100644 --- a/app.js +++ b/app.js @@ -7,7 +7,7 @@ import Chart from './components/chart/chart' import Settings from './components/settings' import Stats from './components/stats' -import styles from './styles' +import styles, { primaryColor } from './styles' // this is until react native fixes this bugg, see // https://github.com/facebook/react-native/issues/18868#issuecomment-382671739 @@ -26,9 +26,9 @@ const config = { labeled: true, shifting: false, tabBarOptions: { - style: {backgroundColor: '#ff7e5f'}, - labelStyle: {fontSize: 15, color: 'white'} - }, + style: {backgroundColor: primaryColor }, + labelStyle: styles.menuLabel + } } export default createBottomTabNavigator(routes, config) \ No newline at end of file diff --git a/components/cycle-day/assets/placeholder.png b/components/cycle-day/assets/placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..fb6a6c98deedf368459cf4c5d5af315f3ab5f739 GIT binary patch literal 4782 zcmZ8lc{r5q|7Ef-VQdqUEi_>!35^g@w(QxLL8OuFB72Bw(pa*Ty{yTaoypjju~zma zuYH?0OJw)Gdw>7^p6i-ZqxvV(gbjPJd*}ZqCt>sYypCPASK+>dMw8z#ydI zc7>{`HMsJG>ZpT5RkMJB>-G<3Ay|$EI*4wJ8bTA4DG8l`L!Ibjp>5<#3@3GNpr-$o^E@wSep$axNw3nCH=0Tt; zlO!9J1gT|yOCQ_UK+Ma_L(0fRWMuI3UA(xZ*r*n|AE?B{#6-kY8M0j{g`{R?cDA)q zQJ@_isYMg$8yXq{U&hi=l#Vi{_Psnf@UOL!`n|U|x4)mV!so}HLRxIu+(eq~b>3P1 z_g^U;QFaqk(*p+Kf5iClw2F#~W)>EQXOCQ5T*}6usD0BFNVELP%SnEx$)@U#}PZ{`tC=0H?j9NX)d znDqJ<%}x9y`Q`YN4zSggnwyysySnJ&ehG<$l}q5l!YH4(x*qI4k7}h%?Ym3HiheuT zBlAjdG5Y%YN(GUprue{RRGCH^kbteZ_QHThWeF*%mM5|fAtB0d2cb=61j5D5JHx+! z%XD;hQl~wjgLujFxy$pZ5T3cXFoIQ)O1?U_303~bvkqNuCZ%K4?|{KD7#SHsdeS~EUe(pz{ zENyMMe_z{^sGSZAIXg*qwkmI_kO1qxxzxvNe@&5}B~ABH*SrwmIYCDf zq`7t+x8LdULE>H#05UEvE^Cx8Jh!rvBQY^i5I;XESpklVi;MNeIRt5$-m+X$%Brd1 z{@D~F#-A#yl*w{(a*~psewpXb>B&)}wefNAtKQyTwR`ty=jP|{oaYg@{Tf*3IU`*< zikq3S2|PW1XQuPgZgXWwc&gzUzUJCF3tDY0t(F8az1Xz0-bt!s$48Hrd;CaWL(bm( zW$M9pvg(5bjv7P|Mtfr0b$`g zWiUYni=FN5tYHirFE6Px5MpmNBg4aNXklb60t2^x#XM>V4bw#zyu3qS1d`+0kN3n(b0 zmI|J9kbPV2%Qq{wb>fGIA9z1|#;&ORJ~ozuV8fDYs42oa>7)xg4{XSpoc zBQWrFbF+%h{ri#X+fB8#(LjJcEVIYQ$7g+Cbw4@uvA^c8Jl=<7;#Ufc?!;fZBPwip z_`=crH6HKa=V$g~Qae*A=*9F?v9%DRLgPV9RWuGK%*D=HAWKcb!O5voG&~1@P>qyN z2DLKuoRpWJPrc=7t!81tQ}s)AP+JFsfum5U*w|Qshbh<1ZEd5vAGYl6$!?7;Z|#vS zU%z<+jd_=t7`eCS3qR@#B|^^W#`pC1>rU1CXs_rumDkkJCUlE1xQ#C?h}bj*-ISUJmU6qA@m9UqCjWG)ACXe8bY06gCFO}{) z`BhXyCmFE4K>u{6QS+8>mJi8Fiu<$4)geW_elGRa0B)ua>@bS9_I8!hQQ_;?6Z|&9 z!_S#XBx&Pu#h*We4hK~%eHR;h+tp3ZOzjGCw#{;6VnVCW(y3;0K=NH#S=sG&lDZ2S z$)R=?8Cp`qBwu(eheW!=4>Hr!BLVm77vILmL(+BcwLfKtFW}Ens~8xtz16zB;j7?* zPyW8zc6zF0VPSz(R@R$(nvj%qxA@7qOVNi6d)F%oj%UX^1BpAHTPkC8Oj+xa!q$Pg zSy`d=$vBo4Ei{qE&D_J|8o7|}F4zGW3Igi(1tgTibVTp?_}uvP>65cw+47erJMDL{ep(u50cj6?|hmlt~m2J#g-o1V48E(G{>7s zg~J$(S65FD!%; zS62m*JU(^(4naW|oxWTEGFO?e8WGI}8!eCVwk{!!O;1M-Ik$cL1_f)Y+s5$PC0uMI zBcXCVDNaa;dTHkXiA1uxPt$)JF08xzaUeqxH@2WWN97CT3fPq1fdSfM8;hgl>({UU zbujqmIH3kd->aWOTS6EC(^cwa8 z8$>}~K6Ds!*#f00UYn5uTv=s)3!@zZxC})z2`*q&hB6r3+{kaUR@c;k zI|)g-QR-$O^YiisfBw{~Tx9wgQA`As2fBa${Q2nioUOMPo=i)Z13~~7A#8(MJ=|R% zbe7T3(GlTF_}fvCJTXAmMfeqrTXfMf6SJ2^MO)Cw*^y#PB#h}rwSW>!iI`~jx0OIv z6Uh9;Y~058V#C6$(e*RLdZE7f;K<0`c1vI+>}n>lHM#VWWo%=;y-ZcIexQ2ugZq(8 za5%hRw=FF#jUz};=S>-FO6xzwo#g>+2WY#Em5cX5eN0SD0H)k`cM|LE?|&Itqw^aQ zaI`0h@Yy&gh(HYdde6POx(Y_4Hp$`TJ|i8!`2C!E<$r_O^W@~@1S}QIvdlCrYy(}n zAkAwE01BiV@MLT3R6r}ts<^rq3smiUd3p|xk83VUEC7B1P`(Bo-MzI} z8m)@{e;%N(ukXc@j+LGckB@kDbv0Usr|@XLfU%eC`?079S1^57D*0no73cW)_>0b0 zF)@+4`5z7QRyQ|Ur>CdeCQ)Zh55mY~a`QuJyMTaHGo46P%3>33Z{=%nIK%z>_r(zi zF#z}eJ`6ZQzmvloi3^$UiM9PsB0E&?{~NBq|INhh1z@kplQl3tK9PDnqdpXPccHI+ zY~0+m>AF$Mr~Bb%yo?F}y1) zD_L`kDBO=9#xN!t_|Ev)Sm=@$z$SIu4IpJdpbGMfY9+G z&4X134Q4xBWZFiSJvcaUe)^Qlm3{{YT4ZQ5ni#_?7u{)NZXPz|yfAGk8cmc(i~?sB z0XwyNg~J)x+FlxQ-Gs8U4*_t8Eju2qLS~xiOQc4lST61JAFBSq+~8MyE^>JO(kaoO z#K6E1-MOSg3nZfPb!QRr4IXdzWgJpM;)DbG78Ddj(|LFtZ%7KC)PYW)p%~DCt9dQ= zU$XiA8|~o{2i(+$`ug`6e@{U>7>%Q&qcaBcVM%hGOlE#O9nT%+kz^h37zIcNqJ&zF z$x>H$_e~$!1Q8O6giP&INtU8BN7K^Mwh^p6>-Z!kC5?}NRq7WS|LyV>$vyrgSy@>~ zu$uOFpPlwXH|PG{Dy#l}<@OIERrpHi-7+tcnSp ziq_VVvVO~KoSczMOHOcdGQkExLrZ(@=FQb-+n3%FzXqQ$;M!Fyb6A%bwRCkwxr{!$ zGcSO+SC}XTc=p@H_U7z3ucDtU|?XrHSo6DIYhLdhSsPtg}LkM&XguVKP2JD0@ z6bdbQ$a^b9Q(HT{869d^D8e7`e^G>hr2S)w#^G>(C73LW#bSZsHmzW`5fBj(A)=82 zii+uePx>u=Z7lhksALrsw5_bJT)6^RdfUp1uRP@+oxk2}V#57s&vmZ6u3G+)KS_%7 zuT+81IK+Mh=noK0;~t^N>%gzyxN)Q4(gfqqDEC>a=_-t?tYu(i9QyG?1dF4UmX?mrPzQ)L z173$59lZOwP-I$4^#^mNrKw4ead8puVN>BP@eUhwiGn9G?C$P93V!y8K>~rm7x?^{ zAq23^FG6{zAU?stUj^nnJ3E0)>{`)oy@LQ3?Cj>oJ>}b5tdZ&SIB}Mx&g#wK;d2{p zV@hTCQ`?1YdAV_5_EfyQzMv0STag8Yh1nJPzMOz#m?|D18;w@-fK(0+^SKRIxj%^s z3!nS@=g)fJ19^CO^o@<%)@z~338|@!>AKw8hxQL1B-%#3L=bL)Q1r2+L@K8{jX^vi zyReYn-`~G6<_a4u`#DKVOH1F-aBkG)r2dSPgCncH9#znN{8}|T^zO&(xkvHx%%)7D z`nJ|iPNKln90wDA(wlgAcxbe{I@sHT;8I$dto_72m+`pRGS3)3G&Tm)@8Qs=u{AMy z2`GDe1~Qw|lW9|$Z>VKBXJ1?InCwrocW}raa)#J^W!PuiY7VER - - Bleeding - - - - - - Temperature - - - - - - Mucus - - - - - - Cervix - - - - - - Note - - - - - - Desire - - - - - - Sex - - - - + + this.showView('BleedingEditView')} + data={getLabel('bleeding', cycleDay.bleeding)} + /> + this.showView('TemperatureEditView')} + data={getLabel('temperature', cycleDay.temperature)} + /> + this.showView('MucusEditView')} + data={getLabel('mucus', cycleDay.mucus)} + /> + this.showView('CervixEditView')} + data={getLabel('cervix', cycleDay.cervix)} + /> + this.showView('NoteEditView')} + data={getLabel('note', cycleDay.note)} + /> + this.showView('DesireEditView')} + data={getLabel('desire', cycleDay.desire)} + /> + this.showView('SexEditView')} + data={getLabel('sex', cycleDay.sex)} + /> + ) } @@ -186,3 +167,20 @@ function getLabel(symptomName, symptom) { if (!symptom) return 'edit' return labels[symptomName](symptom) || 'edit' } + +class SymptomBox extends Component { + render() { + return ( + + + + {this.props.title} + {this.props.data} + + + ) + } +} \ No newline at end of file diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js index 94bb51e..fab2b2e 100644 --- a/components/cycle-day/index.js +++ b/components/cycle-day/index.js @@ -5,7 +5,6 @@ import { ScrollView } from 'react-native' import cycleModule from '../../lib/cycle' -import { getFertilityStatusStringForDay } from '../../lib/sympto-adapter' import { formatDateForViewHeader } from './labels/format' import styles from '../../styles' import actionButtonModule from './action-buttons' @@ -50,23 +49,16 @@ export default class Day extends Component { render() { const cycleDayNumber = getCycleDayNumber(this.cycleDay.date) - const fertilityStatus = getFertilityStatusStringForDay(this.cycleDay.date) return ( {formatDateForViewHeader(this.cycleDay.date)} - - { cycleDayNumber && Cycle day {cycleDayNumber} } - - - {fertilityStatus} - { this.cycleDayViews[this.state.visibleComponent] } diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 7ec0574..ffd1836 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -32,28 +32,30 @@ export default class Bleeding extends Component { { label: labels[3], value: 3 }, ] return ( - - Bleeding - - { - this.setState({ currentValue: itemValue }) - }} - /> - - - Exclude - { - this.setState({ exclude: val }) - }} - value={this.state.exclude} - /> + + + Bleeding + + { + this.setState({ currentValue: itemValue }) + }} + /> + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + {this.makeActionButtons( diff --git a/styles/index.js b/styles/index.js index fde1700..9197f31 100644 --- a/styles/index.js +++ b/styles/index.js @@ -1,5 +1,8 @@ import { StyleSheet } from 'react-native' +export const primaryColor = '#ff7e5f' +export const secondaryColor = '#351c4d' + export default StyleSheet.create({ container: { justifyContent: 'center', @@ -12,31 +15,46 @@ export default StyleSheet.create({ textAlignVertical: 'center' }, dateHeader: { - fontSize: 20, + fontSize: 18, fontWeight: 'bold', - margin: 15, color: 'white', textAlign: 'center', - textAlignVertical: 'center' }, cycleDayNumber: { - fontSize: 18, + fontSize: 15, + color: 'white', textAlign: 'center', - textAlignVertical: 'center' + marginLeft: 15 }, symptomDayView: { fontSize: 20, textAlignVertical: 'center' }, + symptomBoxImage: { + width: 50, + height: 50 + }, radioButton: { fontSize: 18, margin: 8, textAlign: 'center', textAlignVertical: 'center' }, - symptomEditView: { - justifyContent: 'space-between', - marginHorizontal: 15 + symptomBoxesView: { + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-evenly' + }, + symptomBox: { + borderColor: secondaryColor, + borderStyle: 'solid', + borderWidth: 1, + borderRadius: 10, + justifyContent: 'center', + alignItems: 'center', + marginTop: '20%', + minWidth: 100, + minHeight: 100 }, symptomEditRow: { justifyContent: 'space-between', @@ -50,14 +68,11 @@ export default StyleSheet.create({ height: 50 }, cycleDayDateView: { + backgroundColor: primaryColor, + padding: 10, + flexDirection: 'row', justifyContent: 'center', - backgroundColor: 'steelblue' - }, - cycleDayNumberView: { - justifyContent: 'center', - backgroundColor: 'skyblue', - marginBottom: 15, - paddingVertical: 15 + alignItems: 'center' }, homeButtons: { marginHorizontal: 15 @@ -88,5 +103,9 @@ export default StyleSheet.create({ margin: 30, textAlign: 'left', textAlignVertical: 'center' - } + }, + menuLabel: { + fontSize: 15, + color: 'white' + }, }) \ No newline at end of file