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) { ...@@ -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) { export function SymptomSectionHeader(props) {
return ( return (
<AppText style={styles.symptomViewHeading}> <AppText style={styles.symptomViewHeading}>
......
...@@ -10,6 +10,7 @@ import { cervix as labels } from '../../../i18n/en/cycle-day' ...@@ -10,6 +10,7 @@ import { cervix as labels } from '../../../i18n/en/cycle-day'
import ActionButtonFooter from './action-button-footer' import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group' import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section' import SymptomSection from './symptom-section'
import { ActionHint } from '../../app-text'
export default class Cervix extends Component { export default class Cervix extends Component {
constructor(props) { constructor(props) {
...@@ -35,6 +36,7 @@ export default class Cervix extends Component { ...@@ -35,6 +36,7 @@ export default class Cervix extends Component {
{ label: labels.position.categories[1], value: 1 }, { label: labels.position.categories[1], value: 1 },
{ label: labels.position.categories[2], value: 2 } { label: labels.position.categories[2], value: 2 }
] ]
const mandatoryNotCompletedYet = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
return ( return (
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<ScrollView style={styles.page}> <ScrollView style={styles.page}>
...@@ -81,6 +83,7 @@ export default class Cervix extends Component { ...@@ -81,6 +83,7 @@ export default class Cervix extends Component {
/> />
</SymptomSection> </SymptomSection>
</ScrollView> </ScrollView>
<ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
<ActionButtonFooter <ActionButtonFooter
symptom='cervix' symptom='cervix'
date={this.props.date} date={this.props.date}
...@@ -93,7 +96,7 @@ export default class Cervix extends Component { ...@@ -93,7 +96,7 @@ export default class Cervix extends Component {
exclude: Boolean(this.state.exclude) exclude: Boolean(this.state.exclude)
}) })
}} }}
saveDisabled={typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'} saveDisabled={mandatoryNotCompletedYet}
navigate={this.props.navigate} navigate={this.props.navigate}
/> />
</View> </View>
......
...@@ -11,7 +11,7 @@ import computeNfpValue from '../../../lib/nfp-mucus' ...@@ -11,7 +11,7 @@ import computeNfpValue from '../../../lib/nfp-mucus'
import ActionButtonFooter from './action-button-footer' import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group' import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section' import SymptomSection from './symptom-section'
import { ActionHint } from '../../app-text'
export default class Mucus extends Component { export default class Mucus extends Component {
constructor(props) { constructor(props) {
...@@ -34,6 +34,7 @@ export default class Mucus extends Component { ...@@ -34,6 +34,7 @@ export default class Mucus extends Component {
{ label: labels.texture.categories[1], value: 1 }, { label: labels.texture.categories[1], value: 1 },
{ label: labels.texture.categories[2], value: 2 } { label: labels.texture.categories[2], value: 2 }
] ]
const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
return ( return (
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<ScrollView style={styles.page}> <ScrollView style={styles.page}>
...@@ -70,6 +71,7 @@ export default class Mucus extends Component { ...@@ -70,6 +71,7 @@ export default class Mucus extends Component {
/> />
</SymptomSection> </SymptomSection>
</ScrollView> </ScrollView>
<ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
<ActionButtonFooter <ActionButtonFooter
symptom='mucus' symptom='mucus'
date={this.props.date} date={this.props.date}
...@@ -84,7 +86,7 @@ export default class Mucus extends Component { ...@@ -84,7 +86,7 @@ export default class Mucus extends Component {
exclude: Boolean(this.state.exclude) exclude: Boolean(this.state.exclude)
}) })
}} }}
saveDisabled={typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'} saveDisabled={mandatoryNotCompletedYet}
navigate={this.props.navigate} navigate={this.props.navigate}
/> />
</View> </View>
......
...@@ -25,7 +25,8 @@ export const cervix = { ...@@ -25,7 +25,8 @@ export const cervix = {
position: { position: {
categories: ['low', 'medium', 'high'], categories: ['low', 'medium', 'high'],
explainer: 'How high up in the vagina is the cervix?' explainer: 'How high up in the vagina is the cervix?'
} },
actionHint: 'Choose values for at least "Opening" and "Firmness" to save.'
} }
export const mucus = { export const mucus = {
...@@ -37,7 +38,8 @@ export const mucus = { ...@@ -37,7 +38,8 @@ export const mucus = {
categories: ['nothing', 'creamy', 'egg white'], categories: ['nothing', 'creamy', 'egg white'],
explainer: "Looking at and touching your cervical mucus, which describes it best?" 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 = { export const desire = {
......
...@@ -17,6 +17,7 @@ const fontRegular = 'Prompt-Light' ...@@ -17,6 +17,7 @@ const fontRegular = 'Prompt-Light'
const fontLight = 'Prompt-Thin' const fontLight = 'Prompt-Thin'
const regularSize = 16 const regularSize = 16
const hintSize = 14
const defaultBottomMargin = 5 const defaultBottomMargin = 5
const defaultIndentation = 10 const defaultIndentation = 10
...@@ -34,6 +35,12 @@ export default StyleSheet.create({ ...@@ -34,6 +35,12 @@ export default StyleSheet.create({
fontFamily: fontLight, fontFamily: fontLight,
fontSize: regularSize fontSize: regularSize
}, },
actionHint: {
color: secondaryColor,
fontFamily: fontRegular,
fontSize: hintSize,
margin: defaultIndentation
},
paragraph: { paragraph: {
marginBottom: defaultBottomMargin 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