Skip to content
Snippets Groups Projects
Commit a604482f authored by Julia Friesel's avatar Julia Friesel
Browse files

Merge branch '178-add-hints-for-required-selections' into 'master'

Resolve "Change symptom category descriptions to make clear which are required (for mucus and cervix) for fertility detection"

Closes #178

See merge request bloodyhealth/drip!153
parents 896ae726 42847a8c
No related branches found
No related tags found
No related merge requests found
......@@ -21,6 +21,19 @@ export function AppTextLight(props) {
)
}
export function ActionHint(props) {
if(props.isVisible) {
return (
<AppText
style={[styles.actionHint, props.style]}>
{props.children}
</AppText>
)
} else {
return null
}
}
export function SymptomSectionHeader(props) {
return (
<AppText style={styles.symptomViewHeading}>
......
......@@ -10,6 +10,7 @@ import { cervix as labels } from '../../../i18n/en/cycle-day'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
import { ActionHint } from '../../app-text'
export default class Cervix extends Component {
constructor(props) {
......@@ -35,6 +36,7 @@ export default class Cervix extends Component {
{ label: labels.position.categories[1], value: 1 },
{ label: labels.position.categories[2], value: 2 }
]
const mandatoryNotCompletedYet = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
......@@ -81,6 +83,7 @@ export default class Cervix extends Component {
/>
</SymptomSection>
</ScrollView>
<ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
<ActionButtonFooter
symptom='cervix'
date={this.props.date}
......@@ -93,7 +96,7 @@ export default class Cervix extends Component {
exclude: Boolean(this.state.exclude)
})
}}
saveDisabled={typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'}
saveDisabled={mandatoryNotCompletedYet}
navigate={this.props.navigate}
/>
</View>
......
......@@ -11,7 +11,7 @@ import computeNfpValue from '../../../lib/nfp-mucus'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
import { ActionHint } from '../../app-text'
export default class Mucus extends Component {
constructor(props) {
......@@ -34,6 +34,7 @@ export default class Mucus extends Component {
{ label: labels.texture.categories[1], value: 1 },
{ label: labels.texture.categories[2], value: 2 }
]
const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
......@@ -70,6 +71,7 @@ export default class Mucus extends Component {
/>
</SymptomSection>
</ScrollView>
<ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
<ActionButtonFooter
symptom='mucus'
date={this.props.date}
......@@ -84,7 +86,7 @@ export default class Mucus extends Component {
exclude: Boolean(this.state.exclude)
})
}}
saveDisabled={typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'}
saveDisabled={mandatoryNotCompletedYet}
navigate={this.props.navigate}
/>
</View>
......
......@@ -25,7 +25,8 @@ export const cervix = {
position: {
categories: ['low', 'medium', 'high'],
explainer: 'How high up in the vagina is the cervix?'
}
},
actionHint: 'Choose values for at least "Opening" and "Firmness" to save.'
}
export const mucus = {
......@@ -37,7 +38,8 @@ export const mucus = {
categories: ['nothing', 'creamy', 'egg white'],
explainer: "Looking at and touching your cervical mucus, which describes it best?"
},
excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection",
actionHint: 'Choose values for both "Feeling" and "Texture" to save.'
}
export const desire = {
......
......@@ -17,6 +17,7 @@ const fontRegular = 'Prompt-Light'
const fontLight = 'Prompt-Thin'
const regularSize = 16
const hintSize = 14
const defaultBottomMargin = 5
const defaultIndentation = 10
......@@ -34,6 +35,12 @@ export default StyleSheet.create({
fontFamily: fontLight,
fontSize: regularSize
},
actionHint: {
color: secondaryColor,
fontFamily: fontRegular,
fontSize: hintSize,
margin: defaultIndentation
},
paragraph: {
marginBottom: defaultBottomMargin
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment