Merge branch '291-review-edit-fill-in-info-text-on-symptoms' into 'master'

Resolve "Review/edit/fill in info text on symptoms"

Closes #291

See merge request bloodyhealth/drip!167

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

 import React, { Component } from 'react'
-import {
-  View,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import { ScrollView } from 'react-native'
+import Hyperlink from 'react-native-hyperlink'
 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'
+import replace from '../../helpers/replace-url-with-text'
 
 export default class InfoSymptom extends Component {
   render() {
@@ -14,6 +14,7 @@ export default class InfoSymptom extends Component {
       BleedingEditView: 'bleeding',
       CervixEditView: 'cervix',
       DesireEditView: 'desire',
+      MoodEditView: 'mood',
       MucusEditView: 'mucus',
       NoteEditView: 'note',
       PainEditView: 'pain',
@@ -21,22 +22,17 @@ 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}
+        >
+          <Hyperlink linkStyle={styles.link} linkText={replace} linkDefault>
+            <AppText>{labels[currentSymptom].text}</AppText>
+          </Hyperlink>
+        </FramedSegment>
       </ScrollView>
     )
   }

components/settings/shared/settings-segment.js → components/framed-segment.js

@@ -2,25 +2,25 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { View } from 'react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
+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)
+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.settingsSegmentTitle}>{props.title}</AppText>
+        && <AppText style={styles.framedSegmentTitle}>{props.title}</AppText>
       }
       {children}
     </View>
   )
 }
 
-SettingsSegment.propTypes = {
+FramedSegment.propTypes = {
   title: PropTypes.string
 }
 
-export default SettingsSegment
+export default FramedSegment
\ No newline at end of file

components/license.js

@@ -14,7 +14,7 @@ export default function License({setLicense}) {
   return (
     <ScrollView style={styles.licensePage}>
       <Hyperlink linkStyle={styles.link} linkText={replace} linkDefault>
-        <AppText style={styles.settingsSegmentTitle}>{labels.title}</AppText>
+        <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
         <AppText>{labels.text}</AppText>
       </Hyperlink>
       <View style={styles.licenseButtons}>

components/settings/about.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
 import Hyperlink from 'react-native-hyperlink'
 import AppText from '../app-text'
-import SettingsSegment from './shared/settings-segment'
+import FramedSegment from '../framed-segment'
 import styles from '../../styles/index'
 import labels, { links } from '../../i18n/en/settings'
 import replace from '../helpers/replace-url-with-text'
@@ -11,25 +11,25 @@ export default class AboutSection extends Component {
   render() {
     return (
       <ScrollView>
-        <SettingsSegment title={labels.aboutSection.title}>
+        <FramedSegment title={labels.aboutSection.title}>
           <Hyperlink linkStyle={styles.link} linkText={replace} linkDefault>
             <AppText>{labels.aboutSection.text}</AppText>
           </Hyperlink>
-        </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}>
           <Hyperlink linkStyle={styles.link} linkDefault>
             <AppText>{links.website.url}</AppText>
           </Hyperlink>
-        </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

 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
\ No newline at end of file

components/settings/license.js

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

components/settings/nfp-settings/index.js

@@ -6,7 +6,7 @@ import Hyperlink from 'react-native-hyperlink'
 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'
@@ -21,23 +21,23 @@ 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>
           <Hyperlink linkStyle={styles.link} linkText={replaceUrlWithText} linkDefault>
             <AppText>{labels.preOvu.note}</AppText>
           </Hyperlink>
-        </SettingsSegment>
+        </FramedSegment>
       </ScrollView>
     )
   }
-}
+}
\ No newline at end of file

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>
     )
   }
-}
+}
\ No newline at end of file

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,7 +28,7 @@ export default function SettingsMenu(props) {
   function menuItem(item) {
     return (
       <TouchableOpacity
-        style={styles.settingsSegment}
+        style={styles.framedSegment}
         key={item.title}
         onPress={() => props.navigate(item.component)}
       >

i18n/en/settings.js

@@ -9,7 +9,7 @@ export const links = {
     text: 'email'
   },
   wiki: {
-    url: 'https://gitlab.com/bloodyhealth/drip/wikis/home',
+    url: 'https://gitlab.com/bloodyhealth/drip/wikis/',
     text: 'wiki'
   },
   website: {

i18n/en/symptom-info.js

-export const symptomInfo = {
-  bleeding: `Tracking menstrual bleeding allows you to know the beginning and the end of a menstrual cycle.
+import {links} from './settings'
 
-After a while of tracking it you will get an overview of how long your cycles last on average, whether the length of your last cycles vary a lot and how many days of menstrual bleeding you usually experience.
+export const generalInfo = {
+  chartNfp: `On the chart, you can track fertility signs. When both a valid temperature shift and a mucus or cervix shift have been detected, an orange line will be displayed on the chart. This indicates the end of the peri-ovulatory and the beginning of the post-ovulatory phase.`,
+  curiousNfp: `If you are curious to learn more about the sympto-thermal method that is used for fertility tracking within the app, you can visit our ${links.wiki.url}.`,
+  cycleRelation: `It may be influenced by or have an impact on your menstrual cycles and its hormonal changes.`,
+  excludeExplainer: `You can exclude these values, so they won't be taken into account for any fertility calculation.`,
+  nfpTfyReminder: `Drip makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: "Does this make sense?" Remember, you don't need an app to understand your cycle! However, drip wants to support you and make period tracking easier, more transparent and secure.
 
-The app allows you to track different intensity of bleeding: spotting, light, medium and heavy. Every bleeding value that is not excluded is taken into account for fertility calculation and prediction for the start of next cycles.
+Please find more info on the sympto-thermal method in our ${links.wiki.url}.`,
+  noNfpSymptom: `The app allows you to track this symptom for your mere information, it is not taken into account for any calculation. On the chart you can check how often you track this symptom.`
+}
+
+export default {
+  bleeding: {
+    title: `Tracking menstrual bleeding`,
+    text: `Tracking menstrual bleeding allows you to know the beginning and the end of a menstrual cycle.
+
+After tracking at least 3 menstrual cycles, drip will give you an overview of
+· how long your cycles last on average (in "stats"),
+· whether the length of your last cycles vary a lot (in "stats" and in bleeding predictions)
+· and predict your next 3 cycles with a range of 3 or 5 days (on home screen and "calendar").
+
+The app allows you to track different intensities of bleeding. On the chart and on the calendar, bleeding values are colored in different shades of red. The darker, the more intense your bleeding. Every bleeding value that is not excluded is taken into account for fertility calculation and prediction for the start of next cycles.
+
+Excluding bleeding values is for tracking bleeding when it's not marking the start of a new cycle or the continuation of menstrual bleeding the day(s) before, e.g. bleeding caused by ovulation or a miscarriage.
+
+When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
+
+${generalInfo.nfpTfyReminder}`,
+  },
+  cervix:  {
+    title: `Tracking your cervix`,
+    text: `The cervix is located inside of the body at the end of the vaginal canal, between the vagina and the uterus.
+
+Tracking how open or closed and how firm or soft the cervix feels can help determine in which phase of the menstrual cycle you are.
+
+By default, the secondary symptom the app uses for NFP evaluation is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings". When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
+
+· How to identify a fertile cervix?
+When your cervix is rather open and feels soft like your earlobes, in contrast to an infertile cervix that feels rather closed and hard, like the tip of your nose. If the cervix feels anything but closed and hard, drip takes it as a sign of fertility. On the chart, a fertile cervix is colored in dark yellow, and infertile cervix is colored in light yellow.
+
+${generalInfo.chartNfp}
+
+${generalInfo.excludeExplainer}
+
+${generalInfo.nfpTfyReminder}`
+  },
+  desire:  {
+    title: 'Tracking sexual desire',
+    text: `The app allows you to track sexual desire independently from sexual activity.
+
+${generalInfo.cycleRelation}
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+  },
+  mood:  {
+    title: 'Tracking mood',
+    text: `The app allows you to track your mood.
+
+${generalInfo.cycleRelation}
 
-Excluding bleeding values is for tracking bleeding when it's not marking the start of a new cycle or the continuation of menstrual bleeding the day(s) before,
-e.g. bleeding caused by miscarriage or ovulation.`,
-  cervix: `The cervix is located inside the body at the end of the vaginal canal, between the vagina and the uterus.
+${generalInfo.noNfpSymptom}
 
-Tracking how open and how firm the cervix feels like can help determine in which phase of a menstrual cycle you are.
+${generalInfo.curiousNfp}`
+  },
+  mucus:  {
+    title: 'Tracking cervical mucus',
+    text: `Cervical mucus can help determine in which phase of the menstrual cycle you are.
 
-When you track your cervix as a secondary symptom in addition to tracking your basal body temperature, the app helps you identify in which phase of your cycle you are.`,
-  desire: `Sexual desire can be influenced by the menstrual cycle and its hormonal changes. The app allows you to track the intensity of your sexual desire for your mere information, it is not taken into account for any calculation.`,
-  mucus: `Cervical mucus can help determine in which phase of the menstrual cycle you are.
+By default the secondary symptom the app uses for NFP evaluation is cervical mucus. When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
 
-When you track your cervical mucus as a secondary symptom in addition to tracking your basal body temperature, the app helps you identify in which phase of your cycle you are.
+· How to identify fertile cervical mucus?
+Tracking the feeling and the texture of your cervical mucus on a daily basis helps you identify changes of the quality of the cervical mucus. The values you enter for both feeling and texture of your cervical mucus are combined by drip into one of five NFP-conforming values, from least to most fertile:
+· t (= dry feeling + no texture),
+· ∅ (= no feeling + no texture),
+· f (= wet feeling + no texture),
+· S (= no OR wet feeling + creamy texture),
+· and S+ (= any feeling + egg white texture OR slippery feeling + any texture).
 
-The values you enter for both feeling and texture of your cervical mucus are combined by drip into one of five NFP-conforming values, from least to most fertile:  t, ∅, f, S, and S+. Please note that drip does not yet support "parenthesis values": According to NFP rules,  you can qualify a mucus value by putting parentheses around it, to indicate that it doesn't fully meet the descriptors of one of the five categories, and instead is in between. This functionality will be supported in the future.
-`,
-  note: `Note allows you to track any extra information you want to save here.`,
-  pain: `Keep track of different kinds of pain you experience. They may be influenced by or have an impact on your menstrual cycles.`,
-  sex: `Did you know that having an orgasm can help release cramps?`,
-  temperature: `One of the body signs you need to track for knowing your fertility status is your body basal temperature. The body temperature changes over the course of a menstrual cycle, it rises after ovulation.
+On the chart, fertile mucus is colored in dark blue, and infertile mucus values are colored in lighter shades of blue.
 
-What is body basal temperature?
-It's your temperature after laying still for at least 6 hours. For many this is when they are waking up in the morning after sleeping at least 6 hours and before getting up.
+Please note that drip does not yet support "parenthesis values": According to NFP rules,  you can qualify a mucus value by putting parentheses around it, to indicate that it doesn't fully meet the descriptors of one of the five categories, and instead is in between. This functionality will be supported in the future.
 
-Which thermometer to use?
+${generalInfo.chartNfp}
+
+${generalInfo.excludeExplainer}
+
+${generalInfo.nfpTfyReminder}`
+  },
+  note:  {
+    title: 'Notes',
+    text: `Note allows you to track any extra information you want to save here. It is the only category that can store information for a date in the future. This can be helpful e.g. for reminding you of an appointment.
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+  },
+  pain:  {
+    title: 'Tracking pain',
+    text: `The app allows you to keep track of different kinds of pain you experience.
+
+${generalInfo.cycleRelation}
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+  },
+  sex:  {
+    title: 'Tracking sex and contraceptives',
+    text: `The app allows you to track sex independently from sexual desire. You can differentiate between masturbation and sex with a partner/partners. Here you can also track your contraceptive method(s). Only sexual activity will be shown in the "chart" section, lighter purple indicating solo sex and darker purple partner sex. Did you know that having an orgasm can help release cramps?
+
+${generalInfo.noNfpSymptom}
+
+${generalInfo.curiousNfp}`
+  },
+  temperature:  {
+    title: 'Tracking body basal temperature',
+    text: `One of the body signs you need to track for knowing your fertility status is your body basal temperature. The body temperature changes over the course of a menstrual cycle, it rises after ovulation.
+
+By default the secondary symptom is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings". When - on a daily/regular basis - you track:
+1. your basal body temperature,
+2. your cervical mucus OR your cervix,
+3. and menstrual bleeding
+the app helps you identify in which phase of your cycle you are.
+
+· What is body basal temperature?
+It's your temperature after lying still for at least 6 hours. For many, this is when they are waking up in the morning after sleeping at least 6 hours and before getting up.
+
+· Which thermometer to use?
 The thermometer must indicate 2 decimal places.
 
-How to measure?
-You can either measure rectally, vaginally or orally. If you chose rectal or vaginal measurement you need to measure for at least 3 minutes long. If you chose oral measurement you want to measure for at least 5 minutes long. Pick one way and stick to it.`
-}
-export const symptomTitle = {
-  bleeding: "Tracking menstrual bleeding",
-  cervix: "Tracking your cervix",
-  desire: "Tracking sexual desire",
-  mucus: "Tracking cervixal mucus",
-  note: "Notes",
-  pain: "Tracking pain",
-  sex: "Tracking sex and contraceptives",
-  temperature: "Tracking body basal temperature"
+· How to measure?
+You can either measure rectally, vaginally or orally. If you chose rectal or vaginal measurement, you need to measure for at least 3 minutes. If you chose oral measurement, you should measure for at least 5 minutes. Pick one way and stick to it.
+
+${generalInfo.chartNfp}
+
+${generalInfo.excludeExplainer}
+
+${generalInfo.nfpTfyReminder}`
+  },
 }

styles/index.js

@@ -268,7 +268,7 @@ export default StyleSheet.create({
   symptomEditButton: {
     width: 130
   },
-  settingsSegment: {
+  framedSegment: {
     borderColor: secondaryColor,
     borderStyle: 'solid',
     borderWidth: 1,
@@ -278,10 +278,10 @@ export default StyleSheet.create({
     padding: 7,
     fontFamily: textFont
   },
-  settingsSegmentLast: {
+  framedSegmentLast: {
     marginBottom: defaultTopMargin,
   },
-  settingsSegmentTitle: {
+  framedSegmentTitle: {
     fontWeight: 'bold',
     fontFamily: textFontBold
   },