From f304fee2934833aeadf024f9920c7499265203d9 Mon Sep 17 00:00:00 2001 From: livi Date: Wed, 25 Oct 2023 21:27:14 +0200 Subject: [PATCH 1/5] Highlight weekend dates in chart --- components/chart/day-column.js | 5 +++++ components/chart/symptom-cell.js | 24 +++++++++++++++++++--- components/chart/temperature-column.js | 6 +++++- styles/colors.js | 28 +++++++++++++++++--------- 4 files changed, 49 insertions(+), 14 deletions(-) diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 7d9e0a0..b662d5e 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { TouchableOpacity } from 'react-native' +import moment from 'moment' import { getCycleDay } from '../../db' @@ -26,6 +27,8 @@ const DayColumn = ({ symptomRowSymptoms, xAxisHeight, }) => { + const momentDate = moment(dateString) + const isWeekend = momentDate.day() == 0 || momentDate.day() == 6 const cycleDayData = getCycleDay(dateString) let data = {} @@ -73,6 +76,7 @@ const DayColumn = ({ isVerticalLine={fhmAndLtl.drawFhmLine} data={data && data.temperature} columnHeight={columnHeight} + isWeekend={isWeekend} /> )} @@ -92,6 +96,7 @@ const DayColumn = ({ isSymptomDataComplete={ hasSymptomData && isSymptomDataComplete(symptom, dateString) } + isWeekend={isWeekend} height={symptomHeight} /> ) diff --git a/components/chart/symptom-cell.js b/components/chart/symptom-cell.js index 809478a..10d6cac 100644 --- a/components/chart/symptom-cell.js +++ b/components/chart/symptom-cell.js @@ -15,14 +15,31 @@ const SymptomCell = ({ symptom, symptomValue, isSymptomDataComplete, + isWeekend, }) => { const shouldDrawDot = symptomValue !== false + // Determine the background color based on isWeekend prop + const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white' const styleCell = index !== 0 - ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }] - : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder] + ? [ + styles.cell, + { + height, + width: CHART_COLUMN_WIDTH, + backgroundColor: weekendBackgroundColor, + }, + ] + : [ + styles.cell, + { + height, + width: CHART_COLUMN_WIDTH, + backgroundColor: weekendBackgroundColor, + }, + styles.topBorder, + ] let styleDot - if (shouldDrawDot) { const styleSymptom = Colors.iconColors[symptom] const symptomColor = styleSymptom.shades[symptomValue] @@ -47,6 +64,7 @@ SymptomCell.propTypes = { symptom: PropTypes.string, symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), isSymptomDataComplete: PropTypes.bool, + isWeekend: PropTypes.bool, } const styles = StyleSheet.create({ diff --git a/components/chart/temperature-column.js b/components/chart/temperature-column.js index e971a44..abe927b 100644 --- a/components/chart/temperature-column.js +++ b/components/chart/temperature-column.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { StyleSheet } from 'react-native' +import { Colors } from '../../styles' import { Surface, Path } from '@react-native-community/art' @@ -14,14 +15,16 @@ const TemperatureColumn = ({ isVerticalLine, data, columnHeight, + isWeekend, }) => { const x = CHART_STROKE_WIDTH / 2 + const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white' return ( @@ -63,6 +66,7 @@ TemperatureColumn.propTypes = { isVerticalLine: PropTypes.bool, data: PropTypes.object, columnHeight: PropTypes.number, + isWeekend: PropTypes.bool, } const styles = StyleSheet.create({ diff --git a/styles/colors.js b/styles/colors.js index 047a60f..f091d02 100644 --- a/styles/colors.js +++ b/styles/colors.js @@ -1,7 +1,14 @@ const redColor = '#c3000d' export const shadesOfRed = ['#e7999e', '#db666d', '#cf323d', '#c3000d'] // light to dark const violetColor = '#6a7b98' -const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', '#7689a9', violetColor] // light to dark +const shadesOfViolet = [ + '#e3e7ed', + '#c8cfdc', + '#acb8cb', + '#91a0ba', + '#7689a9', + violetColor, +] // light to dark const yellowColor = '#dbb40c' const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark const magentaColor = '#6f2565' @@ -16,6 +23,7 @@ export default { greyDark: '#555', grey: '#888', greyLight: '#CCC', + greyVeryLight: '#F4F4F4', orange: '#F38337', purple: '#3A2671', purpleLight: '#938EB2', @@ -23,37 +31,37 @@ export default { turquoise: '#CFECEA', turquoiseLight: '#E9F2ED', iconColors: { - 'bleeding': { + bleeding: { color: redColor, shades: shadesOfRed, }, - 'mucus': { + mucus: { color: violetColor, shades: shadesOfViolet, }, - 'cervix': { + cervix: { color: yellowColor, shades: shadesOfYellow, }, - 'sex': { + sex: { color: magentaColor, shades: shadesOfMagenta, }, - 'desire': { + desire: { color: pinkColor, shades: shadesOfPink, }, - 'pain': { + pain: { color: lightGreenColor, shades: [lightGreenColor], }, - 'mood': { + mood: { color: orangeColor, shades: [orangeColor], }, - 'note': { + note: { color: mintColor, shades: [mintColor], }, }, -} \ No newline at end of file +} From 668faf253469b00e5d0bc5a7913bab14e19ecf1c Mon Sep 17 00:00:00 2001 From: Liv Date: Fri, 10 Nov 2023 13:18:17 +0100 Subject: [PATCH 2/5] Clean up backgroundColor variable --- components/chart/symptom-cell.js | 7 +++---- components/chart/temperature-column.js | 10 ++-------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/components/chart/symptom-cell.js b/components/chart/symptom-cell.js index 10d6cac..c04a128 100644 --- a/components/chart/symptom-cell.js +++ b/components/chart/symptom-cell.js @@ -19,7 +19,7 @@ const SymptomCell = ({ }) => { const shouldDrawDot = symptomValue !== false // Determine the background color based on isWeekend prop - const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white' + const backgroundColor = isWeekend ? Colors.greyVeryLight : 'white' const styleCell = index !== 0 ? [ @@ -27,7 +27,7 @@ const SymptomCell = ({ { height, width: CHART_COLUMN_WIDTH, - backgroundColor: weekendBackgroundColor, + backgroundColor: backgroundColor, }, ] : [ @@ -35,7 +35,7 @@ const SymptomCell = ({ { height, width: CHART_COLUMN_WIDTH, - backgroundColor: weekendBackgroundColor, + backgroundColor: backgroundColor, }, styles.topBorder, ] @@ -69,7 +69,6 @@ SymptomCell.propTypes = { const styles = StyleSheet.create({ cell: { - backgroundColor: 'white', borderBottomColor: Colors.grey, borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH, borderLeftColor: Colors.grey, diff --git a/components/chart/temperature-column.js b/components/chart/temperature-column.js index abe927b..0396d0f 100644 --- a/components/chart/temperature-column.js +++ b/components/chart/temperature-column.js @@ -19,12 +19,12 @@ const TemperatureColumn = ({ }) => { const x = CHART_STROKE_WIDTH / 2 - const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white' + const backgroundColor = isWeekend ? Colors.greyVeryLight : 'white' return ( @@ -69,10 +69,4 @@ TemperatureColumn.propTypes = { isWeekend: PropTypes.bool, } -const styles = StyleSheet.create({ - container: { - backgroundColor: 'white', - }, -}) - export default TemperatureColumn From f730b617cb63bcff3217faf5c9e9cae002d888b8 Mon Sep 17 00:00:00 2001 From: bl00dymarie Date: Mon, 13 Nov 2023 13:04:34 +0100 Subject: [PATCH 3/5] Remove no-unused-var error --- components/chart/temperature-column.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/chart/temperature-column.js b/components/chart/temperature-column.js index 0396d0f..5fc92b6 100644 --- a/components/chart/temperature-column.js +++ b/components/chart/temperature-column.js @@ -1,6 +1,5 @@ import React from 'react' import PropTypes from 'prop-types' -import { StyleSheet } from 'react-native' import { Colors } from '../../styles' import { Surface, Path } from '@react-native-community/art' From f6944328fbee4686c884dee1c8c958f87cacf8b4 Mon Sep 17 00:00:00 2001 From: bl00dymarie Date: Tue, 14 Nov 2023 13:06:58 +0100 Subject: [PATCH 4/5] Fix: Middle chart legend improved; Row height halfed, elements aligned, fontsize partially decreased --- components/chart/chart-legend.js | 15 ++++++++++++--- components/chart/cycle-day-label.js | 27 ++++++++++++++++++++------- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/components/chart/chart-legend.js b/components/chart/chart-legend.js index 76d8014..9c59875 100644 --- a/components/chart/chart-legend.js +++ b/components/chart/chart-legend.js @@ -4,15 +4,19 @@ import { StyleSheet, View } from 'react-native' import AppText from '../common/app-text' -import { Typography } from '../../styles' +import { Sizes, Typography } from '../../styles' import { CHART_YAXIS_WIDTH } from '../../config' import { shared as labels } from '../../i18n/en/labels' const ChartLegend = ({ height }) => { return ( - # - {labels.date} + + # + + + {labels.date} + ) } @@ -27,8 +31,13 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', width: CHART_YAXIS_WIDTH, }, + singleLabelContainer: { + justifyContent: 'space-around', + alignItems: 'center', + }, text: { ...Typography.label, + fontSize: Sizes.footnote, }, textBold: { ...Typography.labelBold, diff --git a/components/chart/cycle-day-label.js b/components/chart/cycle-day-label.js index 45e0f2a..09c59ca 100644 --- a/components/chart/cycle-day-label.js +++ b/components/chart/cycle-day-label.js @@ -19,11 +19,20 @@ const CycleDayLabel = ({ height, date }) => { return ( - {cycleDayLabel} - - - {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth} - + + {cycleDayLabel} + + + + {isFirstDayOfMonth && ( + + {momentDate.format('MMM')} + + )} + + {!isFirstDayOfMonth && ( + {dayOfMonth} + )} {!isFirstDayOfMonth && ( {getOrdinalSuffix(dayOfMonth)} @@ -45,17 +54,21 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', left: 4, }, - text: { + textSmall: { ...Typography.label, fontSize: Sizes.small, }, + textFootnote: { + ...Typography.label, + fontSize: Sizes.footnote, + }, textBold: { ...Typography.labelBold, }, textLight: { ...Typography.labelLight, }, - dateLabel: { + labelRow: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', From 5401789c46f4a02915ab900ef284581be420451c Mon Sep 17 00:00:00 2001 From: bl00dymarie Date: Tue, 14 Nov 2023 13:08:11 +0100 Subject: [PATCH 5/5] Release: v1.2311.14 --- CHANGELOG.md | 2 +- android/app/build.gradle | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e966aff..5d8e546 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ All notable changes to this project will be documented in this file. -## v1.2311.10 +## v1.2311.14 ### Changes diff --git a/android/app/build.gradle b/android/app/build.gradle index 33a1159..aaecb89 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -134,8 +134,8 @@ android { applicationId "com.drip" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion - versionCode 21 - versionName "1.2310.31" + versionCode 25 + versionName "1.2311.14" ndk { abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64" } diff --git a/package.json b/package.json index 1e44e38..ab3810e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "drip.", - "version": "1.2310.31", + "version": "1.2311.14", "contributors": [ "Julia Friesel ", "Marie Kochsiek",