Merge branch '362-rearrange-home-screen-elements' into 'master'

Resolve "Rearrange home screen elements"

Closes #362

See merge request bloodyhealth/drip!220

components/home.js

@@ -1,14 +1,12 @@
 import { ChronoUnit, LocalDate } from 'js-joda'
 import React, { Component } from 'react'
-import { Dimensions, ScrollView, TouchableHighlight, View } from 'react-native'
+import { ScrollView, View } from 'react-native'
-import Icon from 'react-native-vector-icons/Entypo'
 
 import DripHomeIcon from '../assets/drip-home-icons'
 import { getCycleDay } from '../db'
 import {
   bleedingPrediction as predictLabels,
-  home as labels,
+  home as labels
-  shared,
 } from '../i18n/en/labels'
 import links from '../i18n/en/links'
 import cycleModule from '../lib/cycle'
@@ -18,25 +16,6 @@ import AppText from './app-text'
 import Button from './button'
 import { formatDateForShortText } from './helpers/format-date'
 
-const ShowMoreToggler = ({ isShowingMore, onToggle }) => {
-  const {height, width} = Dimensions.get('window')
-  const leftPosition = isShowingMore ? 10 : width - 40
-  const style = isShowingMore ? styles.showLess : styles.showMore
-  const topPosition = height / 2 - styles.header.height - 30
-
-  return (
-    <TouchableHighlight
-      onPress={onToggle}
-      style={[style, { top: topPosition, left: leftPosition}]}
-    >
-      <View style={{alignItems: 'center'}}>
-        <AppText>{isShowingMore ? shared.less : shared.more}</AppText>
-        <Icon name='chevron-thin-down' />
-      </View>
-    </TouchableHighlight>
-  )
-}
-
 const IconText = ({ children, wrapperStyles }) => {
   return (
     <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
@@ -51,15 +30,22 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
   return (
     <View
       onPress={ onPress }
-      style={ styles.homeIconElement }
+      style={ styles.homeElement }
     >
-      { children }
+      <View style={styles.homeIconAndText}>
-      <Button
+        {children[0]}
-        style={styles.homeButton}
+        {children[1]}
-        onPress={ onPress }
+      </View>
-        backgroundColor={ buttonColor }>
+
-        { buttonLabel }
+      <View style={{paddingLeft: 15}}>
-      </Button>
+        {children[2]}
+        <Button
+          style={styles.homeButton}
+          onPress={ onPress }
+          backgroundColor={ buttonColor }>
+          { buttonLabel }
+        </Button>
+      </View>
     </View>
   )
 }
@@ -75,7 +61,6 @@ export default class Home extends Component {
     const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
 
     this.state = {
-      isShowingMore: false,
       cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
       predictionText: determinePredictionText(prediction),
       bleedingPredictionRange: getBleedingPredictionRange(prediction),
@@ -91,12 +76,8 @@ export default class Home extends Component {
     })
   }
 
-  toggleShowingMore = () => {
-    this.setState({ isShowingMore: !this.state.isShowingMore })
-  }
-
   render() {
-    const { isShowingMore, cycleDayNumber, phase, status } = this.state
+    const { cycleDayNumber, phase, status } = this.state
     const { navigate } = this.props
     const cycleDayMoreText = cycleDayNumber ?
       labels.cycleDayKnown(cycleDayNumber) :
@@ -117,13 +98,11 @@ export default class Home extends Component {
               <View>
                 <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
               </View>
-              <IconText wrapperStyles={styles.wrapperCycle}>
+              <IconText wrapperStyles={styles.wrapperIcon}>
                 {cycleDayNumber || labels.unknown}
               </IconText>
 
-              { isShowingMore &&
+              <AppText style={styles.homeDescriptionText}>{cycleDayMoreText}</AppText>
-                  <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
-              }
             </HomeElement>
 
             <HomeElement
@@ -131,19 +110,15 @@ export default class Home extends Component {
               buttonColor={ periodColor }
               buttonLabel={ labels.trackPeriod }
             >
-              <View>
+              <DripHomeIcon name="drop" size={100} color={periodColor} />
-                <DripHomeIcon name="drop" size={105} color={periodColor} />
-              </View>
 
-              <IconText wrapperStyles={styles.wrapperDrop}>
+              <IconText wrapperStyles={{top: '50%', ...styles.wrapperIcon}}>
                 {this.state.bleedingPredictionRange}
               </IconText>
 
-              { isShowingMore &&
+              <AppText style={styles.homeDescriptionText}>
-                <AppText style={styles.paragraph}>
+                {this.state.predictionText}
-                  {this.state.predictionText}
+              </AppText>
-                </AppText>
-              }
             </HomeElement>
 
             <HomeElement
@@ -153,27 +128,23 @@ export default class Home extends Component {
             >
               <View style={styles.homeCircle}/>
 
-              <IconText wrapperStyles={styles.wrapperCircle}>
+              <IconText wrapperStyles={styles.wrapperIcon}>
                 { phase ? phase.toString() : labels.unknown }
               </IconText>
 
               { phase &&
-                <AppText>{`${labels.phase(phase)} (${status})`}</AppText>
+                <AppText style={styles.homeDescriptionText}>
-              }
+                  {`${labels.phase(phase)} (${status})`}
-              { isShowingMore &&
+                </AppText>
-                <View>
-                  <AppText styles={styles.paragraph}>
-                    { `${statusText} ${links.wiki.url}.` }
-                  </AppText>
-                </View>
               }
+              <View>
+                <AppText styles={styles.homeDescriptionText}>
+                  { `${statusText} ${links.wiki.url}.` }
+                </AppText>
+              </View>
             </HomeElement>
           </View>
         </ScrollView>
-        <ShowMoreToggler
-          isShowingMore={isShowingMore}
-          onToggle={this.toggleShowingMore}
-        />
       </View>
     )
   }

i18n/en/labels.js

@@ -15,8 +15,6 @@ export const shared = {
   date: 'Date',
   cycleDayWithLinebreak: 'Cycle\nday',
   loading: 'Loading ...',
-  more: 'more',
-  less: 'less',
   enter: 'Enter'
 }
 

styles/index.js

@@ -104,9 +104,6 @@ export default StyleSheet.create({
     marginLeft: 10,
     marginTop: 6
   },
-  homeView: {
-    marginHorizontal: 50,
-  },
   button: {
     paddingVertical: 10,
     paddingHorizontal: 20,
@@ -120,29 +117,26 @@ export default StyleSheet.create({
   homeButtonText: {
     color: fontOnPrimaryColor
   },
-  homeIconElement: {
+  homeView: {
-    alignItems: 'center',
+    margin: 40,
-    marginTop: 15
+  },
+  homeDescriptionText: {
+    width: 200,
+    marginBottom: defaultBottomMargin,
+  },
+  homeElement: {
+    marginBottom: 40,
+    flexDirection: 'row',
   },
   homeIconTextWrapper: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginBottom: 10,
   },
-  wrapperCycle: {
+  homeIconAndText: {
+    justifyContent: 'center'
+  },
+  wrapperIcon: {
     width: 80,
-    height: 77,
-    position: 'absolute'
-  },
-  wrapperDrop: {
-    width: 81,
-    height: 85,
-    marginTop: 20,
-    position: 'absolute'
-  },
-  wrapperCircle: {
-    width: 80,
-    height: 80,
     position: 'absolute'
   },
   homeCircle: {
@@ -157,14 +151,6 @@ export default StyleSheet.create({
   iconText: {
     fontSize: 25
   },
-  showMore: {
-    transform: [{rotate: '90deg'}],
-    position: 'absolute',
-  },
-  showLess: {
-    transform: [{rotate: '270deg'}],
-    position: 'absolute'
-  },
   cycleDayNumber: {
     fontSize: 15,
     color: fontOnPrimaryColor,