From 662858bd045452d6efeb5e1d0933ff98471334e1 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Tue, 25 Sep 2018 16:31:54 +0200 Subject: [PATCH 1/6] Add svg in react native format and add it to symtom box --- assets/mucus.js | 75 ++++++++++++++++++++++ components/cycle-day/cycle-day-overview.js | 25 ++++---- 2 files changed, 89 insertions(+), 11 deletions(-) create mode 100644 assets/mucus.js diff --git a/assets/mucus.js b/assets/mucus.js new file mode 100644 index 0000000..ba12a35 --- /dev/null +++ b/assets/mucus.js @@ -0,0 +1,75 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function MucusIcon(props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index 14219f2..2639e14 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/components/cycle-day/cycle-day-overview.js @@ -6,13 +6,14 @@ import { Dimensions } from 'react-native' import { LocalDate } from 'js-joda' +import Svg from 'react-native-svg' import Header from '../header' import { getOrCreateCycleDay } from '../../db' import cycleModule from '../../lib/cycle' -import Icon from 'react-native-vector-icons/FontAwesome' -import styles, { iconStyles } from '../../styles' +import styles from '../../styles' import * as labels from './labels/labels' import { AppText } from '../app-text' +import MucusIcon from '../../assets/mucus' const bleedingLabels = labels.bleeding const feelingLabels = labels.mucus.feeling.categories @@ -80,7 +81,11 @@ export default class CycleDayOverView extends Component { onPress={() => this.navigate('MucusEditView')} data={getLabel('mucus', cycleDay.mucus)} disabled={dateInFuture} - /> + > + + + + this.navigate('CervixEditView')} @@ -222,10 +227,6 @@ class SymptomBox extends Component { render() { const d = this.props.data const boxActive = d ? styles.symptomBoxActive : {} - const iconActive = d ? iconStyles.symptomBoxActive : {} - const iconStyle = Object.assign( - {}, iconStyles.symptomBox, iconActive, disabledStyle - ) const textActive = d ? styles.symptomTextActive : {} const disabledStyle = this.props.disabled ? styles.symptomInFuture : {} @@ -235,10 +236,12 @@ class SymptomBox extends Component { disabled={this.props.disabled} > - + + {this.props.children ? + React.cloneElement(this.props.children, {active: true}) + : null + } + {this.props.title} From aa925a0c569ac262191ca0923292e890574a6e8e Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Wed, 26 Sep 2018 10:59:45 +0200 Subject: [PATCH 2/6] Pass active state to icon --- components/cycle-day/cycle-day-overview.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index 2639e14..d435621 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/components/cycle-day/cycle-day-overview.js @@ -82,9 +82,7 @@ export default class CycleDayOverView extends Component { data={getLabel('mucus', cycleDay.mucus)} disabled={dateInFuture} > - - - + {this.props.children ? - React.cloneElement(this.props.children, {active: true}) + React.Children.map(this.props.children, child => { + return ( + + {React.cloneElement(child, { active: !!d })} + + ) + }) : null } From a56e6e999c098b7cd86ce3facb57d604dbc55bb1 Mon Sep 17 00:00:00 2001 From: emelko Date: Wed, 26 Sep 2018 14:29:06 +0200 Subject: [PATCH 3/6] Adding all the symptom icons, made with <3 by Paula --- assets/bleeding.js | 30 +++++++++++++++++++++++++ assets/cervix.js | 52 +++++++++++++++++++++++++++++++++++++++++++ assets/desire.js | 35 +++++++++++++++++++++++++++++ assets/note.js | 41 ++++++++++++++++++++++++++++++++++ assets/pain.js | 25 +++++++++++++++++++++ assets/sex.js | 52 +++++++++++++++++++++++++++++++++++++++++++ assets/temperature.js | 48 +++++++++++++++++++++++++++++++++++++++ 7 files changed, 283 insertions(+) create mode 100644 assets/bleeding.js create mode 100644 assets/cervix.js create mode 100644 assets/desire.js create mode 100644 assets/note.js create mode 100644 assets/pain.js create mode 100644 assets/sex.js create mode 100644 assets/temperature.js diff --git a/assets/bleeding.js b/assets/bleeding.js new file mode 100644 index 0000000..5070a3c --- /dev/null +++ b/assets/bleeding.js @@ -0,0 +1,30 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function BleedingIcon(props) { + return ( + + + + + + + + + + + + + ) +} diff --git a/assets/cervix.js b/assets/cervix.js new file mode 100644 index 0000000..0f07d53 --- /dev/null +++ b/assets/cervix.js @@ -0,0 +1,52 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function CervixIcon(props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/assets/desire.js b/assets/desire.js new file mode 100644 index 0000000..b23b710 --- /dev/null +++ b/assets/desire.js @@ -0,0 +1,35 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function DesireIcon(props) { + return ( + + + + + + + + + + + + + ) +} diff --git a/assets/note.js b/assets/note.js new file mode 100644 index 0000000..d1c834c --- /dev/null +++ b/assets/note.js @@ -0,0 +1,41 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function NoteIcon(props) { + return ( + + + + + + + + + + + + + ) +} diff --git a/assets/pain.js b/assets/pain.js new file mode 100644 index 0000000..01603a8 --- /dev/null +++ b/assets/pain.js @@ -0,0 +1,25 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function PainIcon(props) { + return ( + + + + + + + + ) +} diff --git a/assets/sex.js b/assets/sex.js new file mode 100644 index 0000000..8550704 --- /dev/null +++ b/assets/sex.js @@ -0,0 +1,52 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function SexIcon(props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/assets/temperature.js b/assets/temperature.js new file mode 100644 index 0000000..d24039c --- /dev/null +++ b/assets/temperature.js @@ -0,0 +1,48 @@ +import React from 'react' +import { G, Path } from 'react-native-svg' + +export default function TemperatureIcon(props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} From a95f9c05cc0ef0fcbce16506f08b230ec533605d Mon Sep 17 00:00:00 2001 From: emelko Date: Wed, 26 Sep 2018 14:29:27 +0200 Subject: [PATCH 4/6] Rendering icons on cycle day overview --- components/cycle-day/cycle-day-overview.js | 35 +++++++++++++++++----- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js index d435621..ffeb2c9 100644 --- a/components/cycle-day/cycle-day-overview.js +++ b/components/cycle-day/cycle-day-overview.js @@ -13,7 +13,14 @@ import cycleModule from '../../lib/cycle' import styles from '../../styles' import * as labels from './labels/labels' import { AppText } from '../app-text' +import BleedingIcon from '../../assets/bleeding' +import CervixIcon from '../../assets/cervix' +import DesireIcon from '../../assets/desire' import MucusIcon from '../../assets/mucus' +import NoteIcon from '../../assets/note' +import PainIcon from '../../assets/pain' +import SexIcon from '../../assets/sex' +import TemperatureIcon from '../../assets/temperature' const bleedingLabels = labels.bleeding const feelingLabels = labels.mucus.feeling.categories @@ -69,13 +76,17 @@ export default class CycleDayOverView extends Component { onPress={() => this.navigate('BleedingEditView')} data={getLabel('bleeding', cycleDay.bleeding)} disabled={dateInFuture} - /> + > + + this.navigate('TemperatureEditView')} data={getLabel('temperature', cycleDay.temperature)} disabled={dateInFuture} - /> + > + + this.navigate('MucusEditView')} @@ -89,30 +100,40 @@ export default class CycleDayOverView extends Component { onPress={() => this.navigate('CervixEditView')} data={getLabel('cervix', cycleDay.cervix)} disabled={dateInFuture} - /> + > + + this.navigate('DesireEditView')} data={getLabel('desire', cycleDay.desire)} disabled={dateInFuture} - /> + > + + this.navigate('SexEditView')} data={getLabel('sex', cycleDay.sex)} disabled={dateInFuture} - /> + > + + this.navigate('PainEditView')} data={getLabel('pain', cycleDay.pain)} disabled={dateInFuture} - /> + > + + this.navigate('NoteEditView')} data={getLabel('note', cycleDay.note)} - /> + > + + {/* this is just to make the last row adhere to the grid (and) because there are no pseudo properties in RN */} From e8c38efbc55d65837217d7acf8ecaa4714c02fe4 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Wed, 26 Sep 2018 14:51:10 +0200 Subject: [PATCH 5/6] Simplify active state --- assets/bleeding.js | 4 ++-- assets/cervix.js | 4 ++-- assets/desire.js | 4 ++-- assets/mucus.js | 4 ++-- assets/note.js | 4 ++-- assets/pain.js | 4 ++-- assets/sex.js | 4 ++-- assets/temperature.js | 4 ++-- components/cycle-day/cycle-day-overview.js | 6 ++++-- 9 files changed, 20 insertions(+), 18 deletions(-) diff --git a/assets/bleeding.js b/assets/bleeding.js index 5070a3c..d2f6772 100644 --- a/assets/bleeding.js +++ b/assets/bleeding.js @@ -1,9 +1,9 @@ import React from 'react' import { G, Path } from 'react-native-svg' -export default function BleedingIcon(props) { +export default function BleedingIcon() { return ( - + + + + + + + +