From c22bff5948d68580a14f570222cd96dcb38a07f1 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Mon, 18 Mar 2019 23:17:55 +0100 Subject: [PATCH] temperature screen styling update --- components/app-text-input.js | 25 +++ .../cycle-day/symptoms/symptom-section.js | 8 +- components/cycle-day/symptoms/temperature.js | 150 +++++++++--------- components/framed-segment.js | 2 +- components/settings/shared/password-field.js | 27 ++-- i18n/en/cycle-day.js | 2 +- styles/index.js | 19 ++- 7 files changed, 133 insertions(+), 100 deletions(-) create mode 100644 components/app-text-input.js diff --git a/components/app-text-input.js b/components/app-text-input.js new file mode 100644 index 0000000..8c9d273 --- /dev/null +++ b/components/app-text-input.js @@ -0,0 +1,25 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { TextInput } from 'react-native' +import styles from '../styles' + +export default function AppTextInput({ style, ...props }) { + return ( + + ) +} + +AppTextInput.propTypes = { + secureTextEntry: PropTypes.bool +} + +AppTextInput.defaultProps = { + style: [] +} diff --git a/components/cycle-day/symptoms/symptom-section.js b/components/cycle-day/symptoms/symptom-section.js index 9055062..477ba86 100644 --- a/components/cycle-day/symptoms/symptom-section.js +++ b/components/cycle-day/symptoms/symptom-section.js @@ -20,9 +20,11 @@ export default class SymptomSection extends Component { flex={1} alignItems={p.inline ? 'center' : null} > - - {p.explainer} - + { p.explainer && ( + + {p.explainer} + + )} {p.children} diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js index ae4634c..228491b 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -1,7 +1,6 @@ import React, { Component } from 'react' import { View, - TextInput, Switch, Keyboard, Alert, @@ -18,6 +17,8 @@ import { scaleObservable } from '../../../local-storage' import { shared as sharedLabels } from '../../../i18n/en/labels' import ActionButtonFooter from './action-button-footer' import config from '../../../config' +import AppTextInput from '../../app-text-input' +import AppText from '../../app-text' import SymptomSection from './symptom-section' const minutes = ChronoUnit.MINUTES @@ -27,7 +28,6 @@ export default class Temp extends Component { super(props) const cycleDay = props.cycleDay this.temperature = cycleDay && cycleDay.temperature - this.makeActionButtons = props.makeActionButtons const temp = this.temperature @@ -66,14 +66,12 @@ export default class Temp extends Component { checkRangeAndSave = () => { const value = Number(this.state.temperature) - - const absolute = { - min: config.temperatureScale.min, - max: config.temperatureScale.max - } + const { min, max } = config.temperatureScale + const range = { min, max } const scale = scaleObservable.value let warningMsg - if (value < absolute.min || value > absolute.max) { + + if (value < range.min || value > range.max) { warningMsg = labels.outOfAbsoluteRangeWarning } else if (value < scale.min || value > scale.max) { warningMsg = labels.outOfRangeWarning @@ -91,36 +89,54 @@ export default class Temp extends Component { } else { this.saveTemperature() } - } + setTemperature = (temperature) => { + if (isNaN(Number(temperature))) return + this.setState({ temperature, isSuggestion: false }) + } + + setNote = (note) => { + this.setState({ note }) + } + + showTimePicker = () => { + Keyboard.dismiss() + this.setState({ isTimePickerVisible: true }) + } render() { + const inputStyle = [styles.temperatureTextInput] + if (this.state.isSuggestion) { + inputStyle.push(styles.temperatureTextInputSuggestion) + } return ( - - - + + this.setState(val)} - isSuggestion={this.state.isSuggestion} + onChangeText={this.setTemperature} + keyboardType='numeric' + onBlur={this.checkRange} /> - - - { - Keyboard.dismiss() - this.setState({ isTimePickerVisible: true }) - }} + °C + + + + + this.setState({ isTimePickerVisible: false })} /> - - - { - this.setState({ note: val }) - }} - /> - - - { - this.setState({ exclude: val }) - }} - value={this.state.exclude} - /> - - + + + + + + + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + { - if (isNaN(Number(val))) return - this.props.setState({ temperature: val, isSuggestion: false }) - }} - keyboardType='numeric' - value={this.props.value} - onBlur={this.checkRange} - autoFocus={true} - /> - ) - } -} - function isInvalidTime(timeString) { try { LocalTime.parse(timeString) diff --git a/components/framed-segment.js b/components/framed-segment.js index 5d2c68f..800c564 100644 --- a/components/framed-segment.js +++ b/components/framed-segment.js @@ -5,7 +5,7 @@ import { View } from 'react-native' import AppText from './app-text' import styles from '../styles' -const FramedSegment = ({ children, ...props }) => { +const FramedSegment = ({children, ...props}) => { const style = [styles.framedSegment, props.style] if (props.last) style.push(styles.framedSegmentLast) return ( diff --git a/components/settings/shared/password-field.js b/components/settings/shared/password-field.js index a62b435..7937b66 100644 --- a/components/settings/shared/password-field.js +++ b/components/settings/shared/password-field.js @@ -1,19 +1,22 @@ import React from 'react' -import { TextInput } from 'react-native' -import styles, {secondaryColor} from '../../../styles' +import PropTypes from 'prop-types' +import AppTextInput from '../../app-text-input' + +import styles from '../../../styles' export default function PasswordField(props) { return ( - ) } + +PasswordField.propTypes = { + placeholder: PropTypes.string, + value: PropTypes.string, + onChangeText: PropTypes.func, + autoFocus: PropTypes.bool +} diff --git a/i18n/en/cycle-day.js b/i18n/en/cycle-day.js index 79b8a0e..f399634 100644 --- a/i18n/en/cycle-day.js +++ b/i18n/en/cycle-day.js @@ -107,7 +107,7 @@ export const temperature = { outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.', saveAnyway: 'Save anyway', temperature: { - header: "Temperature (°C)", + header: "Temperature", explainer: 'Take your temperature right after waking up, before getting out of bed' }, time: "Time", diff --git a/styles/index.js b/styles/index.js index 00ebca0..2ef7ebe 100644 --- a/styles/index.js +++ b/styles/index.js @@ -269,7 +269,8 @@ export default StyleSheet.create({ temperatureTextInput: { fontSize: 20, color: 'black', - textAlign: 'center' + textAlign: 'center', + width: '30%' }, temperatureTextInputSuggestion: { color: '#939393' @@ -299,6 +300,10 @@ export default StyleSheet.create({ fontWeight: 'bold', fontFamily: textFontBold }, + framedSegmentInlineChildren: { + flexDirection: 'row', + alignItems: 'center' + }, settingsButton: { padding: 10, alignItems: 'center', @@ -383,10 +388,16 @@ export default StyleSheet.create({ marginTop: 1 }, passwordField: { - padding: 10, - marginTop: 10, marginHorizontal: 10, - backgroundColor: 'white' + marginTop: 10 + }, + textInputField: { + padding: 10, + marginVertical: 10, + backgroundColor: 'white', + borderColor: secondaryColor, + borderStyle: 'solid', + borderWidth: 1, }, passwordPromptPage: { padding: 30,