lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start styling the day overview

Browse Source
This commit is contained in:
Julia Friesel
2018-08-16 19:40:57 +02:00
parent 0c4002786d
commit 29a82fca9f
6 changed files with 127 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+4 -4
View File
@@ -7,7 +7,7 @@ import Chart from './components/chart/chart'
import Settings from './components/settings' import Settings from './components/settings'
import Stats from './components/stats' import Stats from './components/stats'
import styles from './styles' import styles, { primaryColor } from './styles'
// this is until react native fixes this bugg, see // this is until react native fixes this bugg, see
// https://github.com/facebook/react-native/issues/18868#issuecomment-382671739 // https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
@@ -26,9 +26,9 @@ const config = {
labeled: true, labeled: true,
shifting: false, shifting: false,
tabBarOptions: { tabBarOptions: {
style: {backgroundColor: '#ff7e5f'}, style: {backgroundColor: primaryColor },
labelStyle: {fontSize: 15, color: 'white'} labelStyle: styles.menuLabel
}, }
} }
export default createBottomTabNavigator(routes, config) export default createBottomTabNavigator(routes, config)
components/cycle-day/assets/placeholder.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

components/cycle-day/cycle-day-overview.js
+64 -66
View File
@@ -1,8 +1,9 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { import {
View, View,
Button, Text,
Text Image,
TouchableOpacity
} from 'react-native' } from 'react-native'
import styles from '../../styles' import styles from '../../styles'
import { import {
@@ -48,70 +49,50 @@ export default class DayView extends Component {
const cycleDay = this.cycleDay const cycleDay = this.cycleDay
return ( return (
<View style={styles.symptomEditView}> <View style={styles.symptomEditView}>
<View style={styles.symptomViewRowInline}> <View style={styles.symptomBoxesView}>
<Text style={styles.symptomDayView}>Bleeding</Text> <SymptomBox
<View style={styles.symptomEditButton}> title='Bleeding'
<Button icon={require('./assets/placeholder.png')}
onPress={() => this.showView('BleedingEditView')} onPress={() => this.showView('BleedingEditView')}
title={getLabel('bleeding', cycleDay.bleeding)}> data={getLabel('bleeding', cycleDay.bleeding)}
</Button> />
</View> <SymptomBox
</View> title='Temperature'
<View style={styles.symptomViewRowInline}> icon={require('./assets/placeholder.png')}
<Text style={styles.symptomDayView}>Temperature</Text> onPress={() => this.showView('TemperatureEditView')}
<View style={styles.symptomEditButton}> data={getLabel('temperature', cycleDay.temperature)}
<Button />
onPress={() => this.showView('TemperatureEditView')} <SymptomBox
title={getLabel('temperature', cycleDay.temperature)}> title='Mucus'
</Button> icon={require('./assets/placeholder.png')}
</View> onPress={() => this.showView('MucusEditView')}
</View> data={getLabel('mucus', cycleDay.mucus)}
<View style={ styles.symptomViewRowInline }> />
<Text style={styles.symptomDayView}>Mucus</Text> <SymptomBox
<View style={styles.symptomEditButton}> title='Cervix'
<Button icon={require('./assets/placeholder.png')}
onPress={() => this.showView('MucusEditView')} onPress={() => this.showView('CervixEditView')}
title={getLabel('mucus', cycleDay.mucus)}> data={getLabel('cervix', cycleDay.cervix)}
</Button> />
</View> <SymptomBox
</View> title='Note'
<View style={styles.symptomViewRowInline}> icon={require('./assets/placeholder.png')}
<Text style={styles.symptomDayView}>Cervix</Text> onPress={() => this.showView('NoteEditView')}
<View style={styles.symptomEditButton}> data={getLabel('note', cycleDay.note)}
<Button />
onPress={() => this.showView('CervixEditView')} <SymptomBox
title={getLabel('cervix', cycleDay.cervix)}> title='Desire'
</Button> icon={require('./assets/placeholder.png')}
</View> onPress={() => this.showView('DesireEditView')}
</View> data={getLabel('desire', cycleDay.desire)}
<View style={styles.symptomViewRowInline}> />
<Text style={styles.symptomDayView}>Note</Text> <SymptomBox
<View style={styles.symptomEditButton}> title='Sex'
<Button icon={require('./assets/placeholder.png')}
onPress={() => this.showView('NoteEditView')} onPress={() => this.showView('SexEditView')}
title={getLabel('note', cycleDay.note)} data={getLabel('sex', cycleDay.sex)}
> />
</Button> </View >
</View>
</View>
<View style={ styles.symptomViewRowInline }>
<Text style={styles.symptomDayView}>Desire</Text>
<View style={styles.symptomEditButton}>
<Button
onPress={() => this.showView('DesireEditView')}
title={getLabel('desire', cycleDay.desire)}>
</Button>
</View>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Sex</Text>
<View style={styles.symptomEditButton}>
<Button
onPress={() => this.showView('SexEditView')}
title={getLabel('sex', cycleDay.sex)}>
</Button>
</View>
</View>
</View > </View >
) )
} }
@@ -186,3 +167,20 @@ function getLabel(symptomName, symptom) {
if (!symptom) return 'edit' if (!symptom) return 'edit'
return labels[symptomName](symptom) || 'edit' return labels[symptomName](symptom) || 'edit'
} }
class SymptomBox extends Component {
render() {
return (
<TouchableOpacity onPress={this.props.onPress}>
<View style={styles.symptomBox}>
<Image
source={require('./assets/placeholder.png')}
style={styles.symptomBoxImage}
/>
<Text>{this.props.title}</Text>
<Text>{this.props.data}</Text>
</View>
</TouchableOpacity>
)
}
}
components/cycle-day/index.js
-8
View File
@@ -5,7 +5,6 @@ import {
ScrollView ScrollView
} from 'react-native' } from 'react-native'
import cycleModule from '../../lib/cycle' import cycleModule from '../../lib/cycle'
import { getFertilityStatusStringForDay } from '../../lib/sympto-adapter'
import { formatDateForViewHeader } from './labels/format' import { formatDateForViewHeader } from './labels/format'
import styles from '../../styles' import styles from '../../styles'
import actionButtonModule from './action-buttons' import actionButtonModule from './action-buttons'
@@ -50,23 +49,16 @@ export default class Day extends Component {
render() { render() {
const cycleDayNumber = getCycleDayNumber(this.cycleDay.date) const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
const fertilityStatus = getFertilityStatusStringForDay(this.cycleDay.date)
return ( return (
<ScrollView> <ScrollView>
<View style={ styles.cycleDayDateView }> <View style={ styles.cycleDayDateView }>
<Text style={styles.dateHeader}> <Text style={styles.dateHeader}>
{formatDateForViewHeader(this.cycleDay.date)} {formatDateForViewHeader(this.cycleDay.date)}
</Text> </Text>
</View >
<View style={ styles.cycleDayNumberView }>
{ cycleDayNumber && { cycleDayNumber &&
<Text style={styles.cycleDayNumber} > <Text style={styles.cycleDayNumber} >
Cycle day {cycleDayNumber} Cycle day {cycleDayNumber}
</Text> } </Text> }
<Text style={styles.cycleDayNumber} >
{fertilityStatus}
</Text>
</View > </View >
<View> <View>
{ this.cycleDayViews[this.state.visibleComponent] } { this.cycleDayViews[this.state.visibleComponent] }
components/cycle-day/symptoms/bleeding.js
+24 -22
View File
@@ -32,28 +32,30 @@ export default class Bleeding extends Component {
{ label: labels[3], value: 3 }, { label: labels[3], value: 3 },
] ]
return ( return (
<View style={styles.symptomEditView}> <View>
<Text style={styles.symptomDayView}>Bleeding</Text> <View style={styles.symptomEditView}>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Bleeding</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={bleedingRadioProps} <RadioForm
initial={this.state.currentValue} radio_props={bleedingRadioProps}
formHorizontal={true} initial={this.state.currentValue}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({ currentValue: itemValue }) onPress={(itemValue) => {
}} this.setState({ currentValue: itemValue })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}>Exclude</Text> <View style={styles.symptomViewRowInline}>
<Switch <Text style={styles.symptomDayView}>Exclude</Text>
onValueChange={(val) => { <Switch
this.setState({ exclude: val }) onValueChange={(val) => {
}} this.setState({ exclude: val })
value={this.state.exclude} }}
/> value={this.state.exclude}
/>
</View>
</View> </View>
<View style={styles.actionButtonRow}> <View style={styles.actionButtonRow}>
{this.makeActionButtons( {this.makeActionButtons(
styles/index.js
+35 -16
View File
@@ -1,5 +1,8 @@
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
export default StyleSheet.create({ export default StyleSheet.create({
container: { container: {
justifyContent: 'center', justifyContent: 'center',
@@ -12,31 +15,46 @@ export default StyleSheet.create({
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
dateHeader: { dateHeader: {
fontSize: 20, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
margin: 15,
color: 'white', color: 'white',
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center'
}, },
cycleDayNumber: { cycleDayNumber: {
fontSize: 18, fontSize: 15,
color: 'white',
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center' marginLeft: 15
}, },
symptomDayView: { symptomDayView: {
fontSize: 20, fontSize: 20,
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
symptomBoxImage: {
width: 50,
height: 50
},
radioButton: { radioButton: {
fontSize: 18, fontSize: 18,
margin: 8, margin: 8,
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
symptomEditView: { symptomBoxesView: {
justifyContent: 'space-between', flexDirection: 'row',
marginHorizontal: 15 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: { symptomEditRow: {
justifyContent: 'space-between', justifyContent: 'space-between',
@@ -50,14 +68,11 @@ export default StyleSheet.create({
height: 50 height: 50
}, },
cycleDayDateView: { cycleDayDateView: {
backgroundColor: primaryColor,
padding: 10,
flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: 'steelblue' alignItems: 'center'
},
cycleDayNumberView: {
justifyContent: 'center',
backgroundColor: 'skyblue',
marginBottom: 15,
paddingVertical: 15
}, },
homeButtons: { homeButtons: {
marginHorizontal: 15 marginHorizontal: 15
@@ -88,5 +103,9 @@ export default StyleSheet.create({
margin: 30, margin: 30,
textAlign: 'left', textAlign: 'left',
textAlignVertical: 'center' textAlignVertical: 'center'
} },
menuLabel: {
fontSize: 15,
color: 'white'
},
}) })