diff --git a/components/app.js b/components/app.js
index 39318f37460e06e93a1bd612ae4dfacb249a0c3f..36757417d6eefaa63888886ca78dd285fb887802 100644
--- a/components/app.js
+++ b/components/app.js
@@ -11,6 +11,7 @@ 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
@@ -50,7 +51,9 @@ export default class App extends Component {
if (isMenuItem(this.state.currentPage)) {
this.menuOrigin = this.state.currentPage
}
- this.originForSymptomView = this.state.currentPage
+ if (this.state.currentPage !== 'InfoSymptom') {
+ this.originForSymptomView = this.state.currentPage
+ }
this.setState({currentPage: pageName, currentProps: props})
}
@@ -62,30 +65,53 @@ export default class App extends Component {
)
} else if (isSettingsView(this.state.currentPage)) {
this.navigate('SettingsMenu')
- } else if(this.state.currentPage === 'CycleDay') {
+ } else if (this.state.currentPage === 'CycleDay') {
this.navigate(this.menuOrigin)
+ } else if (this.state.currentPage === 'InfoSymptom') {
+ this.navigate(
+ this.originForSymptomView, { date: this.state.currentProps.date }
+ )
} else {
this.navigate('Home')
}
return true
}
+ isDefaultView() {
+ return this.state.currentPage !== 'CycleDay' &&
+ !isSymptomView(this.state.currentPage) &&
+ this.state.currentPage !== 'InfoSymptom'
+ }
+
render() {
const page = {
- Home, Calendar, CycleDay, Chart, SettingsMenu, ...settingsViews, Stats, ...symptomViews
+ Home, Calendar, CycleDay, Chart, InfoSymptom,
+ SettingsMenu, ...settingsViews, Stats, ...symptomViews
}[this.state.currentPage]
return (
<View style={{flex: 1}}>
- {this.state.currentPage != 'CycleDay' && !isSymptomView(this.state.currentPage) &&
+ {this.isDefaultView() &&
<Header
title={headerTitlesLowerCase[this.state.currentPage]}
- />}
+ />
+ }
+ {this.state.currentPage === 'InfoSymptom' &&
+ <Header
+ title={headerTitlesLowerCase[this.state.currentPage]}
+ goBack={this.handleBackButtonPress}
+ />
+ }
{isSymptomView(this.state.currentPage) &&
<Header
title={headerTitlesLowerCase[this.state.currentPage]}
isSymptomView={true}
goBack={this.handleBackButtonPress}
date={this.state.currentProps.date}
+ goToSymptomInfo={() => this.navigate('InfoSymptom', {
+ date: this.state.currentProps.date,
+ symptomView: this.state.currentPage,
+ cycleDay: this.state.currentProps.cycleDay
+ })}
/>}
diff --git a/components/cycle-day/symptoms/info-symptom.js b/components/cycle-day/symptoms/info-symptom.js
new file mode 100644
index 0000000000000000000000000000000000000000..dc8f36541cbbff71a1fb9c60e433f53544e5eb11
--- /dev/null
+++ b/components/cycle-day/symptoms/info-symptom.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {
+ View,
+ ScrollView
+} from 'react-native'
+import styles from '../../../styles'
+import AppText from '../../app-text'
+import * as labels from '../../../i18n/en/symptom-info.js'
+
+export default class InfoSymptom extends Component {
+ render() {
+ const symptomView = this.props.symptomView
+ const symptomMapping = {
+ BleedingEditView: 'bleeding',
+ CervixEditView: 'cervix',
+ DesireEditView: 'desire',
+ MucusEditView: 'mucus',
+ NoteEditView: 'note',
+ PainEditView: 'pain',
+ SexEditView: 'sex',
+ 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>
+ </ScrollView>
+ )
+ }
+}
diff --git a/components/header/default.js b/components/header/default.js
new file mode 100644
index 0000000000000000000000000000000000000000..8729c25c99e26ce0331c182b41063de7adfc97f1
--- /dev/null
+++ b/components/header/default.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+ View,
+ Text} from 'react-native'
+import styles from '../../styles'
+
+export default function DefaultHeader(props) {
+ return (
+ <View style={styles.header}>
+ <View style={styles.accentCircle} />
+ <Text style={styles.headerText}>
+ {props.title}
+ </Text>
+ </View >
+ )
+}
diff --git a/components/header/index.js b/components/header/index.js
index c935f6e5e8743282799408b5d0cb1eaba3612f71..5adba3ba5edf84b508cdfe6be279d6178e132dc2 100644
--- a/components/header/index.js
+++ b/components/header/index.js
@@ -1,27 +1,24 @@
import React from 'react'
-import {
- View,
- Text,
- Dimensions
-} from 'react-native'
-import styles from '../../styles'
+import { Dimensions } from 'react-native'
import CycleDayHeader from './cycle-day'
+import DefaultHeader from './default'
+import InfoSymptomHeader from './info-symptom'
import SymptomViewHeader from './symptom-view'
export default function Header(p) {
const middle = Dimensions.get('window').width / 2
const props = Object.assign({}, p, {middle})
- return (
- props.isCycleDayOverView ?
- <CycleDayHeader {...props} />
- : props.isSymptomView ?
- <SymptomViewHeader {...props}/>
- :
- <View style={styles.header}>
- <View style={styles.accentCircle} />
- <Text style={styles.headerText}>
- {props.title}
- </Text>
- </View >
- )
-}
\ No newline at end of file
+
+ if (props.isCycleDayOverView) {
+ return (<CycleDayHeader {...props} />)
+ }
+ else if (props.isSymptomView) {
+ return (<SymptomViewHeader {...props} />)
+ }
+ else if (props.title === 'info') {
+ return (<InfoSymptomHeader {...props} />)
+ }
+ else {
+ return (<DefaultHeader {...props} />)
+ }
+}
diff --git a/components/header/info-symptom.js b/components/header/info-symptom.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a0d4909dfec6a078b30b42a85732d46607672d0
--- /dev/null
+++ b/components/header/info-symptom.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import {
+ Text,
+ TouchableOpacity,
+ View
+} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import NavigationArrow from './navigation-arrow'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function InfoSymptomHeader(props) {
+ return (
+ <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
+ <View
+ style={styles.accentCircle}
+ left={props.middle - styles.accentCircle.width / 2}
+ />
+ <NavigationArrow direction='left' {...props}/>
+ <View>
+ <Text style={styles.headerText}>
+ {props.title}
+ </Text>
+ </View>
+ <TouchableOpacity style={styles.hiddenIcon}>
+ <Icon
+ name={'chevron-thin-right'}
+ {...iconStyles.hiddenIcon}
+ />
+ </TouchableOpacity>
+ </View>
+ )
+}
diff --git a/components/header/symptom-view.js b/components/header/symptom-view.js
index 20817767aa12f10dc784f098fe2141fc63b4ca2d..0b4e6d1d27be5bba26399434c2215757d739b716 100644
--- a/components/header/symptom-view.js
+++ b/components/header/symptom-view.js
@@ -1,7 +1,9 @@
import React from 'react'
import {
View,
- Text} from 'react-native'
+ Text,
+ TouchableOpacity
+} from 'react-native'
import styles, { iconStyles } from '../../styles'
import FeatherIcon from 'react-native-vector-icons/Feather'
import NavigationArrow from './navigation-arrow'
@@ -26,11 +28,17 @@ export default function SymptomViewHeader(props) {
{formatDate(props.date)}
</Text>
</View >
- <FeatherIcon
- name='info'
- style={styles.symptomInfoIcon}
- {...iconStyles.symptomHeaderIcons}
- />
+ <TouchableOpacity
+ onPress={() => props.goToSymptomInfo()}
+ style={styles.infoButton}
+ >
+ <FeatherIcon
+ name="info"
+ style={styles.symptomInfoIcon}
+ {...iconStyles.symptomHeaderIcons}
+ />
+ </TouchableOpacity>
+
</View>
)
}
diff --git a/i18n/en/labels.js b/i18n/en/labels.js
index 208c75aa64d105c676d4de82047acac780adbabf..9f0641201fa6d7d1c38cfdab8da7e9b125c6e7ea 100644
--- a/i18n/en/labels.js
+++ b/i18n/en/labels.js
@@ -39,7 +39,8 @@ export const headerTitles = {
NoteEditView: 'Note',
DesireEditView: 'Desire',
SexEditView: 'Sex',
- PainEditView: 'Pain'
+ PainEditView: 'Pain',
+ InfoSymptom: 'Info'
}
export const menuTitles = {
diff --git a/i18n/en/symptom-info.js b/i18n/en/symptom-info.js
new file mode 100644
index 0000000000000000000000000000000000000000..c932747d67d1e2c71e931e8993d14bf9c5a42b83
--- /dev/null
+++ b/i18n/en/symptom-info.js
@@ -0,0 +1,42 @@
+export const symptomInfo = {
+ bleeding: `Tracking menstrual bleeding allows you to know the beginning and the end of a menstrual cycle.
+
+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.
+
+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.
+
+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.
+
+Tracking how open and how firm the cervix feels like can help determine in which phase of a 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.
+
+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.`,
+ 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.
+
+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.
+
+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"
+}
diff --git a/styles/index.js b/styles/index.js
index 08487b2725f6c7a147f6ceb1c1bbddba1949eb15..8df502c367c542715acc9ee7aa0fbfd1073dbaa0 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -229,6 +229,9 @@ export default StyleSheet.create({
navigationArrow: {
padding: 20
},
+ hiddenIcon: {
+ padding: 20
+ },
menu: {
backgroundColor: primaryColor,
alignItems: 'center',
@@ -402,6 +405,9 @@ export default StyleSheet.create({
marginTop: 20,
color: 'grey'
},
+ infoButton: {
+ paddingVertical: 20
+ },
licensePage: {
paddingVertical: 20,
paddingHorizontal: 10
@@ -442,5 +448,9 @@ export const iconStyles = {
infoInHeading: {
marginRight: 5,
color: 'black'
+ },
+ hiddenIcon: {
+ size: 20,
+ display: 'none'
}
}