From cdef99d616b863f0e70ba7f31ed1ce2873bd7919 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Wed, 26 Sep 2018 11:02:40 +0200
Subject: [PATCH] little improvements after review
---
components/chart/chart.js | 50 ++++++++--------------------------
components/chart/day-column.js | 2 +-
components/chart/styles.js | 48 ++++++++++++++++++++------------
components/chart/y-axis.js | 2 +-
components/labels.js | 5 +++-
5 files changed, 48 insertions(+), 59 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index ce5a9e57..ccffbba3 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -10,6 +10,7 @@ import styles from './styles'
import { scaleObservable } from '../../local-storage'
import config from '../../config'
import { AppText } from '../app-text'
+import { shared as labels } from '../labels'
export default class CycleChart extends Component {
constructor(props) {
@@ -137,7 +138,6 @@ export default class CycleChart extends Component {
}
render() {
- console.log(this.symptomRowSymptoms)
return (
<View
onLayout={this.onLayout}
@@ -145,55 +145,29 @@ export default class CycleChart extends Component {
>
{!this.state.chartLoaded &&
<View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
- <AppText>Loading...</AppText>
+ <AppText>{labels.loading}</AppText>
</View>
}
{this.state.chartHeight && this.state.chartLoaded &&
<View>
- <View
- style={[
- styles.yAxis,
- {
- height: this.symptomRowHeight,
- }
- ]}
- >
+ <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
{this.symptomRowSymptoms.map(symptomName => {
return <View key={symptomName} style={{flex: 1}}>
<AppText>{symptomName[0]}</AppText>
</View>
- })
- }
+ })}
</View>
- <View
- style={[styles.yAxis, {
- height: this.columnHeight,
- }]}
- >
+ <View style={[styles.yAxis, {height: this.columnHeight}]}>
{makeYAxisLabels(this.columnHeight)}
</View>
- <View style={[
- styles.yAxis,
- {
- height: this.xAxisHeight
- }
- ]}>
- <AppText style = {[
- styles.column.label.number,
- {
- textAlign: 'center',
- justifyContent: 'center',
- fontSize: Math.ceil(styles.column.label.number.fontSize / 2)
- }
- ]}>{'Cycle\nday'}</AppText>
- <AppText style={[
- styles.column.label.date,
- {
- textAlign: 'center',
- justifyContent: 'center'
- }
- ]}>{'Date'}</AppText>
+ <View style={[styles.yAxis, {height: this.xAxisHeight}]}>
+ <AppText style = {[styles.column.label.number, styles.yAxisLabels.cycleDayLabel]}>
+ {labels.cycleDayWithLinebreak}
+ </AppText>
+ <AppText style={[styles.column.label.date,styles.yAxisLabels.dateLabel]}>
+ {labels.date}
+ </AppText>
</View>
</View>}
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index a5fe820a..ec3dd959 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -149,7 +149,7 @@ export default class DayColumn extends Component {
<View
{...styles.symptomIcon}
// cervix is sum of openess and firmness - fertile only when closed and hard (=0)
- backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[1] : styles.iconShades.cervix[0]}
+ backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[2] : styles.iconShades.cervix[0]}
/>
</SymptomIconView>
),
diff --git a/components/chart/styles.js b/components/chart/styles.js
index ef8d0ac8..8cc044fb 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -8,6 +8,7 @@ const lineWidth = 1.5
const colorLtl = '#feb47b'
const gridColor = 'lightgrey'
const gridLineWidth = 0.5
+const numberLabelFontSize = 13
const styles = {
curve: {
@@ -36,7 +37,7 @@ const styles = {
},
number: {
color: primaryColor,
- fontSize: 13,
+ fontSize: numberLabelFontSize,
textAlign: 'center',
}
},
@@ -57,11 +58,11 @@ const styles = {
iconShades: {
'bleeding': shadesOfRed,
'mucus': [
- '#e8f6a4',
- '#bccd67',
- '#91a437',
- '#6a7b15',
- '#445200',
+ '#e3e7ed',
+ '#c8cfdc',
+ '#acb8cb',
+ '#91a0ba',
+ '#7689a9'
],
'cervix': [
'#f0e19d',
@@ -70,16 +71,16 @@ const styles = {
'#dbb40c',
],
'sex': [
- '#A66FA6',
- '#8A458A',
+ '#a87ca2',
+ '#8b5083',
'#6f2565',
],
'desire': [
- '#68113f',
- '#8b2e5f',
- '#ad5784',
+ '#c485a6',
+ '#b15c89',
+ '#9e346c',
],
- 'pain': ['#7689A9'],
+ 'pain': ['#bccd67'],
'note': ['#6CA299']
},
yAxis: {
@@ -88,12 +89,23 @@ const styles = {
borderColor: 'lightgrey',
borderStyle: 'solid'
},
- yAxisLabel: {
- position: 'absolute',
- right: 2,
- color: 'grey',
- fontSize: 9,
- textAlign: 'left'
+ yAxisLabels: {
+ tempScale: {
+ position: 'absolute',
+ right: 2,
+ color: 'grey',
+ fontSize: 9,
+ textAlign: 'left'
+ },
+ cycleDayLabel: {
+ textAlign: 'center',
+ justifyContent: 'center',
+ fontSize: Math.ceil(numberLabelFontSize / 2)
+ },
+ dateLabel: {
+ textAlign: 'center',
+ justifyContent: 'center'
+ }
},
horizontalGrid: {
position:'absolute',
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 3ede6c61..e1e0d6f0 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -8,7 +8,7 @@ import { AppText } from '../app-text'
export function makeYAxisLabels(columnHeight) {
const units = unitObservable.value
const scaleMax = scaleObservable.value.max
- const style = styles.yAxisLabel
+ const style = styles.yAxisLabels.tempScale
return getTickPositions(columnHeight).map((y, i) => {
const tick = scaleMax - i * units
diff --git a/components/labels.js b/components/labels.js
index 7fde2b80..5ebae600 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -8,7 +8,10 @@ export const shared = {
incorrectPasswordMessage: 'That password is incorrect.',
tryAgain: 'Try again',
ok: 'OK',
- unlock: 'Unlock'
+ unlock: 'Unlock',
+ date: 'Date',
+ cycleDayWithLinebreak: 'Cycle\nday',
+ loading: 'Loading ...'
}
export const settings = {
--
GitLab