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

put view styles in styles.js

Browse Source
This commit is contained in:
tina
2018-06-18 14:06:32 +02:00
parent 4a5afd4662
commit feb642aa92
6 changed files with 95 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bleeding.js
+10 -10
View File
@@ -33,9 +33,9 @@ export default class Bleeding extends Component {
{label: labels[3], value: 3 }, {label: labels[3], value: 3 },
] ]
return ( return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}> <View style={ styles.symptomEditView }>
<View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}> <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}> <View style={ styles.symptomEditListedSymptomView }>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text style={styles.symptomDayView}>Bleeding</Text> <Text style={styles.symptomDayView}>Bleeding</Text>
</View> </View>
@@ -52,11 +52,11 @@ export default class Bleeding extends Component {
/> />
</View> </View>
</View> </View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}> <View style={ styles.itemsInRowSeparatedView }>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Text style={ styles.symptomDayView }>Exclude</Text> <Text style={ styles.symptomDayView }>Exclude</Text>
</View> </View>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Switch <Switch
onValueChange={(val) => { onValueChange={(val) => {
this.setState({exclude: val}) this.setState({exclude: val})
@@ -66,14 +66,14 @@ export default class Bleeding extends Component {
</View> </View>
</View> </View>
</View> </View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}> <View style={ styles.itemsInRowSeparatedView }>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => this.showView('dayView')} onPress={() => this.showView('dayView')}
title="Cancel"> title="Cancel">
</Button> </Button>
</View> </View>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => { onPress={() => {
saveBleeding(this.cycleDay) saveBleeding(this.cycleDay)
@@ -82,7 +82,7 @@ export default class Bleeding extends Component {
title="Delete"> title="Delete">
</Button> </Button>
</View> </View>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => { onPress={() => {
saveBleeding(this.cycleDay, { saveBleeding(this.cycleDay, {
cycle-day-overview.js
+5 -5
View File
@@ -54,23 +54,23 @@ export default class DayView extends Component {
} }
return ( return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}> <View style={ styles.symptomEditListedSymptomView }>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}> <View style={ styles.itemsInRowSeparatedView }>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text style={styles.symptomDayView}>Bleeding</Text> <Text style={styles.symptomDayView}>Bleeding</Text>
</View> </View>
<View style={{flex: 1, margin:5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => this.showView('bleedingEditView')} onPress={() => this.showView('bleedingEditView')}
title={bleedingLabel}> title={bleedingLabel}>
</Button> </Button>
</View> </View>
</View> </View>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}> <View style={ styles.itemsInRowSeparatedView}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text style={styles.symptomDayView}>Temperature</Text> <Text style={styles.symptomDayView}>Temperature</Text>
</View> </View>
<View style={{flex: 1, margin:5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => this.showView('temperatureEditView')} onPress={() => this.showView('temperatureEditView')}
title={temperatureLabel}> title={temperatureLabel}>
cycle-day.js
+4 -4
View File
@@ -29,16 +29,16 @@ export default class Day extends Component {
render() { render() {
const cycleDayNumber = getCycleDayNumber(this.cycleDay.date) const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
return ( return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around'}}> <View style={ styles.cycleDayOuterView }>
<View style={{flex: 2, justifyContent: 'center', backgroundColor: 'steelblue'}}> <View style={ styles.cycleDayDateView }>
<Text style={styles.dateHeader}> <Text style={styles.dateHeader}>
{formatDateForViewHeader(this.cycleDay.date)} {formatDateForViewHeader(this.cycleDay.date)}
</Text> </Text>
</View > </View >
<View style={{flex: 1, justifyContent: 'center', backgroundColor: 'skyblue'}}> <View style={ styles.cycleDayNumberView }>
{ cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> } { cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
</View > </View >
<View style={{flex: 8, justifyContent: 'center',}}> <View style={ styles.cycleDaySymptomsView }>
{ {
{ dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />, { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>, bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
home.js
+2 -2
View File
@@ -46,13 +46,13 @@ export default class Home extends Component {
render() { render() {
const navigate = this.props.navigation.navigate const navigate = this.props.navigation.navigate
return ( return (
<View style={{flex: 0.5, flexDirection: 'column', justifyContent: 'space-around'}}> <View style={ styles.homeContainerView }>
<View style={{flex: 2}}> <View style={{flex: 2}}>
<View> <View>
<Text style={styles.welcome}>{this.state.welcomeText}</Text> <Text style={styles.welcome}>{this.state.welcomeText}</Text>
</View> </View>
</View> </View>
<View style={{flex: 3, flexDirection: 'column', justifyContent: 'space-around', margin: 5}}> <View style={ styles.homeButtonsView}>
<View> <View>
<Button <Button
onPress={() => this.passTodayToDayView()} onPress={() => this.passTodayToDayView()}
styles.js
+64
View File
@@ -37,4 +37,68 @@ export default StyleSheet.create({
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
singleButtonView: {
flex: 1,
margin: 5
},
itemsInRowView: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center'
},
itemsInRowSeparatedView: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center'
},
symptomEditView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-start'
},
symptomEditSplitSymptomsAndLastRowButtons: {
flex: 4,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start'
},
symptomEditListedSymptomView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start'
},
cycleDayOuterView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around'
},
cycleDayDateView: {
flex: 2,
justifyContent: 'center',
backgroundColor: 'steelblue'
},
cycleDayNumberView: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'skyblue'
},
cycleDaySymptomsView: {
flex: 8,
justifyContent: 'center'
},
homeContainerView: {
flex: 0.5,
flexDirection: 'column',
justifyContent: 'space-around'
},
homeButtonsView: {
flex: 3,
flexDirection: 'column',
justifyContent: 'space-around',
margin: 5
}
}) })
temperature.js
+9 -9
View File
@@ -33,15 +33,15 @@ export default class Temp extends Component {
render() { render() {
const cycleDay = this.cycleDay const cycleDay = this.cycleDay
return ( return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}> <View style={ styles.symptomEditView }>
<View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}> <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
<View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}> <View style={ styles.itemsInRowView }>
<View style={{flex: 3, margin: 5}}> <View style={{flex: 3, margin: 5}}>
<Text style={styles.symptomDayView}>Temperature (°C)</Text> <Text style={styles.symptomDayView}>Temperature (°C)</Text>
</View> </View>
<View style={{flex: 1, margin: 5}}> <View style={{flex: 1, margin: 5}}>
<TextInput <TextInput
placeholder="Enter temperature" placeholder="Enter"
onChangeText={(val) => { onChangeText={(val) => {
this.setState({currentValue: val}) this.setState({currentValue: val})
}} }}
@@ -50,7 +50,7 @@ export default class Temp extends Component {
/> />
</View> </View>
</View> </View>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}> <View style={ styles.itemsInRowSeparatedView }>
<View style={{flex: 1, margin: 5}}> <View style={{flex: 1, margin: 5}}>
<Text style={styles.symptomDayView}>Exclude</Text> <Text style={styles.symptomDayView}>Exclude</Text>
</View> </View>
@@ -64,8 +64,8 @@ export default class Temp extends Component {
</View> </View>
</View> </View>
</View> </View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}> <View style={ styles.itemsInRowSeparatedView }>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => { onPress={() => {
this.showView('dayView') this.showView('dayView')
@@ -73,7 +73,7 @@ export default class Temp extends Component {
title="Cancel"> title="Cancel">
</Button> </Button>
</View> </View>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => { onPress={() => {
saveTemperature(cycleDay) saveTemperature(cycleDay)
@@ -82,7 +82,7 @@ export default class Temp extends Component {
title="Delete"> title="Delete">
</Button> </Button>
</View> </View>
<View style={{flex: 1, margin: 5}}> <View style={ styles.singleButtonView }>
<Button <Button
onPress={() => { onPress={() => {
saveTemperature(cycleDay, { saveTemperature(cycleDay, {