From 29d76d19b11e9fd94a6fd76e563108e5a16200d8 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Tue, 24 Mar 2020 20:15:01 +0100 Subject: [PATCH] Introduces Home component redesign --- components/common/app-text.js | 11 +- components/common/button.js | 31 ++++-- components/common/link.js | 7 +- components/common/menu-icon.js | 2 +- components/helpers/home.js | 7 ++ components/home-element.js | 40 ------- components/home.js | 197 +++++++++++++++++---------------- components/icon-text.js | 24 ---- i18n/en/labels.js | 8 +- styles/spacing.js | 1 + styles/typography.js | 2 +- 11 files changed, 150 insertions(+), 180 deletions(-) delete mode 100644 components/home-element.js delete mode 100644 components/icon-text.js diff --git a/components/common/app-text.js b/components/common/app-text.js index e7c1270..d431466 100644 --- a/components/common/app-text.js +++ b/components/common/app-text.js @@ -6,10 +6,16 @@ import Link from './link' import { Colors, Typography } from '../../styles/redesign' -export default function AppText({ children, onPress, numberOfLines, style}) { +export default function AppText({ + children, + linkStyle, + onPress, + numberOfLines, + style +}) { // we parse for links in case the text contains any return ( - + { - const buttonStyle = isCTA ? styles.orange : {} + const buttonStyle = isCTA ? styles.cta : styles.regular const textStyle = isCTA ? styles.buttonTextBold : styles.buttonTextRegular return ( @@ -23,24 +23,35 @@ Button.propTypes = { testID: PropTypes.string } -const button = { - paddingHorizontal: Spacing.large, - paddingVertical: Spacing.base, +const text = { + padding: Spacing.base, textTransform: 'uppercase' } +const button = { + alignItems: 'center', + justifyContent: 'center', + margin: Spacing.base +} + const styles = StyleSheet.create({ - orange: { + regular: { + ...button + }, + cta: { backgroundColor: Colors.orange, - borderRadius: 25 + borderRadius: 25, + ...button }, buttonTextBold: { - fontFamily: Fonts.main, - ...button + color: 'white', + fontFamily: Fonts.bold, + ...text }, buttonTextRegular: { - fontFamily: Fonts.bold, - ...button + color: Colors.greyDark, + fontFamily: Fonts.main, + ...text } }) diff --git a/components/common/link.js b/components/common/link.js index 8b1293f..c221361 100644 --- a/components/common/link.js +++ b/components/common/link.js @@ -7,10 +7,10 @@ import { Colors, Typography } from '../../styles/redesign' import links from '../../i18n/en/links' -const Link = ({ children }) => { +const Link = ({ children, style }) => { return ( @@ -20,7 +20,8 @@ const Link = ({ children }) => { } Link.propTypes = { - children: PropTypes.node + children: PropTypes.node, + style: PropTypes.object } const styles = StyleSheet.create({ diff --git a/components/common/menu-icon.js b/components/common/menu-icon.js index 636235e..abe7f83 100644 --- a/components/common/menu-icon.js +++ b/components/common/menu-icon.js @@ -10,7 +10,7 @@ const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu') const MenuIcon = ({ isActive, name }) => { const color = isActive ? Colors.greyDark : Colors.grey - return + return } MenuIcon.propTypes = { diff --git a/components/helpers/home.js b/components/helpers/home.js index 98e9f20..1da8516 100644 --- a/components/helpers/home.js +++ b/components/helpers/home.js @@ -62,3 +62,10 @@ export function getBleedingPredictionRange(prediction) { } return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`) } + +export const dateEnding = { + '1': 'st', + '2': 'nd', + '3': 'rd', + 'default': 'th' +} diff --git a/components/home-element.js b/components/home-element.js deleted file mode 100644 index 7f50f35..0000000 --- a/components/home-element.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import { View } from 'react-native' -import PropTypes from 'prop-types' - -import Button from './common/button' - -import styles from '../styles' - -const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => { - return ( - - - {children[0]} - {children[1]} - - - - {children.slice(2)} - - - - ) -} - -HomeElement.propTypes = { - buttonColor: PropTypes.string, - buttonLabel: PropTypes.string, - children: PropTypes.node, - onPress: PropTypes.func, -} - -export default HomeElement diff --git a/components/home.js b/components/home.js index b76bfd6..7cc52a0 100644 --- a/components/home.js +++ b/components/home.js @@ -1,54 +1,51 @@ -import { LocalDate } from 'js-joda' import React, { Component } from 'react' -import { ScrollView, View } from 'react-native' -import { connect } from 'react-redux' +import { ScrollView, StyleSheet, View } from 'react-native' import PropTypes from 'prop-types' +import { LocalDate } from 'js-joda' + +import { connect } from 'react-redux' import { navigate } from '../slices/navigation' import { getDate, setDate } from '../slices/date' -import DripHomeIcon from '../assets/drip-home-icons' - import AppText from './common/app-text' -import IconText from './icon-text' -import HomeElement from './home-element' - -import { home as labels } from '../i18n/en/labels' -import links from '../i18n/en/links' +import Button from './common/button' import cycleModule from '../lib/cycle' import { getFertilityStatusForDay } from '../lib/sympto-adapter' -import { - determinePredictionText, - getBleedingPredictionRange -} from './helpers/home' +import { determinePredictionText, dateEnding } from './helpers/home' -import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles' +import { Colors, Fonts, Sizes, Spacing } from '../styles/redesign' +import { homeRedesign as labels, home as cycle } from '../i18n/en/labels' class Home extends Component { static propTypes = { navigate: PropTypes.func, - setDate: PropTypes.func, - // The following are not being used, - // we could see if it's possible to not pass them from the - cycleDay: PropTypes.object, - date: PropTypes.string, + setDate: PropTypes.func } constructor(props) { super(props) + const today = LocalDate.now() + this.todayDateString = today.toString() const { getCycleDayNumber, getPredictedMenses } = cycleModule() - - this.todayDateString = LocalDate.now().toString() this.cycleDayNumber = getCycleDayNumber(this.todayDateString) - + const {status, phase, statusText} = + getFertilityStatusForDay(this.todayDateString) const prediction = getPredictedMenses() - this.predictionText = determinePredictionText(prediction) - this.bleedingPredictionRange = getBleedingPredictionRange(prediction) - this.fertilityStatus = getFertilityStatusForDay(this.todayDateString) + this.cycleDayText = !this.cycleDayNumber ? cycle.cycleDayNotEnoughInfo + : `${this.cycleDayNumber}${dateEnding[this.cycleDayNumber] || dateEnding['default']}` + this.phase = phase + this.phaseText = !phase ? statusText + : `${phase}${dateEnding[phase] || dateEnding['default']}` + this.prediction = determinePredictionText(prediction) + this.status = status + this.statusText = statusText + this.title = `${today.dayOfMonth()} ${today.month()}` + } navigateToCycleDayView = () => { @@ -56,88 +53,92 @@ class Home extends Component { this.props.navigate('CycleDay') } - navigateToBleedingEditView = () => { - this.props.setDate(this.todayDateString) - this.props.navigate('BleedingEditView') - } - - navigateToChart = () => { - this.props.navigate('Chart') - } - render() { const { - cycleDayNumber, - predictionText, - bleedingPredictionRange, + cycleDayText, + phase, + phaseText, + prediction, + status, + statusText, + title } = this - const { phase, status, statusText } = this.fertilityStatus - - const cycleDayMoreText = cycleDayNumber ? - labels.cycleDayKnown(cycleDayNumber) : - labels.cycleDayNotEnoughInfo - return ( - - - - - - - - {cycleDayNumber || labels.unknown} - - - {cycleDayMoreText} - - - - - - - - {bleedingPredictionRange} - - - - {predictionText} - - - - - - - { phase ? phase.toString() : labels.unknown } - - { phase && - - {`${labels.phase(phase)} (${status})`} - - } - - { `${statusText} Visit ${links.wiki.url}.` } - - + + {title} + + {this.cycleDayNumber && ( + + {cycleDayText} + {labels.cycleDay} + + )} + {!this.cycleDayNumber && {cycleDayText}} + + + {!phase && {phaseText}} + {phase && ( + + {phaseText} + {labels.cyclePhase} + {status} + + + )} + + + {prediction} + + + {phase && ( + + + {statusText} - - + )} + ) } } +const Asterisk = () => { + return * +} + +const styles = StyleSheet.create({ + asterisk: { + color: Colors.orange, + paddingRight: Spacing.base + }, + container: { + backgroundColor: Colors.purple, + flex: 1 + }, + contentContainer: { + padding: Spacing.base + }, + line: { + flexDirection: 'row', + justifyContent: 'flex-start', + marginBottom: Spacing.tiny + }, + title: { + color: Colors.purpleLight, + fontFamily: Fonts.bold, + fontSize: Sizes.huge, + marginVertical: Spacing.base, + }, + whiteText: { + color: 'white' + } +}) + const mapStateToProps = (state) => { return({ date: getDate(state), diff --git a/components/icon-text.js b/components/icon-text.js deleted file mode 100644 index be3b406..0000000 --- a/components/icon-text.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import { View } from 'react-native' -import PropTypes from 'prop-types' - -import AppText from './common/app-text' - -import styles from '../styles' - -const IconText = ({ children, wrapperStyles }) => { - return ( - - - { children } - - - ) -} - -IconText.propTypes = { - children: PropTypes.node, - wrapperStyles: PropTypes.object, -} - -export default IconText diff --git a/i18n/en/labels.js b/i18n/en/labels.js index 7aec163..4dd59fe 100644 --- a/i18n/en/labels.js +++ b/i18n/en/labels.js @@ -1,6 +1,12 @@ import labels from './settings' const settingsTitles = labels.menuItems +export const homeRedesign = { + cycleDay: ' day of your cycle', + cyclePhase: ' cycle phase - ', + addData: 'add data for today' +} + export const shared = { cancel: 'Cancel', save: 'Save', @@ -113,7 +119,7 @@ export const fertilityStatus = { fertileUntilEvening: 'Fertile phase ends in the evening', unknown: 'We cannot show any cycle information because no period data has been added.', preOvuText: "With NFP rules, you may assume 5 days of infertility at the beginning of your cycle, provided you don't observe any fertile cervical mucus or cervix values.", - periOvuText: "We have not been able to detect both a temperature shift and cervical mucus or cervix shift. Please find more information on NFP rules here:", + periOvuText: "We have not been able to detect both a temperature shift and cervical mucus or cervix shift. Please find more information on NFP rules here: https://gitlab.com/bloodyhealth/drip/wikis/home", postOvuText: tempRule => { return ( 'We have detected a temperature shift (' + ['regular', '1st exception', '2nd exception'][tempRule] + diff --git a/styles/spacing.js b/styles/spacing.js index 9b2a0b5..32c5797 100644 --- a/styles/spacing.js +++ b/styles/spacing.js @@ -1,4 +1,5 @@ export default { + tiny: 4, small: 10, base: 16, large: 20 diff --git a/styles/typography.js b/styles/typography.js index 82527a8..4dcf274 100644 --- a/styles/typography.js +++ b/styles/typography.js @@ -11,7 +11,7 @@ export const sizes = { base: 18, subtitle: 22, title: 24, - icon: 40 + huge: 40 } const title = {