[RNMobile] RangeCell styling refactor #18157
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .borderStyle { | ||
| border-bottom-width: 1px; | ||
| } | ||
|
|
||
| .isSelected { | ||
| border-bottom-width: 2px; | ||
| border-color: $blue-wordpress; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .isSelected { | ||
| border-width: 2px; | ||
| border-color: $blue-wordpress; | ||
| } | ||
|
|
||
| .borderStyle { | ||
| border-width: 1px; | ||
| border-radius: 4px; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,21 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider, View } from 'react-native'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { _x, __, sprintf } from '@wordpress/i18n'; | ||
| import { Component } from '@wordpress/element'; | ||
| import { withPreferredColorScheme } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Cell from './cell'; | ||
| import styles from './range-cell.scss'; | ||
| import borderStyles from './borderStyles.scss'; | ||
|
|
||
| class BottomSheetRangeCell extends Component { | ||
| constructor( props ) { | ||
|
|
@@ -115,9 +117,11 @@ class BottomSheetRangeCell extends Component { | |
| maximumValue = 10, | ||
| disabled, | ||
| step = 1, | ||
| preferredColorScheme, | ||
| minimumTrackTintColor = preferredColorScheme === 'light' ? '#00669b' : '#5198d9', | ||
| maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', | ||
| thumbTintColor = Platform.OS === 'android' && '#00669b', | ||
| getStylesFromColorScheme, | ||
| ...cellProps | ||
| } = this.props; | ||
|
|
||
|
|
@@ -130,49 +134,60 @@ class BottomSheetRangeCell extends Component { | |
| cellProps.label, value | ||
| ); | ||
|
|
||
| const defaultSliderStyle = getStylesFromColorScheme( styles.sliderTextInput, styles.sliderDarkTextInput ); | ||
|
|
||
| return ( | ||
| <Cell | ||
| { ...cellProps } | ||
| cellContainerStyle={ styles.cellContainerStyles } | ||
| cellRowContainerStyle={ styles.cellRowStyles } | ||
| accessibilityRole={ 'none' } | ||
| editable={ false } | ||
| accessible={ accessible } | ||
| onPress={ this.onCellPress } | ||
| accessibilityLabel={ accessibilityLabel } | ||
| allowReset={ this.handleReset } | ||
|
There was a problem hiding this comment. It's interesting that the root Just by curiosity, I added
There was a problem hiding this comment.
That's correct, I don't think there are any other planned components at the moment that will need an explicit There was a problem hiding this comment. One more note: if we do end up adding There was a problem hiding this comment. Currently we don't have many There was a problem hiding this comment.
|
||
| accessibilityHint={ | ||
| /* translators: accessibility text (hint for focusing a slider) */ | ||
| __( 'Double tap to change the value using slider' ) | ||
| } | ||
| > | ||
| <View style={ styles.container }> | ||
| <Slider | ||
| value={ this.validateInput( sliderValue ) } | ||
| defaultValue={ defaultValue } | ||
| disabled={ disabled } | ||
| step={ step } | ||
| minimumValue={ minimumValue } | ||
| maximumValue={ maximumValue } | ||
| minimumTrackTintColor={ minimumTrackTintColor } | ||
| maximumTrackTintColor={ maximumTrackTintColor } | ||
| thumbTintColor={ thumbTintColor } | ||
| onValueChange={ this.handleChange } | ||
| onSlidingComplete={ this.handleValueSave } | ||
| ref={ ( slider ) => { | ||
| this.sliderRef = slider; | ||
| } } | ||
| style={ styles.slider } | ||
| accessibilityRole={ 'adjustable' } | ||
| /> | ||
| <TextInput | ||
| style={ [ | ||
| defaultSliderStyle, | ||
| borderStyles.borderStyle, | ||
| hasFocus && borderStyles.isSelected, | ||
| ] } | ||
| onChangeText={ this.handleChange } | ||
| onFocus={ this.handleToggleFocus } | ||
| onBlur={ this.handleToggleFocus } | ||
| keyboardType="number-pad" | ||
| returnKeyType="done" | ||
| value={ `${ sliderValue }` } | ||
| /> | ||
| </View> | ||
| </Cell> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withPreferredColorScheme( BottomSheetRangeCell ); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@etoledom If we remove
numberOfLines={ 1 }we can have a not truncated label and it will look like:wdyt?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've also checked how it will affect other settings:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks better than cropping!
Let's go with it if it does't affect other instances of cells and controls.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Again, better than cropping. Looks good to me :)