diff --git a/components/app-text.js b/components/app-text.js index 6e996da5873a31e77e0cd1a018c0b5457a10e95b..72419ea77b50115746f15f46fc641fca1277fbbe 100644 --- a/components/app-text.js +++ b/components/app-text.js @@ -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}> diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js index 5b2bdddf73ad283f1d607ead582d2fb8706da68c..d0e3e07ca37c8ebbe3181bd800d3d2e811a50a94 100644 --- a/components/cycle-day/symptoms/cervix.js +++ b/components/cycle-day/symptoms/cervix.js @@ -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> diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index 7de989695c7beae20f89b86f823ba765517edd2a..6e2d2ce061faa9a9980467f7e6769aaecb691160 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -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> diff --git a/i18n/en/cycle-day.js b/i18n/en/cycle-day.js index 972f626cfe32120e554f027314ca675e2dd18344..1a990f30a53ea5d1e9bd7b45d3c31e2dddab2695 100644 --- a/i18n/en/cycle-day.js +++ b/i18n/en/cycle-day.js @@ -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 = { diff --git a/styles/index.js b/styles/index.js index 93b00c51a444c67406838173e6947a6226c07265..badc68f55aaa95bce5ed6a45eb60aefac12f34ba 100644 --- a/styles/index.js +++ b/styles/index.js @@ -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 },