From 29a82fca9f3e71e279a05e4670aa9bd1c4e658e9 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
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 77352560..0c951c89 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
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
literal 0
HcmV?d00001
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index b127b747..dee8a9eb 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -1,8 +1,9 @@
import React, { Component } from 'react'
import {
View,
- Button,
- Text
+ Text,
+ Image,
+ TouchableOpacity
} from 'react-native'
import styles from '../../styles'
import {
@@ -48,70 +49,50 @@ export default class DayView extends Component {
const cycleDay = this.cycleDay
return (
<View style={styles.symptomEditView}>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Bleeding</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('BleedingEditView')}
- title={getLabel('bleeding', cycleDay.bleeding)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Temperature</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('TemperatureEditView')}
- title={getLabel('temperature', cycleDay.temperature)}>
- </Button>
- </View>
- </View>
- <View style={ styles.symptomViewRowInline }>
- <Text style={styles.symptomDayView}>Mucus</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('MucusEditView')}
- title={getLabel('mucus', cycleDay.mucus)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Cervix</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('CervixEditView')}
- title={getLabel('cervix', cycleDay.cervix)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Note</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('NoteEditView')}
- title={getLabel('note', cycleDay.note)}
- >
- </Button>
- </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 style={styles.symptomBoxesView}>
+ <SymptomBox
+ title='Bleeding'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('BleedingEditView')}
+ data={getLabel('bleeding', cycleDay.bleeding)}
+ />
+ <SymptomBox
+ title='Temperature'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('TemperatureEditView')}
+ data={getLabel('temperature', cycleDay.temperature)}
+ />
+ <SymptomBox
+ title='Mucus'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('MucusEditView')}
+ data={getLabel('mucus', cycleDay.mucus)}
+ />
+ <SymptomBox
+ title='Cervix'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('CervixEditView')}
+ data={getLabel('cervix', cycleDay.cervix)}
+ />
+ <SymptomBox
+ title='Note'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('NoteEditView')}
+ data={getLabel('note', cycleDay.note)}
+ />
+ <SymptomBox
+ title='Desire'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('DesireEditView')}
+ data={getLabel('desire', cycleDay.desire)}
+ />
+ <SymptomBox
+ title='Sex'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('SexEditView')}
+ data={getLabel('sex', cycleDay.sex)}
+ />
+ </View >
</View >
)
}
@@ -186,3 +167,20 @@ function getLabel(symptomName, symptom) {
if (!symptom) return '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>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js
index 94bb51e4..fab2b2e3 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 (
<ScrollView>
<View style={ styles.cycleDayDateView }>
<Text style={styles.dateHeader}>
{formatDateForViewHeader(this.cycleDay.date)}
</Text>
- </View >
- <View style={ styles.cycleDayNumberView }>
{ cycleDayNumber &&
<Text style={styles.cycleDayNumber} >
Cycle day {cycleDayNumber}
</Text> }
-
- <Text style={styles.cycleDayNumber} >
- {fertilityStatus}
- </Text>
</View >
<View>
{ this.cycleDayViews[this.state.visibleComponent] }
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 7ec0574b..ffd1836e 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 (
- <View style={styles.symptomEditView}>
- <Text style={styles.symptomDayView}>Bleeding</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={bleedingRadioProps}
- initial={this.state.currentValue}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({ currentValue: itemValue })
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Exclude</Text>
- <Switch
- onValueChange={(val) => {
- this.setState({ exclude: val })
- }}
- value={this.state.exclude}
- />
+ <View>
+ <View style={styles.symptomEditView}>
+ <Text style={styles.symptomDayView}>Bleeding</Text>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={bleedingRadioProps}
+ initial={this.state.currentValue}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ currentValue: itemValue })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Exclude</Text>
+ <Switch
+ onValueChange={(val) => {
+ this.setState({ exclude: val })
+ }}
+ value={this.state.exclude}
+ />
+ </View>
</View>
<View style={styles.actionButtonRow}>
{this.makeActionButtons(
diff --git a/styles/index.js b/styles/index.js
index fde1700a..9197f310 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
--
GitLab