Merge branch 'master' into link-nfp-rules

components/app-text.js

@@ -10,6 +10,7 @@ export default function AppText(props) {
       <Text
         style={[styles.appText, props.style]}
         onPress={props.onPress}
+        numberOfLines={props.numberOfLines}
       >
         {props.children}
       </Text>

components/cycle-day/cycle-day-overview.js

@@ -167,10 +167,7 @@ export default class CycleDayOverView extends Component {
     }
 
     const symptomValue = cycleDay[symptomName]
-    const label = l[symptomName](symptomValue)
-    if (!label) return
-    if (label.length < 45) return label
-    return label.slice(0, 42) + '...'
+    return l[symptomName](symptomValue)
   }
 
   render() {
@@ -293,7 +290,10 @@ class SymptomBox extends Component {
           </AppText>
         </View>
         <View style={[styles.symptomDataBox, disabledStyle]}>
-          <AppText style={styles.symptomDataText}>{this.props.data}</AppText>
+          <AppText
+            style={styles.symptomDataText}
+            numberOfLines={3}
+          >{this.props.data}</AppText>
         </View>
       </TouchableOpacity>
     )

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

@@ -1,11 +1,9 @@
 import React, { Component } from 'react'
-import {
-  View,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import { ScrollView } from 'react-native'
 import AppText from '../../app-text'
-import * as labels from '../../../i18n/en/symptom-info.js'
+import labels from '../../../i18n/en/symptom-info.js'
+import FramedSegment from '../../framed-segment'
+import styles from '../../../styles/index'
 
 export default class InfoSymptom extends Component {
   render() {
@@ -14,6 +12,7 @@ export default class InfoSymptom extends Component {
       BleedingEditView: 'bleeding',
       CervixEditView: 'cervix',
       DesireEditView: 'desire',
+      MoodEditView: 'mood',
       MucusEditView: 'mucus',
       NoteEditView: 'note',
       PainEditView: 'pain',
@@ -21,22 +20,15 @@ export default class InfoSymptom extends Component {
       TemperatureEditView: 'temperature'
     }
     const currentSymptom = symptomMapping[symptomView]
-    const currentSymptomText = labels.symptomInfo[currentSymptom]
-    const currentSymptomTitle = labels.symptomTitle[currentSymptom]
+
     return (
       <ScrollView>
-        <View style={[styles.textWrappingView]}>
-          <AppText style={styles.title}>
-            {currentSymptomTitle}
-          </AppText>
-          <AppText style={styles.paragraph}>
-            {currentSymptomText}
-            {labels.symptomTitle.currentSymptomTitle}
-          </AppText>
-          <AppText style={styles.paragraph}>
-            {labels.symptomInfo.currentSymptomText}
-          </AppText>
-        </View>
+        <FramedSegment
+          style={styles.framedSegmentLast}
+          title={labels[currentSymptom].title}
+        >
+          <AppText>{labels[currentSymptom].text}</AppText>
+        </FramedSegment>
       </ScrollView>
     )
   }

components/framed-segment.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View } from 'react-native'
+import AppText from './app-text'
+import styles from '../styles'
+
+const FramedSegment = ({ children, ...props }) => {
+  const style = [styles.framedSegment, props.style]
+  if (props.last) style.push(styles.framedSegmentLast)
+  return (
+    <View style={[style]}>
+      {
+        props.title
+        && <AppText style={styles.framedSegmentTitle}>{props.title}</AppText>
+      }
+      {children}
+    </View>
+  )
+}
+
+FramedSegment.propTypes = {
+  title: PropTypes.string
+}
+
+export default FramedSegment

components/license.js

@@ -11,7 +11,7 @@ const labels = settingsLabels.license
 export default function License({setLicense}) {
   return (
     <ScrollView style={styles.licensePage}>
-      <AppText style={styles.settingsSegmentTitle}>{labels.title}</AppText>
+      <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
       <AppText>{labels.text}</AppText>
       <View style={styles.licenseButtons}>
         <Button

components/settings/about.js

@@ -1,29 +1,29 @@
 import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
 import AppText from '../app-text'
-import SettingsSegment from './shared/settings-segment'
 import labels from '../../i18n/en/settings'
 import links from '../../i18n/en/links'
+import FramedSegment from '../framed-segment'
 
 export default class AboutSection extends Component {
   render() {
     return (
       <ScrollView>
-        <SettingsSegment title={labels.aboutSection.title}>
+        <FramedSegment title={labels.aboutSection.title}>
           <AppText>{labels.aboutSection.text}</AppText>
-        </SettingsSegment>
-        <SettingsSegment title={labels.philosophy.title}>
+        </FramedSegment>
+        <FramedSegment title={labels.philosophy.title}>
           <AppText>{labels.philosophy.text}</AppText>
-        </SettingsSegment>
-        <SettingsSegment title={labels.credits.title}>
+        </FramedSegment>
+        <FramedSegment title={labels.credits.title}>
           <AppText>{labels.credits.note}</AppText>
-        </SettingsSegment>
-        <SettingsSegment title={labels.website.title}>
+        </FramedSegment>
+        <FramedSegment title={labels.website.title}>
           <AppText>{links.website.url}</AppText>
-        </SettingsSegment>
-        <SettingsSegment title={labels.version.title} last>
+        </FramedSegment>
+        <FramedSegment title={labels.version.title} last>
           <AppText>{require('../../package.json').version}</AppText>
-        </SettingsSegment>
+        </FramedSegment>
       </ScrollView>
     )
   }

components/settings/data-management/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ScrollView } from 'react-native'
 import AppText from '../../app-text'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
 import SettingsButton from '../shared/settings-button'
 import openImportDialogAndImport from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
@@ -11,27 +11,27 @@ import labels from '../../../i18n/en/settings'
 const DataManagement = () => {
   return (
     <ScrollView>
-      <SettingsSegment title={labels.export.button}>
+      <FramedSegment title={labels.export.button}>
         <AppText>{labels.export.segmentExplainer}</AppText>
         <SettingsButton onPress={openShareDialogAndExport}>
           {labels.export.button}
         </SettingsButton>
-      </SettingsSegment>
-      <SettingsSegment title={labels.import.button}>
+      </FramedSegment>
+      <FramedSegment title={labels.import.button}>
         <AppText>{labels.import.segmentExplainer}</AppText>
         <SettingsButton onPress={openImportDialogAndImport}>
           {labels.import.button}
         </SettingsButton>
-      </SettingsSegment>
-      <SettingsSegment
+      </FramedSegment>
+      <FramedSegment
         title={labels.deleteSegment.title}
         last
       >
         <AppText>{labels.deleteSegment.explainer}</AppText>
         <DeleteData />
-      </SettingsSegment>
+      </FramedSegment>
     </ScrollView>
   )
 }
 
-export default DataManagement
+export default DataManagement

components/settings/license.js

@@ -8,8 +8,8 @@ export default class License extends Component {
   render() {
     return (
       <ScrollView>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>{`${labels.license.title} `}</AppText>
+        <View style={styles.framedSegment}>
+          <AppText style={styles.framedSegmentTitle}>{`${labels.license.title} `}</AppText>
           <AppText>{`${labels.license.text} `}</AppText>
         </View>
       </ScrollView>

components/settings/nfp-settings/index.js

@@ -5,7 +5,7 @@ import {
 import styles, { iconStyles } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import AppText from '../../app-text'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
 import TempSlider from './temp-slider'
 import UseCervixSetting from './use-cervix'
 import Icon from 'react-native-vector-icons/Entypo'
@@ -19,21 +19,22 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
-        <SettingsSegment title={labels.useCervix.title}>
+        <FramedSegment title={labels.useCervix.title}>
           <UseCervixSetting/>
-        </SettingsSegment>
-        <SettingsSegment title={labels.tempScale.segmentTitle}>
+        </FramedSegment>
+        <FramedSegment title={labels.tempScale.segmentTitle}>
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
-        </SettingsSegment>
-        <SettingsSegment style={styles.settingsSegmentLast} >
+        </FramedSegment>
+        <FramedSegment style={styles.framedSegmentLast} >
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
             <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
-            <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
+            <AppText style={styles.framedSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
           </View>
           <AppText>{labels.preOvu.note}</AppText>
-        </SettingsSegment>
+          <AppText>{labels.preOvu.note}</AppText>
+        </FramedSegment>
       </ScrollView>
     )
   }
-}
+}

components/settings/password/index.js

@@ -3,7 +3,7 @@ import { ScrollView } from 'react-native'
 import CreatePassword from './create'
 import ChangePassword from './update'
 import DeletePassword from './delete'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
 import AppText from '../../app-text'
 import {
   hasEncryptionObservable
@@ -44,7 +44,7 @@ export default class PasswordSetting extends Component {
 
     return (
       <ScrollView>
-        <SettingsSegment title={title}>
+        <FramedSegment title={title}>
           <AppText>
             { isPasswordSet ? explainerEnabled : explainerDisabled }
           </AppText>
@@ -62,8 +62,8 @@ export default class PasswordSetting extends Component {
               onStartDeletingPassword = {this.onDeletingPassword}
             />
           )}
-        </SettingsSegment>
+        </FramedSegment>
       </ScrollView>
     )
   }
-}
+}

components/settings/reminders/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {
   ScrollView,
 } from 'react-native'
-import SettingsSegment from '../shared/settings-segment'
+import FramedSegment from '../../framed-segment'
 import TempReminderPicker from './temp-reminder-picker'
 import PeriodReminderPicker from './period-reminder'
 
@@ -17,12 +17,12 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
-        <SettingsSegment title={labels.tempReminder.title}>
+        <FramedSegment title={labels.tempReminder.title}>
           <TempReminderPicker/>
-        </SettingsSegment>
-        <SettingsSegment title={labels.periodReminder.title}>
+        </FramedSegment>
+        <FramedSegment title={labels.periodReminder.title}>
           <PeriodReminderPicker/>
-        </SettingsSegment>
+        </FramedSegment>
       </ScrollView>
     )
   }

components/settings/settings-menu.js

@@ -28,11 +28,11 @@ export default function SettingsMenu(props) {
   function menuItem(item) {
     return (
       <TouchableOpacity
-        style={styles.settingsSegment}
+        style={styles.framedSegment}
         key={item.title}
         onPress={() => props.navigate(item.component)}
       >
-        <AppText>{item.title}</AppText>
+        <AppText>{item.title.toLowerCase()}</AppText>
       </TouchableOpacity>
     )
   }

components/settings/shared/settings-segment.js

@@ -1,26 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { View } from 'react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
-
-const SettingsSegment = ({ children, ...props }) => {
-  const style = [styles.settingsSegment, props.style]
-  if (props.last) style.push(styles.settingsSegmentLast)
-  return (
-    <View style={[styles.settingsSegment, props.style]}>
-      {
-        props.title
-        && <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
-      }
-      {children}
-    </View>
-  )
-}
-
-SettingsSegment.propTypes = {
-  title: PropTypes.string
-}
-
-export default SettingsSegment