From 6811b5a692fd25f12e0329449d4c8a7dde666891 Mon Sep 17 00:00:00 2001 From: emelko Date: Thu, 16 May 2019 16:10:17 +0200 Subject: [PATCH 01/14] Replace info icon in header with delete --- components/header/symptom-view.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/header/symptom-view.js b/components/header/symptom-view.js index 6b6e384..d77e221 100644 --- a/components/header/symptom-view.js +++ b/components/header/symptom-view.js @@ -6,7 +6,7 @@ import { Dimensions } from 'react-native' import styles, { iconStyles } from '../../styles' -import FeatherIcon from 'react-native-vector-icons/Feather' +import Icon from 'react-native-vector-icons/MaterialCommunityIcons' import NavigationArrow from './navigation-arrow' import formatDate from '../helpers/format-date' @@ -34,8 +34,8 @@ export default function SymptomViewHeader(props) { onPress={props.deleteEntry} style={styles.infoButton} > - From d2c0891a68c4097d5f122a50bcbedf38fbe368de Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 18 May 2019 06:40:36 +0200 Subject: [PATCH 02/14] Try out moving it to body --- components/cycle-day/symptoms/symptom-view.js | 16 +++++++++++- components/header/symptom-view.js | 6 +++-- styles/index.js | 25 +++++++++++++------ 3 files changed, 36 insertions(+), 11 deletions(-) diff --git a/components/cycle-day/symptoms/symptom-view.js b/components/cycle-day/symptoms/symptom-view.js index b782a12..15022ed 100644 --- a/components/cycle-day/symptoms/symptom-view.js +++ b/components/cycle-day/symptoms/symptom-view.js @@ -1,9 +1,13 @@ import React, { Component } from 'react' -import { BackHandler, View, Alert } from 'react-native' +import { + BackHandler, View, Alert, TouchableOpacity +} from 'react-native' import { saveSymptom } from '../../../db' import Header from '../../header/symptom-view' import { headerTitles } from '../../../i18n/en/labels' import { sharedDialogs } from '../../../i18n/en/cycle-day' +import FeatherIcon from 'react-native-vector-icons/Entypo' +import styles, { iconStyles } from '../../../styles' export default class SymptomView extends Component { constructor(props) { @@ -66,6 +70,16 @@ export default class SymptomView extends Component { ) }} /> + {}} + style={styles.infoButtonSymptomView} + > + + {this.renderContent()} ) diff --git a/components/header/symptom-view.js b/components/header/symptom-view.js index d3df585..e760377 100644 --- a/components/header/symptom-view.js +++ b/components/header/symptom-view.js @@ -32,12 +32,14 @@ export default function SymptomViewHeader(props) { diff --git a/styles/index.js b/styles/index.js index 2b5d0f0..6221202 100644 --- a/styles/index.js +++ b/styles/index.js @@ -176,10 +176,6 @@ export default StyleSheet.create({ fontFamily: textFontBold, marginTop: 10 }, - symptomDeleteIcon: { - marginRight: 20, - marginLeft: 20 - }, symptomBoxImage: { width: 50, height: 50 @@ -438,8 +434,15 @@ export default StyleSheet.create({ marginTop: 20, color: 'grey' }, - infoButton: { - paddingVertical: 20 + headerDeleteButton: { + paddingHorizontal: 20, + paddingVertical: 20, + alignItems: 'flex-end' + }, + infoButtonSymptomView: { + paddingHorizontal: 20, + paddingVertical: 10, + alignItems: 'flex-end' }, licensePage: { paddingVertical: 20, @@ -479,7 +482,13 @@ export const iconStyles = { color: colorInActive, }, infoInHeading: { - marginRight: 5, - color: 'black' + marginRight: 5 + }, + infoInSymptomView: { + size: 20 + }, + hiddenIcon: { + size: 20, + display: 'none' } } From ff1afcb8dcd143a4442ab824d6f150f7972f6a69 Mon Sep 17 00:00:00 2001 From: emelko Date: Sun, 19 May 2019 12:56:08 +0200 Subject: [PATCH 03/14] Adds info button to the body as alert --- components/cycle-day/symptoms/bleeding.js | 52 ++++++++++++++++----- components/cycle-day/symptoms/cervix.js | 52 ++++++++++++++++----- components/cycle-day/symptoms/desire.js | 52 ++++++++++++++++----- components/cycle-day/symptoms/mucus.js | 55 ++++++++++++++++------ components/cycle-day/symptoms/note.js | 56 +++++++++++++++++------ components/cycle-day/symptoms/sex.js | 54 ++++++++++++++++------ styles/index.js | 5 ++ 7 files changed, 249 insertions(+), 77 deletions(-) diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 9d94a03..465e441 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -1,11 +1,19 @@ import React from 'react' import { + Alert, Switch, - ScrollView + ScrollView, + TouchableOpacity, + View } from 'react-native' -import styles from '../../../styles' +import FeatherIcon from 'react-native-vector-icons/Feather' + import { bleeding } from '../../../i18n/en/cycle-day' +import infoLabels from '../../../i18n/en/symptom-info' +import styles, { iconStyles } from '../../../styles' + import SelectTabGroup from '../select-tab-group' + import SymptomSection from './symptom-section' import SymptomView from './symptom-view' @@ -22,6 +30,14 @@ export default class Bleeding extends SymptomView { symptomName = 'bleeding' + showInfoBox(){ + const symptomName = 'bleeding' + Alert.alert( + infoLabels[symptomName].title, + infoLabels[symptomName].text + ) + } + onBackButtonPress() { if (typeof this.state.currentValue != 'number') { this.deleteSymptomEntry() @@ -42,16 +58,28 @@ export default class Bleeding extends SymptomView { ] return ( - - this.setState({ currentValue: val })} - /> - + + + this.setState({ currentValue: val })} + /> + + + + + + typeof this.state[val] != 'number') if (nothingEntered) { @@ -53,16 +69,28 @@ export default class Cervix extends SymptomView { // const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number' return ( - - this.setState({ opening: val })} - /> - + + + this.setState({ opening: val })} + /> + + + + + + - - this.setState({ currentValue: val })} - /> - + + + this.setState({ currentValue: val })} + /> + + + + + + ) } diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index 2d7b9d1..49eceb9 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -1,12 +1,20 @@ import React from 'react' import { + Alert, Switch, - ScrollView + ScrollView, + TouchableOpacity, + View } from 'react-native' -import styles from '../../../styles' +import FeatherIcon from 'react-native-vector-icons/Feather' + +import styles, { iconStyles } from '../../../styles' +import infoLabels from '../../../i18n/en/symptom-info' import { mucus as labels } from '../../../i18n/en/cycle-day' import computeNfpValue from '../../../lib/nfp-mucus' + import SelectTabGroup from '../select-tab-group' + import SymptomSection from './symptom-section' import SymptomView from './symptom-view' @@ -19,6 +27,14 @@ export default class Mucus extends SymptomView { } symptomName = 'mucus' + + showInfoBox(){ + const symptomName = 'mucus' + Alert.alert( + infoLabels[symptomName].title, + infoLabels[symptomName].text + ) + } onBackButtonPress() { const nothingEntered = ['feeling', 'texture'].every(val => typeof this.state[val] != 'number') @@ -26,7 +42,7 @@ export default class Mucus extends SymptomView { this.deleteSymptomEntry() return } - + const feeling = this.state.feeling const texture = this.state.texture this.saveSymptomEntry({ @@ -53,16 +69,29 @@ export default class Mucus extends SymptomView { // const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number' return ( - - this.setState({ feeling: val })} - active={this.state.feeling} - /> - + + + this.setState({ feeling: val })} + active={this.state.feeling} + /> + + + + + + + - - { - this.setState({ currentValue: val }) - }} - value={this.state.currentValue} - /> - + + + { + this.setState({ currentValue: val }) + }} + value={this.state.currentValue} + /> + + + + + + ) } diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js index 9b195da..bd9487d 100644 --- a/components/cycle-day/symptoms/sex.js +++ b/components/cycle-day/symptoms/sex.js @@ -1,12 +1,20 @@ import React from 'react' import { + Alert, + ScrollView, TextInput, - ScrollView + TouchableOpacity, + View } from 'react-native' -import styles from '../../../styles' +import FeatherIcon from 'react-native-vector-icons/Feather' + +import infoLabels from '../../../i18n/en/symptom-info' import { sex as sexLabels, contraceptives as contraceptivesLabels } from '../../../i18n/en/cycle-day' import { shared as sharedLabels } from '../../../i18n/en/labels' +import styles, { iconStyles } from '../../../styles' + import SelectBoxGroup from '../select-box-group' + import SymptomSection from './symptom-section' import SymptomView from './symptom-view' @@ -24,8 +32,16 @@ export default class Sex extends SymptomView { if (this.state.note) this.state.other = true } - symptomName = "sex" + symptomName = 'sex' + showInfoBox(){ + const symptomName = 'sex' + Alert.alert( + infoLabels[symptomName].title, + infoLabels[symptomName].text + ) + } + onBackButtonPress() { const nothingEntered = Object.values(this.state).every(val => !val) if (nothingEntered) { @@ -51,16 +67,28 @@ export default class Sex extends SymptomView { renderContent() { return ( - - - + + + + + + + + + Date: Sun, 19 May 2019 12:56:52 +0200 Subject: [PATCH 04/14] [WIP] Adds info button to body as alert for: * mood, pain, temperature --- components/cycle-day/symptoms/mood.js | 56 ++++++++++---- components/cycle-day/symptoms/pain.js | 51 +++++++++--- components/cycle-day/symptoms/temperature.js | 81 +++++++++++++------- 3 files changed, 134 insertions(+), 54 deletions(-) diff --git a/components/cycle-day/symptoms/mood.js b/components/cycle-day/symptoms/mood.js index 09f8fbc..e9dd963 100644 --- a/components/cycle-day/symptoms/mood.js +++ b/components/cycle-day/symptoms/mood.js @@ -1,11 +1,20 @@ import React from 'react' import { + Alert, ScrollView, - TextInput} from 'react-native' + TextInput, + TouchableOpacity, + View +} from 'react-native' +import FeatherIcon from 'react-native-vector-icons/Feather' + +import infoLabels from '../../../i18n/en/symptom-info' import { mood as labels } from '../../../i18n/en/cycle-day' +import styles, { iconStyles } from '../../../styles' + import SelectBoxGroup from '../select-box-group' + import SymptomSection from './symptom-section' -import styles from '../../../styles' import SymptomView from './symptom-view' export default class Mood extends SymptomView { @@ -22,7 +31,15 @@ export default class Mood extends SymptomView { } } - symptomName = "mood" + symptomName = 'mood' + + showInfoBox(){ + const symptomName = 'mood' + Alert.alert( + infoLabels[symptomName].title, + infoLabels[symptomName].text + ) + } onBackButtonPress() { const nothingEntered = Object.values(this.state).every(val => !val) @@ -48,15 +65,25 @@ export default class Mood extends SymptomView { renderContent() { return ( - - - { this.state.other && + + + + + + + { this.state.other && - } - + } + + ) } diff --git a/components/cycle-day/symptoms/pain.js b/components/cycle-day/symptoms/pain.js index 30ac355..978ced0 100644 --- a/components/cycle-day/symptoms/pain.js +++ b/components/cycle-day/symptoms/pain.js @@ -1,13 +1,21 @@ import React from 'react' import { + Alert, ScrollView, TextInput, + TouchableOpacity, + View } from 'react-native' +import FeatherIcon from 'react-native-vector-icons/Feather' + +import infoLabels from '../../../i18n/en/symptom-info' import { pain as labels } from '../../../i18n/en/cycle-day' import { shared as sharedLabels } from '../../../i18n/en/labels' +import styles, { iconStyles } from '../../../styles' + import SelectBoxGroup from '../select-box-group' + import SymptomSection from './symptom-section' -import styles from '../../../styles' import SymptomView from './symptom-view' export default class Pain extends SymptomView { @@ -26,6 +34,14 @@ export default class Pain extends SymptomView { symptomName = 'pain' + showInfoBox(){ + const symptomName = 'pain' + Alert.alert( + infoLabels[symptomName].title, + infoLabels[symptomName].text + ) + } + onBackButtonPress() { const nothingEntered = Object.values(this.state).every(val => !val) if (nothingEntered) { @@ -51,15 +67,25 @@ export default class Pain extends SymptomView { renderContent() { return ( - - - { this.state.other && + + + + + + + { this.state.other && - } - + } + + ) } } diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js index 3bb08c9..9751b6e 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -1,23 +1,28 @@ import React from 'react' import { - View, - Switch, - Keyboard, Alert, - ScrollView + Keyboard, + ScrollView, + Switch, + TouchableOpacity, + View } from 'react-native' import DateTimePicker from 'react-native-modal-datetime-picker-nevo' -import padWithZeros from '../../helpers/pad-time-with-zeros' - -import { getPreviousTemperature } from '../../../db' -import styles from '../../../styles' +import FeatherIcon from 'react-native-vector-icons/Feather' import { LocalTime, ChronoUnit } from 'js-joda' -import { temperature as labels } from '../../../i18n/en/cycle-day' + +import config from '../../../config' +import { getPreviousTemperature } from '../../../db' +import infoLabels from '../../../i18n/en/symptom-info' import { scaleObservable } from '../../../local-storage' import { shared as sharedLabels } from '../../../i18n/en/labels' -import config from '../../../config' -import AppTextInput from '../../app-text-input' +import styles, { iconStyles } from '../../../styles' +import { temperature as labels } from '../../../i18n/en/cycle-day' + import AppText from '../../app-text' +import AppTextInput from '../../app-text-input' +import padWithZeros from '../../helpers/pad-time-with-zeros' + import SymptomSection from './symptom-section' import SymptomView from './symptom-view' @@ -55,6 +60,14 @@ export default class Temp extends SymptomView { symptomName = 'temperature' + showInfoBox(){ + const symptomName = 'temperature' + Alert.alert( + infoLabels[symptomName].title, + infoLabels[symptomName].text + ) + } + async onBackButtonPress() { if (typeof this.state.temperature != 'string' || this.state.temperature === '') { this.deleteSymptomEntry() @@ -134,23 +147,35 @@ export default class Temp extends SymptomView { } return ( - - - - °C - - + + + + + + + + + °C + + + From e9c18add5edb484310aeeb65956b50a399e786f7 Mon Sep 17 00:00:00 2001 From: emelko Date: Sun, 19 May 2019 12:57:07 +0200 Subject: [PATCH 05/14] Gets rid of old info symptom screen --- components/app.js | 15 ++------ components/cycle-day/symptoms/info-symptom.js | 35 ------------------- 2 files changed, 2 insertions(+), 48 deletions(-) delete mode 100644 components/cycle-day/symptoms/info-symptom.js diff --git a/components/app.js b/components/app.js index fd9b61b..34f6f11 100644 --- a/components/app.js +++ b/components/app.js @@ -11,7 +11,6 @@ import SettingsMenu from './settings/settings-menu' import settingsViews from './settings' import Stats from './stats' import {headerTitles, menuTitles} from '../i18n/en/labels' -import InfoSymptom from './cycle-day/symptoms/info-symptom' import setupNotifications from '../lib/notifications' // design wants everyhting lowercased, but we don't @@ -22,7 +21,6 @@ const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => { }, {}) const HOME_PAGE = 'Home' -const INFO_SYMPTOM_PAGE = 'InfoSymptom' const CYCLE_DAY_PAGE = 'CycleDay' const SETTINGS_MENU_PAGE = 'SettingsMenu' @@ -49,7 +47,7 @@ export default class App extends Component { if (this.isMenuItem()) { this.menuOrigin = currentPage } - if (!this.isSymptomView() && !this.isInfoSymptomView()) { + if (!this.isSymptomView()) { this.originForSymptomView = currentPage } this.setState({ currentPage: pageName, currentProps: props }) @@ -66,10 +64,6 @@ export default class App extends Component { this.navigate(SETTINGS_MENU_PAGE) } else if (currentPage === CYCLE_DAY_PAGE) { this.navigate(this.menuOrigin) - } else if (this.isInfoSymptomView()) { - const { date, cycleDay, symptomView } = currentProps - this.navigate( - symptomView, { date, cycleDay }) } else { this.navigate(HOME_PAGE) } @@ -84,10 +78,6 @@ export default class App extends Component { return Object.keys(symptomViews).includes(this.state.currentPage) } - isInfoSymptomView() { - return this.state.currentPage === INFO_SYMPTOM_PAGE - } - isSettingsView() { return Object.keys(settingsViews).includes(this.state.currentPage) } @@ -104,7 +94,6 @@ export default class App extends Component { Calendar, CycleDay, Chart, - InfoSymptom, SettingsMenu, ...settingsViews, Stats, @@ -118,7 +107,7 @@ export default class App extends Component { {this.isDefaultView() &&
} - {(this.isInfoSymptomView() || this.isSettingsView()) && + {(this.isSettingsView()) &&
- - {labels[currentSymptom].text} - - - ) - } -} From c81f7d62911aef2d1429e2ab2fc64a6c41db05d9 Mon Sep 17 00:00:00 2001 From: emelko Date: Sun, 19 May 2019 13:09:21 +0200 Subject: [PATCH 06/14] Gets rid of trailing spaces --- components/cycle-day/symptoms/mood.js | 2 +- components/cycle-day/symptoms/mucus.js | 4 ++-- components/cycle-day/symptoms/sex.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/cycle-day/symptoms/mood.js b/components/cycle-day/symptoms/mood.js index e9dd963..720fcfb 100644 --- a/components/cycle-day/symptoms/mood.js +++ b/components/cycle-day/symptoms/mood.js @@ -32,7 +32,7 @@ export default class Mood extends SymptomView { } symptomName = 'mood' - + showInfoBox(){ const symptomName = 'mood' Alert.alert( diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index 49eceb9..b3109cb 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -27,7 +27,7 @@ export default class Mucus extends SymptomView { } symptomName = 'mucus' - + showInfoBox(){ const symptomName = 'mucus' Alert.alert( @@ -42,7 +42,7 @@ export default class Mucus extends SymptomView { this.deleteSymptomEntry() return } - + const feeling = this.state.feeling const texture = this.state.texture this.saveSymptomEntry({ diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js index bd9487d..6538425 100644 --- a/components/cycle-day/symptoms/sex.js +++ b/components/cycle-day/symptoms/sex.js @@ -41,7 +41,7 @@ export default class Sex extends SymptomView { infoLabels[symptomName].text ) } - + onBackButtonPress() { const nothingEntered = Object.values(this.state).every(val => !val) if (nothingEntered) { From 69d2517dd27853c0aa0c9ced9ba6a02c171d7d39 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sun, 19 May 2019 18:44:12 +0200 Subject: [PATCH 07/14] Use own modal instead of alert for symptom info --- components/cycle-day/symptoms/info-symptom.js | 22 ++++++++ components/cycle-day/symptoms/symptom-view.js | 23 ++++---- styles/index.js | 54 ++++++++++--------- 3 files changed, 65 insertions(+), 34 deletions(-) create mode 100644 components/cycle-day/symptoms/info-symptom.js diff --git a/components/cycle-day/symptoms/info-symptom.js b/components/cycle-day/symptoms/info-symptom.js new file mode 100644 index 0000000..e21c7ad --- /dev/null +++ b/components/cycle-day/symptoms/info-symptom.js @@ -0,0 +1,22 @@ +import React from 'react' +import { ScrollView, View, TouchableOpacity } from 'react-native' +import Icon from 'react-native-vector-icons/SimpleLineIcons' +import AppText from '../../app-text' +import labels from '../../../i18n/en/symptom-info.js' +import styles, {iconStyles} from '../../../styles/index' + +export default function InfoSymptom(props) { + return ( + + + + + + + + {labels[props.symptom].text} + + + + ) +} diff --git a/components/cycle-day/symptoms/symptom-view.js b/components/cycle-day/symptoms/symptom-view.js index bb5d393..aa19a2e 100644 --- a/components/cycle-day/symptoms/symptom-view.js +++ b/components/cycle-day/symptoms/symptom-view.js @@ -3,12 +3,12 @@ import { BackHandler, View, Alert, TouchableOpacity } from 'react-native' import { saveSymptom } from '../../../db' +import InfoPopUp from './info-symptom' import Header from '../../header/symptom-view' import { headerTitles } from '../../../i18n/en/labels' import { sharedDialogs } from '../../../i18n/en/cycle-day' import FeatherIcon from 'react-native-vector-icons/Feather' import styles, { iconStyles } from '../../../styles' -import infoLabels from '../../../i18n/en/symptom-info' export default class SymptomView extends Component { constructor(props) { @@ -19,6 +19,10 @@ export default class SymptomView extends Component { ) this.globalBackhandler = props.handleBackButtonPress this.date = props.date + this.navigate = props.navigate + this.state = { + showInfo: false + } } async handleBackButtonPressOnSymptomView() { @@ -46,13 +50,6 @@ export default class SymptomView extends Component { }) } - showInfoBox(){ - Alert.alert( - infoLabels[this.symptomName].title, - infoLabels[this.symptomName].text - ) - } - render() { return ( @@ -78,9 +75,9 @@ export default class SymptomView extends Component { ) }} /> - + this.setState({showInfo: true})} style={styles.infoButtonSymptomView} > {this.renderContent()} + { this.state.showInfo && + this.setState({showInfo: false})} + /> + } ) diff --git a/styles/index.js b/styles/index.js index 49a45e3..4f36a3c 100644 --- a/styles/index.js +++ b/styles/index.js @@ -270,20 +270,6 @@ export default StyleSheet.create({ temperatureTextInputSuggestion: { color: '#939393' }, - actionButtonFooter: { - alignItems: 'center', - justifyContent: 'space-around', - flexDirection: 'row', - height: 60, - }, - actionButtonItem: { - backgroundColor: secondaryColor, - alignItems: 'center', - flex: 1, - marginHorizontal: 5, - paddingVertical: 5, - borderRadius: 5, - }, symptomEditButton: { width: 130 }, @@ -308,6 +294,33 @@ export default StyleSheet.create({ flexDirection: 'row', alignItems: 'center' }, + infoPopUpWrapper: { + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0 + }, + infoPopUp: { + backgroundColor: 'white', + padding: 15, + position: 'absolute', + top: 20, + bottom: 20, + left: 20, + right: 20 + }, + dimmed: { + backgroundColor: 'black', + opacity: 0.5, + flex: 1 + }, + infoSymptomClose: { + alignItems: 'flex-end' + }, + infoSymptomText: { + marginTop: 10 + }, settingsButton: { padding: 10, alignItems: 'center', @@ -385,7 +398,7 @@ export default StyleSheet.create({ }, page: { marginHorizontal: 10, - marginTop: 20 + marginTop: 20, }, calendarToday: { fontWeight: 'bold', @@ -490,14 +503,7 @@ export const iconStyles = { menuIconInactive: { color: colorInActive, }, - infoInHeading: { - marginRight: 5 - }, - infoInSymptomView: { - size: 20 - }, - hiddenIcon: { - size: 20, - display: 'none' + infoPopUpClose: { + size: 25 } } From 472d793627d4a5c36f24d0d4c47159fa87eb9e46 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sun, 19 May 2019 19:00:05 +0200 Subject: [PATCH 08/14] Clean up markup --- components/cycle-day/symptoms/bleeding.js | 27 ++++++--------- components/cycle-day/symptoms/desire.js | 26 ++++++-------- components/cycle-day/symptoms/mood.js | 29 +++++++--------- components/cycle-day/symptoms/mucus.js | 26 ++++++-------- components/cycle-day/symptoms/note.js | 32 ++++++++--------- components/cycle-day/symptoms/pain.js | 28 +++++++-------- components/cycle-day/symptoms/sex.js | 24 ++++++------- components/cycle-day/symptoms/temperature.js | 36 +++++++++----------- 8 files changed, 99 insertions(+), 129 deletions(-) diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 6658528..2cfb21d 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -1,9 +1,7 @@ import React from 'react' import { Switch, - ScrollView, - View -} from 'react-native' + ScrollView} from 'react-native' import { bleeding } from '../../../i18n/en/cycle-day' import styles from '../../../styles' @@ -46,19 +44,16 @@ export default class Bleeding extends SymptomView { ] return ( - - - this.setState({ currentValue: val })} - /> - - - + + this.setState({ currentValue: val })} + /> + - - - this.setState({ currentValue: val })} - /> - - + + this.setState({ currentValue: val })} + /> + ) } diff --git a/components/cycle-day/symptoms/mood.js b/components/cycle-day/symptoms/mood.js index 544ca0e..8ad698b 100644 --- a/components/cycle-day/symptoms/mood.js +++ b/components/cycle-day/symptoms/mood.js @@ -1,15 +1,12 @@ import React from 'react' import { ScrollView, - TextInput, - View -} from 'react-native' + TextInput} from 'react-native' import { mood as labels } from '../../../i18n/en/cycle-day' import styles from '../../../styles' import SelectBoxGroup from '../select-box-group' - import SymptomSection from './symptom-section' import SymptomView from './symptom-view' @@ -53,16 +50,15 @@ export default class Mood extends SymptomView { renderContent() { return ( - - - - { this.state.other && + + + { this.state.other && - } - - + } + ) } diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index 1a29eb5..1c75131 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -1,9 +1,7 @@ import React from 'react' import { Switch, - ScrollView, - View -} from 'react-native' + ScrollView} from 'react-native' import styles from '../../../styles' import { mucus as labels } from '../../../i18n/en/cycle-day' @@ -57,18 +55,16 @@ export default class Mucus extends SymptomView { // const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number' return ( - - - this.setState({ feeling: val })} - active={this.state.feeling} - /> - - + + this.setState({ feeling: val })} + active={this.state.feeling} + /> + - - - { - this.setState({ currentValue: val }) - }} - value={this.state.currentValue} - /> - - + + { + this.setState({ currentValue: val }) + }} + value={this.state.currentValue} + /> + ) } diff --git a/components/cycle-day/symptoms/pain.js b/components/cycle-day/symptoms/pain.js index 334f078..62050d2 100644 --- a/components/cycle-day/symptoms/pain.js +++ b/components/cycle-day/symptoms/pain.js @@ -1,9 +1,7 @@ import React from 'react' import { ScrollView, - TextInput, - View -} from 'react-native' + TextInput} from 'react-native' import { pain as labels } from '../../../i18n/en/cycle-day' import { shared as sharedLabels } from '../../../i18n/en/labels' @@ -55,16 +53,15 @@ export default class Pain extends SymptomView { renderContent() { return ( - - - - { this.state.other && + + + { this.state.other && - } - - + } + ) } } diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js index 745684c..c9735e1 100644 --- a/components/cycle-day/symptoms/sex.js +++ b/components/cycle-day/symptoms/sex.js @@ -55,19 +55,17 @@ export default class Sex extends SymptomView { renderContent() { return ( - - - - - - + + + + - - - - - °C - - - + + + + °C + + From 59c363613956cd719f0b55cfa67b8fdbde736d62 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Mon, 20 May 2019 06:08:46 +0200 Subject: [PATCH 09/14] Don't show delete icon just because symptom info is open --- components/cycle-day/symptoms/symptom-view.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/cycle-day/symptoms/symptom-view.js b/components/cycle-day/symptoms/symptom-view.js index aa19a2e..bd8214e 100644 --- a/components/cycle-day/symptoms/symptom-view.js +++ b/components/cycle-day/symptoms/symptom-view.js @@ -44,9 +44,10 @@ export default class SymptomView extends Component { } isDeleteIconActive() { - return Object.values(this.state).some(value => { + return Object.keys(this.state).some(key => { + if (key === 'showInfo') return // is there any meaningful value in the current state? - return value || value === 0 + return this.state[key] || this.state[key] === 0 }) } From 25ed0d168e92ea6a29a307b3f2ec57f152edf07a Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Mon, 20 May 2019 15:17:27 +0200 Subject: [PATCH 10/14] Remove formatting improvements that clutter up the diff --- components/cycle-day/symptoms/bleeding.js | 8 ++--- components/cycle-day/symptoms/cervix.js | 8 ++--- components/cycle-day/symptoms/desire.js | 8 ++--- components/cycle-day/symptoms/mood.js | 6 ++-- components/cycle-day/symptoms/mucus.js | 7 ++--- components/cycle-day/symptoms/note.js | 8 ++--- components/cycle-day/symptoms/pain.js | 8 ++--- components/cycle-day/symptoms/sex.js | 11 ++----- components/cycle-day/symptoms/temperature.js | 31 +++++++++----------- 9 files changed, 37 insertions(+), 58 deletions(-) diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 2cfb21d..9d94a03 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -1,13 +1,11 @@ import React from 'react' import { Switch, - ScrollView} from 'react-native' - -import { bleeding } from '../../../i18n/en/cycle-day' + ScrollView +} from 'react-native' import styles from '../../../styles' - +import { bleeding } from '../../../i18n/en/cycle-day' import SelectTabGroup from '../select-tab-group' - import SymptomSection from './symptom-section' import SymptomView from './symptom-view' diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js index 13c17fc..f58ebf2 100644 --- a/components/cycle-day/symptoms/cervix.js +++ b/components/cycle-day/symptoms/cervix.js @@ -1,13 +1,11 @@ import React from 'react' import { Switch, - ScrollView} from 'react-native' - -import { cervix as labels } from '../../../i18n/en/cycle-day' + ScrollView +} from 'react-native' import styles from '../../../styles' - +import { cervix as labels } from '../../../i18n/en/cycle-day' import SelectTabGroup from '../select-tab-group' - import SymptomSection from './symptom-section' import SymptomView from './symptom-view' diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js index 5cb335f..5ff9fad 100644 --- a/components/cycle-day/symptoms/desire.js +++ b/components/cycle-day/symptoms/desire.js @@ -1,12 +1,10 @@ import React from 'react' import { - ScrollView} from 'react-native' - -import { intensity, desire } from '../../../i18n/en/cycle-day' + ScrollView +} from 'react-native' import styles from '../../../styles' - +import { intensity, desire } from '../../../i18n/en/cycle-day' import SelectTabGroup from '../select-tab-group' - import SymptomSection from './symptom-section' import SymptomView from './symptom-view' diff --git a/components/cycle-day/symptoms/mood.js b/components/cycle-day/symptoms/mood.js index 8ad698b..09f8fbc 100644 --- a/components/cycle-day/symptoms/mood.js +++ b/components/cycle-day/symptoms/mood.js @@ -2,12 +2,10 @@ import React from 'react' import { ScrollView, TextInput} from 'react-native' - import { mood as labels } from '../../../i18n/en/cycle-day' -import styles from '../../../styles' - import SelectBoxGroup from '../select-box-group' import SymptomSection from './symptom-section' +import styles from '../../../styles' import SymptomView from './symptom-view' export default class Mood extends SymptomView { @@ -24,7 +22,7 @@ export default class Mood extends SymptomView { } } - symptomName = 'mood' + symptomName = "mood" onBackButtonPress() { const nothingEntered = Object.values(this.state).every(val => !val) diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index 1c75131..2d7b9d1 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -1,14 +1,12 @@ import React from 'react' import { Switch, - ScrollView} from 'react-native' - + ScrollView +} from 'react-native' import styles from '../../../styles' import { mucus as labels } from '../../../i18n/en/cycle-day' import computeNfpValue from '../../../lib/nfp-mucus' - import SelectTabGroup from '../select-tab-group' - import SymptomSection from './symptom-section' import SymptomView from './symptom-view' @@ -65,7 +63,6 @@ export default class Mucus extends SymptomView { active={this.state.feeling} /> - !val) @@ -65,7 +61,6 @@ export default class Sex extends SymptomView { optionsState={this.state} /> - Date: Tue, 21 May 2019 17:08:26 +0200 Subject: [PATCH 11/14] Make isDeleteIconActive more readable --- components/cycle-day/symptoms/symptom-view.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/components/cycle-day/symptoms/symptom-view.js b/components/cycle-day/symptoms/symptom-view.js index bd8214e..ec8a5c5 100644 --- a/components/cycle-day/symptoms/symptom-view.js +++ b/components/cycle-day/symptoms/symptom-view.js @@ -44,11 +44,17 @@ export default class SymptomView extends Component { } isDeleteIconActive() { - return Object.keys(this.state).some(key => { + const symptomValueHasBeenFilledOut = key => { + // the state tracks whether the symptom info should be shown, + // we ignore that property if (key === 'showInfo') return // is there any meaningful value in the current state? return this.state[key] || this.state[key] === 0 - }) + } + + const symptomValues = Object.keys(this.state) + + return symptomValues.some(symptomValueHasBeenFilledOut) } render() { From cef2e850d7388f62bf8d71c58a2d4a1ddc139326 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Tue, 21 May 2019 17:32:51 +0200 Subject: [PATCH 12/14] Don't render delete icon, instead of just setting it invisible --- components/header/navigation-arrow.js | 6 +++++- components/header/symptom-view.js | 26 +++++++++++++------------- styles/index.js | 12 ++++++------ 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/components/header/navigation-arrow.js b/components/header/navigation-arrow.js index 6a7b95b..b574142 100644 --- a/components/header/navigation-arrow.js +++ b/components/header/navigation-arrow.js @@ -8,6 +8,10 @@ export default function NavigationArrow(props) { left: 'chevron-thin-left', right: 'chevron-thin-right' }[props.direction] + const iconPosition = { + left: 'navigationArrowLeft', + right: 'navigationArrowRight' + }[props.direction] let pressHandler if (props.goBack) { pressHandler = () => props.goBack() @@ -19,7 +23,7 @@ export default function NavigationArrow(props) { } return ( - - - + { props.deleteIconActive && + + + + } ) diff --git a/styles/index.js b/styles/index.js index 4f36a3c..47f1070 100644 --- a/styles/index.js +++ b/styles/index.js @@ -234,13 +234,12 @@ export default StyleSheet.create({ justifyContent: 'center', height: 80 }, - headerCycleDay: { - flexDirection: 'row', - justifyContent: 'space-between', - }, navigationArrow: { - padding: 20 + padding: 20, + position: 'absolute' }, + navigationArrowLeft: { left: 0 }, + navigationArrowRight: { right: 0 }, menu: { backgroundColor: primaryColor, alignItems: 'center', @@ -453,7 +452,8 @@ export default StyleSheet.create({ headerDeleteButton: { paddingHorizontal: 20, paddingVertical: 20, - alignItems: 'flex-end' + position: 'absolute', + right: 0 }, infoButtonSymptomView: { position: 'absolute', From c6fd5e6db26dfaf409980a3f9b9834056407dcf0 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 25 May 2019 07:09:36 +0200 Subject: [PATCH 13/14] Make sure info icon is always well pressable --- components/cycle-day/symptoms/symptom-view.js | 6 ++++-- styles/index.js | 6 ++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/cycle-day/symptoms/symptom-view.js b/components/cycle-day/symptoms/symptom-view.js index ec8a5c5..158b2e6 100644 --- a/components/cycle-day/symptoms/symptom-view.js +++ b/components/cycle-day/symptoms/symptom-view.js @@ -83,8 +83,11 @@ export default class SymptomView extends Component { }} /> + { this.renderContent() } this.setState({showInfo: true})} + onPress={() => { + this.setState({showInfo: true}) + }} style={styles.infoButtonSymptomView} > - {this.renderContent()} { this.state.showInfo && Date: Sat, 25 May 2019 09:17:39 +0200 Subject: [PATCH 14/14] Make info modal only as big as it needs to be --- styles/index.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/styles/index.js b/styles/index.js index df5948b..e932564 100644 --- a/styles/index.js +++ b/styles/index.js @@ -295,24 +295,22 @@ export default StyleSheet.create({ }, infoPopUpWrapper: { position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0 + width: '100%', + height: '100%' }, infoPopUp: { backgroundColor: 'white', padding: 15, - position: 'absolute', - top: 20, - bottom: 20, - left: 20, - right: 20 + marginHorizontal: 20, + marginTop: 20, + maxHeight: '92%' }, dimmed: { + position: 'absolute', backgroundColor: 'black', opacity: 0.5, - flex: 1 + width: '100%', + height: '100%' }, infoSymptomClose: { alignItems: 'flex-end'