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
+11 -11
View File
@@ -33,9 +33,9 @@ export default class Bleeding extends Component {
{label: labels[3], value: 3 },
]
return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
<View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
<View style={ styles.symptomEditView }>
<View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
<View style={ styles.symptomEditListedSymptomView }>
<View style={{flex: 1}}>
<Text style={styles.symptomDayView}>Bleeding</Text>
</View>
@@ -52,11 +52,11 @@ export default class Bleeding extends Component {
/>
</View>
</View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<View style={{flex: 1, margin: 5}}>
<Text style={styles.symptomDayView}>Exclude</Text>
<View style={ styles.itemsInRowSeparatedView }>
<View style={ styles.singleButtonView }>
<Text style={ styles.symptomDayView }>Exclude</Text>
</View>
<View style={{flex: 1, margin: 5}}>
<View style={ styles.singleButtonView }>
<Switch
onValueChange={(val) => {
this.setState({exclude: val})
@@ -66,14 +66,14 @@ export default class Bleeding extends Component {
</View>
</View>
</View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<View style={{flex: 1, margin: 5}}>
<View style={ styles.itemsInRowSeparatedView }>
<View style={ styles.singleButtonView }>
<Button
onPress={() => this.showView('dayView')}
title="Cancel">
</Button>
</View>
<View style={{flex: 1, margin: 5}}>
<View style={ styles.singleButtonView }>
<Button
onPress={() => {
saveBleeding(this.cycleDay)
@@ -82,7 +82,7 @@ export default class Bleeding extends Component {
title="Delete">
</Button>
</View>
<View style={{flex: 1, margin: 5}}>
<View style={ styles.singleButtonView }>
<Button
onPress={() => {
saveBleeding(this.cycleDay, {
cycle-day-overview.js
+5 -5
View File
@@ -54,23 +54,23 @@ export default class DayView extends Component {
}
return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<View style={ styles.symptomEditListedSymptomView }>
<View style={ styles.itemsInRowSeparatedView }>
<View style={{flex: 1}}>
<Text style={styles.symptomDayView}>Bleeding</Text>
</View>
<View style={{flex: 1, margin:5}}>
<View style={ styles.singleButtonView }>
<Button
onPress={() => this.showView('bleedingEditView')}
title={bleedingLabel}>
</Button>
</View>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<View style={ styles.itemsInRowSeparatedView}>
<View style={{flex: 1}}>
<Text style={styles.symptomDayView}>Temperature</Text>
</View>
<View style={{flex: 1, margin:5}}>
<View style={ styles.singleButtonView }>
<Button
onPress={() => this.showView('temperatureEditView')}
title={temperatureLabel}>
cycle-day.js
+4 -4
View File
@@ -29,16 +29,16 @@ export default class Day extends Component {
render() {
const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around'}}>
<View style={{flex: 2, justifyContent: 'center', backgroundColor: 'steelblue'}}>
<View style={ styles.cycleDayOuterView }>
<View style={ styles.cycleDayDateView }>
<Text style={styles.dateHeader}>
{formatDateForViewHeader(this.cycleDay.date)}
</Text>
</View >
<View style={{flex: 1, justifyContent: 'center', backgroundColor: 'skyblue'}}>
<View style={ styles.cycleDayNumberView }>
{ cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
</View >
<View style={{flex: 8, justifyContent: 'center',}}>
<View style={ styles.cycleDaySymptomsView }>
{
{ dayView: <DayView 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() {
const navigate = this.props.navigation.navigate
return (
<View style={{flex: 0.5, flexDirection: 'column', justifyContent: 'space-around'}}>
<View style={ styles.homeContainerView }>
<View style={{flex: 2}}>
<View>
<Text style={styles.welcome}>{this.state.welcomeText}</Text>
</View>
</View>
<View style={{flex: 3, flexDirection: 'column', justifyContent: 'space-around', margin: 5}}>
<View style={ styles.homeButtonsView}>
<View>
<Button
onPress={() => this.passTodayToDayView()}
styles.js
+64
View File
@@ -37,4 +37,68 @@ export default StyleSheet.create({
textAlign: '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() {
const cycleDay = this.cycleDay
return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
<View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
<View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
<View style={ styles.symptomEditView }>
<View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
<View style={ styles.itemsInRowView }>
<View style={{flex: 3, margin: 5}}>
<Text style={styles.symptomDayView}>Temperature (°C)</Text>
</View>
<View style={{flex: 1, margin: 5}}>
<TextInput
placeholder="Enter temperature"
placeholder="Enter"
onChangeText={(val) => {
this.setState({currentValue: val})
}}
@@ -50,7 +50,7 @@ export default class Temp extends Component {
/>
</View>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<View style={ styles.itemsInRowSeparatedView }>
<View style={{flex: 1, margin: 5}}>
<Text style={styles.symptomDayView}>Exclude</Text>
</View>
@@ -64,8 +64,8 @@ export default class Temp extends Component {
</View>
</View>
</View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
<View style={{flex: 1, margin: 5}}>
<View style={ styles.itemsInRowSeparatedView }>
<View style={ styles.singleButtonView }>
<Button
onPress={() => {
this.showView('dayView')
@@ -73,7 +73,7 @@ export default class Temp extends Component {
title="Cancel">
</Button>
</View>
<View style={{flex: 1, margin: 5}}>
<View style={ styles.singleButtonView }>
<Button
onPress={() => {
saveTemperature(cycleDay)
@@ -82,7 +82,7 @@ export default class Temp extends Component {
title="Delete">
</Button>
</View>
<View style={{flex: 1, margin: 5}}>
<View style={ styles.singleButtonView }>
<Button
onPress={() => {
saveTemperature(cycleDay, {