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

Make stats look a bit more consistent with framed segment

Browse Source 
Co-Authored-By: tina <1700791-liv-theo@users.noreply.gitlab.com>
This commit is contained in:
emelko
2019-02-05 01:20:35 +01:00
parent ca905c6bc6
commit 646543c928
2 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/stats.js
+14 -11
View File
@@ -9,6 +9,7 @@ import cycleModule from '../lib/cycle'
import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length' import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
import {stats as labels} from '../i18n/en/labels' import {stats as labels} from '../i18n/en/labels'
import AppText from './app-text' import AppText from './app-text'
import FramedSegment from './framed-segment'
export default class Stats extends Component { export default class Stats extends Component {
render() { render() {
@@ -24,8 +25,10 @@ export default class Stats extends Component {
} }
return ( return (
<ScrollView> <ScrollView>
<View style={[styles.textWrappingView]}> <FramedSegment
<AppText style={styles.title}>{labels.cycleLengthTitle}</AppText> style={styles.framedSegmentLast}
title={labels.cycleLengthTitle}
>
<AppText style={styles.paragraph}>{labels.cycleLengthExplainer}</AppText> <AppText style={styles.paragraph}>{labels.cycleLengthExplainer}</AppText>
{!atLeastOneCycle && {!atLeastOneCycle &&
<AppText>{labels.emptyStats}</AppText> <AppText>{labels.emptyStats}</AppText>
@@ -39,20 +42,20 @@ export default class Stats extends Component {
} }
{atLeastOneCycle && numberOfCycles > 1 && <View> {atLeastOneCycle && numberOfCycles > 1 && <View>
<View style={styles.statsRow}> <View style={styles.statsRow}>
<AppText style={[styles.statsLabelLeft, styles.emphasis]}>{labels.averageLabel}</AppText> <AppText style={styles.emphasis}>{labels.averageLabel}</AppText>
<AppText style={[styles.statsLabelRight, styles.emphasis]}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText> <AppText style={styles.emphasis}>{': ' + cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
</View> </View>
<View style={styles.statsRow}> <View style={styles.statsRow}>
<AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText> <AppText>{labels.minLabel}</AppText>
<AppText style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</AppText> <AppText>{': ' + cycleInfo.minimum + ' ' + labels.daysLabel}</AppText>
</View> </View>
<View style={styles.statsRow}> <View style={styles.statsRow}>
<AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText> <AppText>{labels.maxLabel}</AppText>
<AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText> <AppText>{': ' + cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
</View> </View>
<View style={[styles.statsRow, styles.paragraph]}> <View style={[styles.statsRow, styles.paragraph]}>
<AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText> <AppText>{labels.stdLabel}</AppText>
<AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText> <AppText>{': ' + cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
</View> </View>
<View style={styles.statsRow}> <View style={styles.statsRow}>
<AppText>{labels.basisOfStatsBeginning}</AppText> <AppText>{labels.basisOfStatsBeginning}</AppText>
@@ -60,7 +63,7 @@ export default class Stats extends Component {
<AppText>{labels.basisOfStatsEnd}</AppText> <AppText>{labels.basisOfStatsEnd}</AppText>
</View> </View>
</View>} </View>}
</View> </FramedSegment>
</ScrollView> </ScrollView>
) )
} }
styles/index.js
+2 -11
View File
@@ -45,7 +45,8 @@ export default StyleSheet.create({
}, },
emphasis: { emphasis: {
fontWeight: 'bold', fontWeight: 'bold',
fontFamily: textFontBold fontFamily: textFontBold,
color: secondaryColor,
}, },
link: { link: {
color: cycleDayColor, color: cycleDayColor,
@@ -307,16 +308,6 @@ export default StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
width: '100%' width: '100%'
}, },
statsLabelLeft: {
width: '60%',
textAlign: 'left',
textAlignVertical: 'center',
marginLeft: 10
},
statsLabelRight: {
textAlign: 'left',
textAlignVertical: 'center'
},
menuLabel: { menuLabel: {
fontSize: 15, fontSize: 15,
color: fontOnPrimaryColor color: fontOnPrimaryColor