Merge branch '127-extract-text-of-titles-and-subtitles-for-translation-and-or-modification' into 'master'

Resolve "Extract text of titles and subtitles for translation and/or modification."

Closes #127

See merge request bloodyhealth/drip!152

components/cycle-day/symptoms/bleeding.js

@@ -6,7 +6,7 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { bleeding as labels } from '../../../i18n/en/cycle-day'
+import { bleeding } from '../../../i18n/en/cycle-day'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
@@ -25,17 +25,17 @@ export default class Bleeding extends Component {
 
   render() {
     const bleedingRadioProps = [
-      { label: labels[0], value: 0 },
-      { label: labels[1], value: 1 },
-      { label: labels[2], value: 2 },
-      { label: labels[3], value: 3 },
+      { label: bleeding.labels[0], value: 0 },
+      { label: bleeding.labels[1], value: 1 },
+      { label: bleeding.labels[2], value: 2 },
+      { label: bleeding.labels[3], value: 3 },
     ]
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <SymptomSection
-            header="Heaviness"
-            explainer="How heavy is the bleeding?"
+            header={bleeding.heaviness.header}
+            explainer={bleeding.heaviness.explainer}
           >
             <SelectTabGroup
               buttons={bleedingRadioProps}
@@ -44,8 +44,8 @@ export default class Bleeding extends Component {
             />
           </SymptomSection>
           <SymptomSection
-            header="Exclude"
-            explainer="You can exclude this value if it's not menstrual bleeding"
+            header={bleeding.exclude.header}
+            explainer={bleeding.exclude.explainer}
             inline={true}
           >
             <Switch

components/cycle-day/symptoms/note.js

@@ -10,6 +10,7 @@ import { saveSymptom } from '../../../db'
 import ActionButtonFooter from './action-button-footer'
 import SymptomSection from './symptom-section'
 import { noteExplainer } from '../../../i18n/en/cycle-day'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
 
 export default class Note extends Component {
   constructor(props) {
@@ -33,7 +34,7 @@ export default class Note extends Component {
             <TextInput
               autoFocus={!this.state.currentValue}
               multiline={true}
-              placeholder="Enter"
+              placeholder={sharedLabels.enter}
               onChangeText={(val) => {
                 this.setState({ currentValue: val })
               }}

components/cycle-day/symptoms/pain.js

@@ -6,6 +6,7 @@ import {
 } from 'react-native'
 import { saveSymptom } from '../../../db'
 import { pain as labels } from '../../../i18n/en/cycle-day'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
@@ -49,7 +50,7 @@ export default class Pain extends Component {
               <TextInput
                 autoFocus={this.state.focusTextArea}
                 multiline={true}
-                placeholder="Enter"
+                placeholder={sharedLabels.enter}
                 value={this.state.note}
                 onChangeText={(val) => {
                   this.setState({note: val})

components/cycle-day/symptoms/sex.js

@@ -6,7 +6,8 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { sex as sexLabels, contraceptives as cLabels } from '../../../i18n/en/cycle-day'
+import { sex as sexLabels, contraceptives as contraceptivesLabels } from '../../../i18n/en/cycle-day'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
@@ -38,7 +39,7 @@ export default class Sex extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <SymptomSection
-            header="Activity"
+            header={sexLabels.header}
             explainer={sexLabels.explainer}
           >
             <SelectBoxGroup
@@ -48,11 +49,11 @@ export default class Sex extends Component {
             />
           </SymptomSection>
           <SymptomSection
-            header="Contraceptives"
-            explainer={cLabels.explainer}
+            header={contraceptivesLabels.header}
+            explainer={contraceptivesLabels.explainer}
           >
             <SelectBoxGroup
-              labels={cLabels.categories}
+              labels={contraceptivesLabels.categories}
               onSelect={this.toggleState}
               optionsState={this.state}
             />
@@ -62,7 +63,7 @@ export default class Sex extends Component {
             <TextInput
               autoFocus={this.state.focusTextArea}
               multiline={true}
-              placeholder="Enter"
+              placeholder={sharedLabels.enter}
               value={this.state.note}
               onChangeText={(val) => {
                 this.setState({ note: val })

components/cycle-day/symptoms/temperature.js

@@ -15,7 +15,7 @@ import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
 import { temperature as labels } from '../../../i18n/en/cycle-day'
 import { scaleObservable } from '../../../local-storage'
-import { shared } from '../../../i18n/en/labels'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
 import ActionButtonFooter from './action-button-footer'
 import config from '../../../config'
 import SymptomSection from './symptom-section'
@@ -81,11 +81,11 @@ export default class Temp extends Component {
 
     if (warningMsg) {
       Alert.alert(
-        shared.warning,
+        sharedLabels.warning,
         warningMsg,
         [
-          { text: shared.cancel },
-          { text: shared.save, onPress: this.saveTemperature}
+          { text: sharedLabels.cancel },
+          { text: sharedLabels.save, onPress: this.saveTemperature}
         ]
       )
     } else {
@@ -101,7 +101,7 @@ export default class Temp extends Component {
         <ScrollView style={styles.page}>
           <View>
             <SymptomSection
-              header="Temperature (°C)"
+              header={labels.temperature.header}
               explainer={labels.temperature.explainer}
               inline={true}
             >
@@ -112,7 +112,7 @@ export default class Temp extends Component {
               />
             </SymptomSection>
             <SymptomSection
-              header="Time"
+              header={labels.time}
               inline={true}
             >
               <TextInput
@@ -136,13 +136,13 @@ export default class Temp extends Component {
               />
             </SymptomSection>
             <SymptomSection
-              header="Note"
+              header={labels.note.header}
               explainer={labels.note.explainer}
             >
               <TextInput
                 multiline={true}
                 autoFocus={this.state.focusTextArea}
-                placeholder="Enter"
+                placeholder={sharedLabels.enter}
                 value={this.state.note}
                 onChangeText={(val) => {
                   this.setState({ note: val })
@@ -150,8 +150,8 @@ export default class Temp extends Component {
               />
             </SymptomSection>
             <SymptomSection
-              header="Exclude"
-              explainer={labels.excludeExplainer}
+              header={labels.exclude.header}
+              explainer={labels.exclude.explainer}
               inline={true}
             >
               <Switch

i18n/en/cycle-day.js

@@ -1,7 +1,18 @@
-export const bleeding = ['spotting', 'light', 'medium', 'heavy']
 export const mucusNFP = ['t', 'Ø', 'f', 'S', 'S+']
 export const intensity = ['low', 'medium', 'high']
 
+export const bleeding = {
+    labels: ['spotting', 'light', 'medium', 'heavy'],
+    heaviness: {
+        header: "Heaviness",
+        explainer: "How heavy is the bleeding?",
+    },
+    exclude: {
+        header: "Exclude",
+        explainer: "You can exclude this value if it's not menstrual bleeding"
+    }
+}
+
 export const cervix = {
   opening: {
     categories: ['closed', 'medium', 'open'],
@@ -39,6 +50,7 @@ export const sex = {
     solo: 'Solo',
     partner: 'Partner',
   },
+  header: "Activity",
   explainer: 'Were you sexually active today?',
 }
 
@@ -54,6 +66,7 @@ export const contraceptives = {
     none: 'None',
     other: 'Other',
   },
+  header: "Contraceptives",
   explainer: 'Did you use contraceptives?'
 }
 
@@ -76,12 +89,18 @@ export const temperature = {
   outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
   saveAnyway: 'Save anyway',
   temperature: {
+    header: "Temperature (°C)",
     explainer: 'Take your temperature right after waking up, before getting out of bed'
   },
+  time: "Time",
   note: {
+    header: "Note",
     explainer: 'Is there anything that could have influenced this value, such as bad sleep or alcohol consumption?'
   },
-  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
+  exclude: {
+    header: "Exclude",
+    explainer: "You can exclude this value if you don't want to use it for fertility detection"
+  }
 }
 
 export const noteExplainer = "Anything you want to add for the day?"

i18n/en/labels.js

@@ -16,7 +16,8 @@ export const shared = {
   cycleDayWithLinebreak: 'Cycle\nday',
   loading: 'Loading ...',
   more: 'more',
-  less: 'less'
+  less: 'less',
+  enter: 'Enter'
 }
 
 export const headerTitles = {