Merge branch 'marie-move-info-button-out-of-header-to-body' into 'master'

Move info button out of header to body

See merge request bloodyhealth/drip!217

components/app.js

@@ -11,7 +11,6 @@ import SettingsMenu from './settings/settings-menu'
 import settingsViews from './settings'
 import Stats from './stats'
 import {headerTitles, menuTitles} from '../i18n/en/labels'
-import InfoSymptom from './cycle-day/symptoms/info-symptom'
 import setupNotifications from '../lib/notifications'
 
 // design wants everyhting lowercased, but we don't
@@ -22,7 +21,6 @@ const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
 }, {})
 
 const HOME_PAGE = 'Home'
-const INFO_SYMPTOM_PAGE = 'InfoSymptom'
 const CYCLE_DAY_PAGE = 'CycleDay'
 const SETTINGS_MENU_PAGE = 'SettingsMenu'
 
@@ -49,7 +47,7 @@ export default class App extends Component {
     if (this.isMenuItem()) {
       this.menuOrigin = currentPage
     }
-    if (!this.isSymptomView() && !this.isInfoSymptomView()) {
+    if (!this.isSymptomView()) {
       this.originForSymptomView = currentPage
     }
     this.setState({ currentPage: pageName, currentProps: props })
@@ -66,10 +64,6 @@ export default class App extends Component {
       this.navigate(SETTINGS_MENU_PAGE)
     } else if (currentPage === CYCLE_DAY_PAGE) {
       this.navigate(this.menuOrigin)
-    } else if (this.isInfoSymptomView()) {
-      const { date, cycleDay, symptomView } = currentProps
-      this.navigate(
-        symptomView, { date, cycleDay })
     } else {
       this.navigate(HOME_PAGE)
     }
@@ -84,10 +78,6 @@ export default class App extends Component {
     return Object.keys(symptomViews).includes(this.state.currentPage)
   }
 
-  isInfoSymptomView() {
-    return this.state.currentPage === INFO_SYMPTOM_PAGE
-  }
-
   isSettingsView() {
     return Object.keys(settingsViews).includes(this.state.currentPage)
   }
@@ -104,7 +94,6 @@ export default class App extends Component {
       Calendar,
       CycleDay,
       Chart,
-      InfoSymptom,
       SettingsMenu,
       ...settingsViews,
       Stats,
@@ -118,7 +107,7 @@ export default class App extends Component {
         {this.isDefaultView() &&
           <Header title={title} />
         }
-        {(this.isInfoSymptomView() || this.isSettingsView()) &&
+        {(this.isSettingsView()) &&
           <Header
             title={title}
             showBackButton={true}

components/cycle-day/symptoms/info-symptom.js

-import React, { Component } from 'react'
-import { ScrollView } from 'react-native'
+import React from 'react'
+import { ScrollView, View, TouchableOpacity } from 'react-native'
+import Icon from 'react-native-vector-icons/SimpleLineIcons'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
-import FramedSegment from '../../framed-segment'
-import styles from '../../../styles/index'
+import styles, {iconStyles} from '../../../styles/index'
 
-export default class InfoSymptom extends Component {
-  render() {
-    const symptomView = this.props.symptomView
-    const symptomMapping = {
-      BleedingEditView: 'bleeding',
-      CervixEditView: 'cervix',
-      DesireEditView: 'desire',
-      MoodEditView: 'mood',
-      MucusEditView: 'mucus',
-      NoteEditView: 'note',
-      PainEditView: 'pain',
-      SexEditView: 'sex',
-      TemperatureEditView: 'temperature'
-    }
-    const currentSymptom = symptomMapping[symptomView]
-
-    return (
-      <ScrollView>
-        <FramedSegment
-          style={styles.framedSegmentLast}
-          title={labels[currentSymptom].title}
-        >
-          <AppText>{labels[currentSymptom].text}</AppText>
-        </FramedSegment>
-      </ScrollView>
-    )
-  }
+export default function InfoSymptom(props) {
+  return (
+    <View style={styles.infoPopUpWrapper}>
+      <View style={styles.dimmed}></View>
+      <View style={styles.infoPopUp}>
+        <TouchableOpacity onPress={props.close} style={styles.infoSymptomClose}>
+          <Icon name='close' {...iconStyles.infoPopUpClose}/>
+        </TouchableOpacity>
+        <ScrollView style={styles.infoSymptomText}>
+          <AppText>{labels[props.symptom].text}</AppText>
+        </ScrollView>
+      </View>
+    </View>
+  )
 }

components/cycle-day/symptoms/symptom-section.js

 import React, { Component } from 'react'
 import { View } from 'react-native'
 import AppText, { SymptomSectionHeader } from '../../app-text'
+import styles from '../../../styles'
 
 export default class SymptomSection extends Component {
   render() {
@@ -13,8 +14,10 @@ export default class SymptomSection extends Component {
       }
     }
     return (
-      <View style={placeHeadingInline}>
-        <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+      <View style={[placeHeadingInline, styles.symptomSection]}>
+        { p.header &&
+          <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+        }
         <View
           flexDirection={p.inline ? 'row' : null}
           flex={1}

components/cycle-day/symptoms/symptom-view.js

 import React, { Component } from 'react'
-import { BackHandler, View, Alert } from 'react-native'
+import {
+  BackHandler, View, Alert, TouchableOpacity
+} from 'react-native'
 import { saveSymptom } from '../../../db'
+import InfoPopUp from './info-symptom'
 import Header from '../../header/symptom-view'
 import { headerTitles } from '../../../i18n/en/labels'
 import { sharedDialogs } from '../../../i18n/en/cycle-day'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import styles, { iconStyles } from '../../../styles'
 
 export default class SymptomView extends Component {
   constructor(props) {
@@ -14,6 +19,10 @@ export default class SymptomView extends Component {
     )
     this.globalBackhandler = props.handleBackButtonPress
     this.date = props.date
+    this.navigate = props.navigate
+    this.state = {
+      showInfo: false
+    }
   }
 
   async handleBackButtonPressOnSymptomView() {
@@ -35,10 +44,17 @@ export default class SymptomView extends Component {
   }
 
   isDeleteIconActive() {
-    return Object.values(this.state).some(value => {
+    const symptomValueHasBeenFilledOut = key => {
+      // the state tracks whether the symptom info should be shown,
+      // we ignore that property
+      if (key === 'showInfo') return
       // is there any meaningful value in the current state?
-      return value || value === 0
-    })
+      return this.state[key] || this.state[key] === 0
+    }
+
+    const symptomValues =  Object.keys(this.state)
+
+    return symptomValues.some(symptomValueHasBeenFilledOut)
   }
 
   render() {
@@ -66,7 +82,27 @@ export default class SymptomView extends Component {
             )
           }}
         />
-        {this.renderContent()}
+        <View flex={1}>
+          { this.renderContent() }
+          <TouchableOpacity
+            onPress={() => {
+              this.setState({showInfo: true})
+            }}
+            style={styles.infoButtonSymptomView}
+          >
+            <FeatherIcon
+              name="info"
+              {...iconStyles.infoInSymptomView}
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+          { this.state.showInfo &&
+              <InfoPopUp
+                symptom={this.symptomName}
+                close={() => this.setState({showInfo: false})}
+              />
+          }
+        </View>
       </View>
     )
   }

components/header/navigation-arrow.js

@@ -8,6 +8,10 @@ export default function NavigationArrow(props) {
     left: 'chevron-thin-left',
     right: 'chevron-thin-right'
   }[props.direction]
+  const iconPosition = {
+    left: 'navigationArrowLeft',
+    right: 'navigationArrowRight'
+  }[props.direction]
   let pressHandler
   if (props.goBack) {
     pressHandler = () => props.goBack()
@@ -19,7 +23,7 @@ export default function NavigationArrow(props) {
   }
   return (
     <TouchableOpacity
-      style={styles.navigationArrow}
+      style={[styles.navigationArrow, styles[iconPosition]]}
       onPress={pressHandler}
     >
       <Icon

components/header/symptom-view.js

@@ -30,17 +30,19 @@ export default function SymptomViewHeader(props) {
           {formatDate(props.date)}
         </Text>
       </View >
-      <TouchableOpacity
-        onPress={props.deleteEntry}
-        style={[styles.infoButton, {opacity: props.deleteIconActive ? 1 : 0}]}
-        disabled={!props.deleteIconActive}
-      >
-        <Icon
-          name="delete"
-          style={styles.symptomDeleteIcon}
-          {...iconStyles.symptomHeaderIcons}
-        />
-      </TouchableOpacity>
+      { props.deleteIconActive &&
+        <TouchableOpacity
+          onPress={props.deleteEntry}
+          style={[
+            styles.headerDeleteButton,
+          ]}
+        >
+          <Icon
+            name="delete"
+            {...iconStyles.symptomHeaderIcons}
+          />
+        </TouchableOpacity>
+      }
 
     </View>
   )

styles/index.js

@@ -159,12 +159,10 @@ export default StyleSheet.create({
   },
   symptomViewHeading: {
     fontWeight: 'bold',
-    fontFamily: textFontBold,
-    marginTop: 10
+    fontFamily: textFontBold
   },
-  symptomDeleteIcon: {
-    marginRight: 20,
-    marginLeft: 20
+  symptomSection: {
+    marginBottom: 10
   },
   symptomBoxImage: {
     width: 50,
@@ -222,13 +220,12 @@ export default StyleSheet.create({
     justifyContent: 'center',
     height: 80
   },
-  headerCycleDay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
   navigationArrow: {
-    padding: 20
+    padding: 20,
+    position: 'absolute'
   },
+  navigationArrowLeft: { left: 0 },
+  navigationArrowRight: { right: 0 },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
@@ -258,20 +255,6 @@ export default StyleSheet.create({
   temperatureTextInputSuggestion: {
     color: '#939393'
   },
-  actionButtonFooter: {
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    flexDirection: 'row',
-    height: 60,
-  },
-  actionButtonItem: {
-    backgroundColor: secondaryColor,
-    alignItems: 'center',
-    flex: 1,
-    marginHorizontal: 5,
-    paddingVertical: 5,
-    borderRadius: 5,
-  },
   symptomEditButton: {
     width: 130
   },
@@ -296,6 +279,31 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center'
   },
+  infoPopUpWrapper: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  },
+  infoPopUp: {
+    backgroundColor: 'white',
+    padding: 15,
+    marginHorizontal: 20,
+    marginTop: 20,
+    maxHeight: '92%'
+  },
+  dimmed: {
+    position: 'absolute',
+    backgroundColor: 'black',
+    opacity: 0.5,
+    width: '100%',
+    height: '100%'
+  },
+  infoSymptomClose: {
+    alignItems: 'flex-end'
+  },
+  infoSymptomText: {
+    marginTop: 10
+  },
   settingsButton: {
     padding: 10,
     alignItems: 'center',
@@ -372,7 +380,8 @@ export default StyleSheet.create({
     borderLeftWidth: null
   },
   page: {
-    marginHorizontal: 10
+    marginHorizontal: 10,
+    marginTop: 20,
   },
   calendarToday: {
     fontWeight: 'bold',
@@ -424,8 +433,16 @@ export default StyleSheet.create({
     marginTop: 20,
     color: 'grey'
   },
-  infoButton: {
-    paddingVertical: 20
+  headerDeleteButton: {
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    position: 'absolute',
+    right: 0
+  },
+  infoButtonSymptomView: {
+    position: 'absolute',
+    padding: 15,
+    right: 0
   },
   licensePage: {
     paddingVertical: 20,
@@ -457,6 +474,10 @@ export const iconStyles = {
   symptomBoxActive: {
     color: fontOnPrimaryColor
   },
+  symptomInfo: {
+    color: secondaryColor,
+    fontSize: 25
+  },
   menuIcon: {
     size: 20,
     color: fontOnPrimaryColor
@@ -464,8 +485,7 @@ export const iconStyles = {
   menuIconInactive: {
     color: colorInActive,
   },
-  infoInHeading: {
-    marginRight: 5,
-    color: 'black'
+  infoPopUpClose: {
+    size: 25
   }
 }