From 8357d61170744838ee4351809fb8451bd462f8f4 Mon Sep 17 00:00:00 2001 From: tina Date: Fri, 21 Sep 2018 18:20:02 +0200 Subject: [PATCH 1/6] reduces footer actions to save, leaving no possibility to delete data once it was saved --- .../symptoms/action-button-footer.js | 68 +++++++------------ components/cycle-day/symptoms/bleeding.js | 1 - 2 files changed, 23 insertions(+), 46 deletions(-) diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js index dac39a6..ea96f94 100644 --- a/components/cycle-day/symptoms/action-button-footer.js +++ b/components/cycle-day/symptoms/action-button-footer.js @@ -3,13 +3,11 @@ import { View, TouchableOpacity, Text } from 'react-native' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' -import { saveSymptom } from '../../../db' import styles, {iconStyles} from '../../../styles' export default class ActionButtonFooter extends Component { render() { const { - symptom, cycleDay, saveAction, saveDisabled, @@ -17,53 +15,33 @@ export default class ActionButtonFooter extends Component { autoShowDayView = true} = this.props const navigateToOverView = () => navigate('CycleDay', {cycleDay}) - const buttons = [ - { - title: 'Cancel', - action: () => navigateToOverView(), - icon: 'cancel' + const saveButton = { + title: 'Save', + action: () => { + saveAction() + if (autoShowDayView) navigateToOverView() }, - { - title: 'Delete', - action: () => { - saveSymptom(symptom, cycleDay) - navigateToOverView() - }, - disabledCondition: !cycleDay[symptom], - icon: 'delete-outline' - }, { - title: 'Save', - action: () => { - saveAction() - if (autoShowDayView) navigateToOverView() - }, - disabledCondition: saveDisabled, - icon: 'content-save-outline' - } - ] + disabledCondition: saveDisabled, + icon: 'content-save-outline' + } + const textStyle = saveButton.disabledCondition ? styles.menuTextInActive : styles.menuText + const iconStyle = saveButton.disabledCondition ? + Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) : + iconStyles.menuIcon return ( - {buttons.map(({ title, action, disabledCondition, icon }, i) => { - const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText - const iconStyle = disabledCondition ? - Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) : - iconStyles.menuIcon - - return ( - - - - {title} - - - ) - })} + + + + {saveButton.title} + + ) } diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 3c88ec5..6357c26 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -56,7 +56,6 @@ export default class Bleeding extends Component { { saveSymptom('bleeding', this.props.cycleDay, { From e5052bf088e5977db3c2c70eeddcd98edbd4d963 Mon Sep 17 00:00:00 2001 From: tina Date: Sun, 23 Sep 2018 12:06:23 +0200 Subject: [PATCH 2/6] changes footer depending on new entry or edit mode --- components/cycle-day/select-tab-group.js | 8 +- .../symptoms/action-button-footer.js | 80 +++++++++++++------ components/cycle-day/symptoms/bleeding.js | 2 + components/cycle-day/symptoms/cervix.js | 3 + components/cycle-day/symptoms/desire.js | 1 + 5 files changed, 70 insertions(+), 24 deletions(-) diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js index b960d95..ef3dec8 100644 --- a/components/cycle-day/select-tab-group.js +++ b/components/cycle-day/select-tab-group.js @@ -23,7 +23,13 @@ export default class SelectTabGroup extends Component { if (isActive) activeStyle = styles.selectTabActive return ( isActive ? this.props.onSelect(null) : this.props.onSelect(value)} + onPress={() => { + if (this.props.isRadioButton) { + this.props.onSelect(value) + } else { + isActive ? this.props.onSelect(null) : this.props.onSelect(value) + } + }} key={i} activeOpacity={1} > diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js index ea96f94..c209941 100644 --- a/components/cycle-day/symptoms/action-button-footer.js +++ b/components/cycle-day/symptoms/action-button-footer.js @@ -3,11 +3,13 @@ import { View, TouchableOpacity, Text } from 'react-native' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' +import { saveSymptom } from '../../../db' import styles, {iconStyles} from '../../../styles' export default class ActionButtonFooter extends Component { render() { const { + symptom, cycleDay, saveAction, saveDisabled, @@ -15,33 +17,65 @@ export default class ActionButtonFooter extends Component { autoShowDayView = true} = this.props const navigateToOverView = () => navigate('CycleDay', {cycleDay}) - const saveButton = { - title: 'Save', - action: () => { - saveAction() - if (autoShowDayView) navigateToOverView() + const buttonsNewEntry = [ + { + title: 'Cancel', + action: () => navigateToOverView(), + icon: 'cancel' }, - disabledCondition: saveDisabled, - icon: 'content-save-outline' - } - const textStyle = saveButton.disabledCondition ? styles.menuTextInActive : styles.menuText - const iconStyle = saveButton.disabledCondition ? - Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) : - iconStyles.menuIcon + { + title: 'Add', + action: () => { + saveAction() + if (autoShowDayView) navigateToOverView() + }, + disabledCondition: saveDisabled, + icon: 'content-save-outline' + } + ] + const buttonsEdit = [ + { + title: 'Delete', + action: () => { + saveSymptom(symptom, cycleDay) + navigateToOverView() + }, + disabledCondition: !cycleDay[symptom], + icon: 'delete-outline' + }, { + title: 'Save', + action: () => { + saveAction() + if (autoShowDayView) navigateToOverView() + }, + disabledCondition: saveDisabled, + icon: 'content-save-outline' + } + ] + const buttons = !cycleDay[symptom] ? buttonsNewEntry : buttonsEdit return ( - - - - {saveButton.title} - - + {buttons.map(({ title, action, disabledCondition, icon }, i) => { + const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText + const iconStyle = disabledCondition ? + Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) : + iconStyles.menuIcon + + return ( + + + + {title} + + + ) + })} ) } diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 6357c26..2f6f1ae 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -40,6 +40,7 @@ export default class Bleeding extends Component { buttons={bleedingRadioProps} active={this.state.currentValue} onSelect={val => this.setState({ currentValue: val })} + isRadioButton={true} /> { saveSymptom('bleeding', this.props.cycleDay, { diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js index ccb1cbd..e926573 100644 --- a/components/cycle-day/symptoms/cervix.js +++ b/components/cycle-day/symptoms/cervix.js @@ -50,6 +50,7 @@ export default class Cervix extends Component { buttons={cervixOpeningRadioProps} active={this.state.opening} onSelect={val => this.setState({ opening: val })} + isRadioButton={true} /> this.setState({ firmness: val })} + isRadioButton={true} /> this.setState({ position: val })} + isRadioButton={false} /> this.setState({ currentValue: val })} + isRadioButton={true} /> From c06bfa2c9144110698516086211b9b121570d1f4 Mon Sep 17 00:00:00 2001 From: tina Date: Wed, 26 Sep 2018 18:16:29 +0200 Subject: [PATCH 3/6] solves the action footer, but messes up the header --- components/app.js | 5 ++- components/cycle-day/labels/labels.js | 9 ++++ components/cycle-day/select-tab-group.js | 8 +--- .../symptoms/action-button-footer.js | 42 +++++++++---------- components/cycle-day/symptoms/bleeding.js | 11 ++++- components/cycle-day/symptoms/cervix.js | 3 -- components/cycle-day/symptoms/desire.js | 1 - components/header.js | 34 ++++++++++++--- styles/index.js | 3 ++ 9 files changed, 74 insertions(+), 42 deletions(-) diff --git a/components/app.js b/components/app.js index ba58437..4cc978d 100644 --- a/components/app.js +++ b/components/app.js @@ -56,7 +56,10 @@ export default class App extends Component { return ( - {this.state.currentPage != 'CycleDay' &&
} + {this.state.currentPage != 'CycleDay' && !isSymptomView(this.state.currentPage) && +
} {React.createElement(page, { navigate: this.navigate, diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js index 5566f73..0758cdd 100644 --- a/components/cycle-day/labels/labels.js +++ b/components/cycle-day/labels/labels.js @@ -84,3 +84,12 @@ export const temperature = { } export const noteExplainer = "Anything you want to add for the day?" + +export const sharedDialogs = { + cancel: 'Cancel', + areYouSureTitle: 'Are you sure?', + areYouSureToUnset: 'Are you sure you want to unset all entered data?', + reallyUnsetData: 'Yes, I am sure', + save: 'Save', + unset: 'Unset' +} diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js index ef3dec8..b960d95 100644 --- a/components/cycle-day/select-tab-group.js +++ b/components/cycle-day/select-tab-group.js @@ -23,13 +23,7 @@ export default class SelectTabGroup extends Component { if (isActive) activeStyle = styles.selectTabActive return ( { - if (this.props.isRadioButton) { - this.props.onSelect(value) - } else { - isActive ? this.props.onSelect(null) : this.props.onSelect(value) - } - }} + onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)} key={i} activeOpacity={1} > diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js index c209941..d990f48 100644 --- a/components/cycle-day/symptoms/action-button-footer.js +++ b/components/cycle-day/symptoms/action-button-footer.js @@ -1,10 +1,11 @@ import React, { Component } from 'react' import { - View, TouchableOpacity, Text + View, TouchableOpacity, Text, Alert } from 'react-native' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' import { saveSymptom } from '../../../db' import styles, {iconStyles} from '../../../styles' +import {sharedDialogs as labels} from '../labels/labels' export default class ActionButtonFooter extends Component { render() { @@ -17,33 +18,29 @@ export default class ActionButtonFooter extends Component { autoShowDayView = true} = this.props const navigateToOverView = () => navigate('CycleDay', {cycleDay}) - const buttonsNewEntry = [ + const buttons = [ { - title: 'Cancel', - action: () => navigateToOverView(), - icon: 'cancel' - }, - { - title: 'Add', + title: labels.unset, action: () => { - saveAction() - if (autoShowDayView) navigateToOverView() - }, - disabledCondition: saveDisabled, - icon: 'content-save-outline' - } - ] - const buttonsEdit = [ - { - title: 'Delete', - action: () => { - saveSymptom(symptom, cycleDay) - navigateToOverView() + Alert.alert( + labels.areYouSureTitle, + labels.areYouSureToUnset, + [{ + text: labels.cancel, + style: 'cancel' + }, { + text: labels.reallyUnsetData, + onPress: () => { + saveSymptom(symptom, cycleDay) + navigateToOverView() + } + }] + ) }, disabledCondition: !cycleDay[symptom], icon: 'delete-outline' }, { - title: 'Save', + title: labels.save, action: () => { saveAction() if (autoShowDayView) navigateToOverView() @@ -52,7 +49,6 @@ export default class ActionButtonFooter extends Component { icon: 'content-save-outline' } ] - const buttons = !cycleDay[symptom] ? buttonsNewEntry : buttonsEdit return ( diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 2f6f1ae..94125cf 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -10,6 +10,7 @@ import { bleeding as labels } from '../labels/labels' import ActionButtonFooter from './action-button-footer' import SelectTabGroup from '../select-tab-group' import SymptomSection from './symptom-section' +import Header from '../../header' export default class Bleeding extends Component { constructor(props) { @@ -31,6 +32,15 @@ export default class Bleeding extends Component { ] return ( +
this.props.navigate('CycleDay', this.props.cycleDay)} + cycleDayNumber={this.props.cycleDayNumber} + date={this.props.cycleDay.date} + infoTitle={'Info here'} + infoText={'bla bla'} + /> this.setState({ currentValue: val })} - isRadioButton={true} /> this.setState({ opening: val })} - isRadioButton={true} /> this.setState({ firmness: val })} - isRadioButton={true} /> this.setState({ position: val })} - isRadioButton={false} /> this.setState({ currentValue: val })} - isRadioButton={true} /> diff --git a/components/header.js b/components/header.js index a4d3414..174d879 100644 --- a/components/header.js +++ b/components/header.js @@ -7,8 +7,10 @@ import styles, { iconStyles } from '../styles' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' import { formatDateForViewHeader } from '../components/cycle-day/labels/format' + export default class Header extends Component { render() { + console.log(this.props) return ( this.props.isCycleDayOverView ? @@ -32,12 +34,32 @@ export default class Header extends Component { onPress={() => this.props.goToCycleDay('after')} /> - : - - - {this.props.title} - - + : this.props.isSymptomView ? + + this.props.goBack()} + /> + + + {this.props.title} + + + {formatDateForViewHeader(this.props.date)} + + + + + : + + + {this.props.title} + + ) } } \ No newline at end of file diff --git a/styles/index.js b/styles/index.js index ee63b83..fdb769c 100644 --- a/styles/index.js +++ b/styles/index.js @@ -132,6 +132,9 @@ export default StyleSheet.create({ justifyContent: 'space-between', height: '15%' }, + headerSymptom: { + height: '15%' + }, navigationArrow: { fontSize: 60, color: fontOnPrimaryColor From 1b11b24a4c0c780898b6b58cbec83589b04e062b Mon Sep 17 00:00:00 2001 From: tina Date: Wed, 26 Sep 2018 19:31:30 +0200 Subject: [PATCH 4/6] enables back button on symptom view --- components/app.js | 6 ++++++ components/cycle-day/symptoms/bleeding.js | 10 ---------- components/header.js | 4 ---- 3 files changed, 6 insertions(+), 14 deletions(-) diff --git a/components/app.js b/components/app.js index 4cc978d..94472a1 100644 --- a/components/app.js +++ b/components/app.js @@ -60,6 +60,12 @@ export default class App extends Component {
} + {isSymptomView(this.state.currentPage) && +
} {React.createElement(page, { navigate: this.navigate, diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 94125cf..3c88ec5 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -10,7 +10,6 @@ import { bleeding as labels } from '../labels/labels' import ActionButtonFooter from './action-button-footer' import SelectTabGroup from '../select-tab-group' import SymptomSection from './symptom-section' -import Header from '../../header' export default class Bleeding extends Component { constructor(props) { @@ -32,15 +31,6 @@ export default class Bleeding extends Component { ] return ( -
this.props.navigate('CycleDay', this.props.cycleDay)} - cycleDayNumber={this.props.cycleDayNumber} - date={this.props.cycleDay.date} - infoTitle={'Info here'} - infoText={'bla bla'} - /> @@ -45,9 +44,6 @@ export default class Header extends Component { {this.props.title} - - {formatDateForViewHeader(this.props.date)} - Date: Fri, 28 Sep 2018 13:05:47 +0200 Subject: [PATCH 5/6] improve header for symptom screens --- components/header.js | 9 +++++---- styles/index.js | 8 +++++++- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/header.js b/components/header.js index f8e0c8a..94a0119 100644 --- a/components/header.js +++ b/components/header.js @@ -34,11 +34,12 @@ export default class Header extends Component { /> : this.props.isSymptomView ? - + this.props.goBack()} + /> @@ -47,7 +48,7 @@ export default class Header extends Component { : diff --git a/styles/index.js b/styles/index.js index fdb769c..463a4c7 100644 --- a/styles/index.js +++ b/styles/index.js @@ -133,7 +133,9 @@ export default StyleSheet.create({ height: '15%' }, headerSymptom: { - height: '15%' + flexDirection: 'row', + justifyContent: 'space-between', + height: '12%' }, navigationArrow: { fontSize: 60, @@ -296,6 +298,10 @@ export const iconStyles = { size: 45, color: fontOnPrimaryColor }, + symptomHeaderIcons: { + size: 30, + color: fontOnPrimaryColor + }, symptomBox: { size: 40 }, From 91b1f52273291949e94d651c7ec9ff91c6c98c05 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Fri, 28 Sep 2018 19:42:23 +0200 Subject: [PATCH 6/6] Change arrow and info icons --- components/header.js | 15 ++++++++------- styles/index.js | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/components/header.js b/components/header.js index c9da0c7..ad96ba3 100644 --- a/components/header.js +++ b/components/header.js @@ -5,7 +5,8 @@ import { Dimensions } from 'react-native' import styles, { iconStyles } from '../styles' -import Icon from 'react-native-vector-icons/MaterialCommunityIcons' +import Icon from 'react-native-vector-icons/Entypo' +import FeatherIcon from 'react-native-vector-icons/Feather' import { formatDateForViewHeader } from '../components/cycle-day/labels/format' @@ -17,7 +18,7 @@ export default class Header extends Component { this.props.goToCycleDay('before')} /> @@ -31,7 +32,7 @@ export default class Header extends Component { } this.props.goToCycleDay('after')} /> @@ -40,8 +41,8 @@ export default class Header extends Component { this.props.goBack()} /> @@ -50,8 +51,8 @@ export default class Header extends Component { {this.props.title} - diff --git a/styles/index.js b/styles/index.js index 10c90c9..3d19cf3 100644 --- a/styles/index.js +++ b/styles/index.js @@ -322,7 +322,7 @@ export default StyleSheet.create({ export const iconStyles = { navigationArrow: { - size: 45, + size: 20, color: fontOnPrimaryColor }, symptomHeaderIcons: {