From 7dc594c193ffb8f69140ec09bb4f0e9826fe390e Mon Sep 17 00:00:00 2001 From: Kyle Herock Date: Tue, 30 May 2017 23:37:56 -0400 Subject: [PATCH] Improve Android button appearances (closes #849, #896) This implements proper behavior for Material Design flat buttons and icon toggles - these buttons ripple as soon as the touch starts. Conveniently, React Native supports masking these ripples to the parent View's border radius. This also fixes a breakage introduced in #808 that closes #896. --- index.d.ts | 19 +- src/basic/Button.js | 88 +++- src/theme/components/Button.js | 796 ++++++++++++++--------------- src/theme/components/Header.js | 54 +- src/theme/variables/commonColor.js | 78 +-- src/theme/variables/material.js | 75 +-- src/theme/variables/platform.js | 83 +-- 7 files changed, 606 insertions(+), 587 deletions(-) diff --git a/index.d.ts b/index.d.ts index b5c0140336..4b48ea9c61 100644 --- a/index.d.ts +++ b/index.d.ts @@ -117,7 +117,7 @@ declare module 'native-base' { * see Widget Title.js */ interface Title { - style?: ReactNative.ViewStyle + style?: ReactNative.TextStyle & ReactNative.ViewStyle } /** * see Widget Subtitle/index.js @@ -149,7 +149,7 @@ declare module 'native-base' { /** * see Widget Button.js */ - interface Button extends ReactNative.TouchableOpacityProperties,BsStyle { + interface Button extends ReactNative.TouchableNativeFeedbackProperties, ReactNative.TouchableOpacityProperties, BsStyle { /** * Defines button style */ @@ -173,6 +173,10 @@ declare module 'native-base' { // warning?: boolean, //info?: boolean, color?: string, + /** + * The ripple color used if `background` from TouchableNativeFeedback isn't explicitly given + */ + androidRippleColor?: string, /** * Applies outline button style. */ @@ -189,6 +193,11 @@ declare module 'native-base' { * For small size button */ small?: boolean, + /** + * Renders the the button as a square with a 50% border radius. This is typically used + * in conjunction with `transparent`. + */ + iconButton?: boolean, /** * Used for Icon alignment. * Aligns icon to the left in button. @@ -206,9 +215,9 @@ declare module 'native-base' { disabled?: boolean, active?: boolean, inputButton?: boolean, - full?:boolean, - light?:boolean, - dark?:boolean + full?: boolean, + light?: boolean, + dark?: boolean, } /** * see Widget List.js diff --git a/src/basic/Button.js b/src/basic/Button.js index 95102528ba..303ea38eee 100644 --- a/src/basic/Button.js +++ b/src/basic/Button.js @@ -2,7 +2,8 @@ import React, { Component } from 'react'; -import { TouchableOpacity, Platform, View, TouchableNativeFeedback } from 'react-native'; +import { Platform, StyleSheet, TouchableNativeFeedback, TouchableOpacity, View } from 'react-native'; +import color from 'color'; import { connectStyle } from 'native-base-shoutem-theme'; import variables from './../theme/variables/platform'; import { Text } from './Text'; @@ -11,48 +12,85 @@ import computeProps from '../Utils/computeProps'; import mapPropsToStyleNames from '../Utils/mapPropsToStyleNames'; class Button extends Component { - - getInitialStyle() { - return { - borderedBtn: { - borderWidth: (this.props.bordered) ? 1 : undefined, - borderRadius: (this.props.rounded && this.props.bordered) ? variables.borderRadiusLarge : 2, - }, - }; - } + static contextTypes = { + theme: React.PropTypes.object, + }; prepareRootProps() { + const themeStyle = (this.context.theme) ? this.context.theme['@@shoutem.theme/themeStyle'] : { variables }; + const defaultProps = { - style: this.getInitialStyle().borderedBtn, + style: StyleSheet.flatten(this.props.style), + androidRippleColor: themeStyle.variables.androidRippleColorDark, }; + if (this.props.transparent) { + if (defaultProps.style.backgroundColor) { + defaultProps.androidRippleColor = color(defaultProps.style.backgroundColor).alpha(0.26).toString(); + } + defaultProps.style.backgroundColor = 'transparent'; + } + // Maintain a 3:1 contrast ratio, preferring dark backgrounds + else if (color(defaultProps.style.backgroundColor || '#fff').lightness() < 100 / 3) { + defaultProps.androidRippleColor = variables.androidRippleColor; + } + return computeProps(this.props, defaultProps); } render() { - const children = Platform.OS === 'ios' + const themeStyle = (this.context.theme) ? this.context.theme['@@shoutem.theme/themeStyle'] : { variables }; + + const children = (Platform.OS === 'ios') ? this.props.children - : React.Children.map(this.props.children, child => child.type === Text ? React.cloneElement(child, { uppercase: true, ...child.props }) : child); - if (Platform.OS==='ios' || variables.androidRipple===false || Platform['Version'] <= 21) { + : React.Children.map(this.props.children, child => child && child.type === Text ? React.cloneElement(child, { uppercase: true, ...child.props }) : child); + const rootProps = this.prepareRootProps(); + const outerStyle = {}; + const innerStyle = { flex: 1 }; + for (const prop in rootProps.style) { + if (prop.match(/^border.*Radius$/)) { + outerStyle[prop] = innerStyle[prop] = rootProps.style[prop]; + } + else if (prop.match(/^(padding.*|flexDirection|flexWrap|alignContent|alignItems|justifyContent)$/)) { + innerStyle[prop] = rootProps.style[prop]; + } + else { + outerStyle[prop] = rootProps.style[prop]; + } + }; + + if (Platform.OS === 'ios' || themeStyle.variables.androidRipple === false || Platform['Version'] <= 21) { return ( this._root = c} - activeOpacity={(this.props.activeOpacity) ? this.props.activeOpacity : 0.5} + activeOpacity={0.5} + {...rootProps} + style={outerStyle} > - {children} + + {children} + ); } else { - return( - this._root = c} - onPress={this.props.onPress} - background={(this.props.androidRippleColor) ? TouchableNativeFeedback.Ripple(this.props.androidRippleColor) : TouchableNativeFeedback.Ripple(variables.androidRippleColor)} - {...this.prepareRootProps()}> - - {children} + return ( + + this._root = c} + background={TouchableNativeFeedback.Ripple(rootProps.androidRippleColor, rootProps.transparent)} + {...rootProps} + > + + {children} - + + ); } } diff --git a/src/theme/components/Button.js b/src/theme/components/Button.js index 8af9af529a..678d691bba 100644 --- a/src/theme/components/Button.js +++ b/src/theme/components/Button.js @@ -7,284 +7,185 @@ export default (variables = variable) => { const platform = variables.platform; const buttonTheme = { - '.disabled': { - backgroundColor: variables.btnDisabledBg, - }, - '.bordered': { - '.dark': { - 'NativeBase.Text': { - color: '#000', - }, - 'NativeBase.Icon': { - color: '#000', - }, - 'NativeBase.IconNB': { - color: '#000', - }, - backgroundColor: 'transparent', - borderColor: '#000', - borderWidth: variables.borderWidth * 2, - }, - '.light': { - 'NativeBase.Text': { - color: '#f4f4f4', - }, - 'NativeBase.Icon': { - color: '#f4f4f4', - }, - 'NativeBase.IconNB': { - color: '#f4f4f4', - }, - backgroundColor: 'transparent', - borderColor: '#f4f4f4', - borderWidth: variables.borderWidth * 2, - }, - '.primary': { - 'NativeBase.Text': { - color: variables.btnPrimaryBg, - }, - 'NativeBase.Icon': { - color: variables.btnPrimaryBg, - }, - 'NativeBase.IconNB': { - color: variables.btnPrimaryBg, - }, - backgroundColor: 'transparent', - borderColor: variables.btnPrimaryBg, - borderWidth: variables.borderWidth * 2, - }, - '.success': { - 'NativeBase.Text': { - color: variables.btnSuccessBg, - }, - 'NativeBase.Icon': { - color: variables.btnSuccessBg, - }, - 'NativeBase.IconNB': { - color: variables.btnSuccessBg, - }, - backgroundColor: 'transparent', - borderColor: variables.btnSuccessBg, - borderWidth: variables.borderWidth * 2, - }, - '.info': { - 'NativeBase.Text': { - color: variables.btnInfoBg, - }, - 'NativeBase.Icon': { - color: variables.btnInfoBg, - }, - 'NativeBase.IconNB': { - color: variables.btnInfoBg, - }, - backgroundColor: 'transparent', - borderColor: variables.btnInfoBg, - borderWidth: variables.borderWidth * 2, - }, - '.warning': { - 'NativeBase.Text': { - color: variables.btnWarningBg, - }, - 'NativeBase.Icon': { - color: variables.btnWarningBg, - }, - 'NativeBase.IconNB': { - color: variables.btnWarningBg, - }, - backgroundColor: 'transparent', - borderColor: variables.btnWarningBg, - borderWidth: variables.borderWidth * 2, - }, - '.danger': { - 'NativeBase.Text': { - color: variables.btnDangerBg, - }, - 'NativeBase.Icon': { - color: variables.btnDangerBg, - }, - 'NativeBase.IconNB': { - color: variables.btnDangerBg, - }, - backgroundColor: 'transparent', - borderColor: variables.btnDangerBg, - borderWidth: variables.borderWidth * 2, - }, - '.disabled': { - backgroundColor: null, - borderColor: variables.btnDisabledBg, - borderWidth: variables.borderWidth * 2, - 'NativeBase.Text': { - color: variables.btnDisabledBg, - }, - }, + '.disabled': { + backgroundColor: variables.btnDisabledBg, + }, + '.bordered': { + '.dark': { 'NativeBase.Text': { - color: variables.btnPrimaryBg, + color: '#000', }, 'NativeBase.Icon': { - color: variables.btnPrimaryBg, + color: '#000', }, 'NativeBase.IconNB': { - color: variables.btnPrimaryBg, + color: '#000', }, - borderWidth: variables.borderWidth * 2, - elevation: null, - shadowColor: null, - shadowOffset: null, - shadowOpacity: null, - shadowRadius: null, backgroundColor: 'transparent', - }, - - '.dark': { - '.bordered': { - 'NativeBase.Text': { - color: '#000', - }, - 'NativeBase.Icon': { - color: '#000', - }, - 'NativeBase.IconNB': { - color: '#000', - }, - }, - backgroundColor: '#000', + borderColor: '#000', + borderWidth: variables.borderWidth * 2, }, '.light': { - '.transparent': { - 'NativeBase.Text': { - color: '#f4f4f4', - }, - 'NativeBase.Icon': { - color: '#f4f4f4', - }, - 'NativeBase.IconNB': { - color: '#f4f4f4', - }, - backgroundColor: null, - }, - '.bordered': { - 'NativeBase.Text': { - color: '#f4f4f4', - }, - 'NativeBase.Icon': { - color: '#f4f4f4', - }, - 'NativeBase.IconNB': { - color: '#f4f4f4', - }, - }, 'NativeBase.Text': { - color: '#000', - }, - 'NativeBase.Icon': { - color: '#000', - }, - 'NativeBase.IconNB': { - color: '#000', - }, - backgroundColor: '#f4f4f4', + color: '#f4f4f4', + }, + 'NativeBase.Icon': { + color: '#f4f4f4', + }, + 'NativeBase.IconNB': { + color: '#f4f4f4', + }, + backgroundColor: 'transparent', + borderColor: '#f4f4f4', + borderWidth: variables.borderWidth * 2, }, - '.primary': { - '.bordered': { - 'NativeBase.Text': { - color: variables.btnPrimaryBg, - }, - 'NativeBase.Icon': { - color: variables.btnPrimaryBg, - }, - 'NativeBase.IconNB': { - color: variables.btnPrimaryBg, - }, - }, - backgroundColor: variables.btnPrimaryBg, + 'NativeBase.Text': { + color: variables.btnPrimaryBg, + }, + 'NativeBase.Icon': { + color: variables.btnPrimaryBg, + }, + 'NativeBase.IconNB': { + color: variables.btnPrimaryBg, + }, + backgroundColor: 'transparent', + borderColor: variables.btnPrimaryBg, + borderWidth: variables.borderWidth * 2, }, - '.success': { - '.bordered': { - 'NativeBase.Text': { - color: variables.btnSuccessBg, - }, - 'NativeBase.Icon': { - color: variables.btnSuccessBg, - }, - 'NativeBase.IconNB': { - color: variables.btnSuccessBg, - }, - }, - backgroundColor: variables.btnSuccessBg, + 'NativeBase.Text': { + color: variables.btnSuccessBg, + }, + 'NativeBase.Icon': { + color: variables.btnSuccessBg, + }, + 'NativeBase.IconNB': { + color: variables.btnSuccessBg, + }, + backgroundColor: 'transparent', + borderColor: variables.btnSuccessBg, + borderWidth: variables.borderWidth * 2, }, - '.info': { - '.bordered': { - 'NativeBase.Text': { - color: variables.btnInfoBg, - }, - 'NativeBase.Icon': { - color: variables.btnInfoBg, - }, - 'NativeBase.IconNB': { - color: variables.btnInfoBg, - }, - }, - backgroundColor: variables.btnInfoBg, + 'NativeBase.Text': { + color: variables.btnInfoBg, + }, + 'NativeBase.Icon': { + color: variables.btnInfoBg, + }, + 'NativeBase.IconNB': { + color: variables.btnInfoBg, + }, + backgroundColor: 'transparent', + borderColor: variables.btnInfoBg, + borderWidth: variables.borderWidth * 2, }, - '.warning': { - '.bordered': { - 'NativeBase.Text': { - color: variables.btnWarningBg, - }, - 'NativeBase.Icon': { - color: variables.btnWarningBg, - }, - 'NativeBase.IconNB': { - color: variables.btnWarningBg, - }, - }, - backgroundColor: variables.btnWarningBg, + 'NativeBase.Text': { + color: variables.btnWarningBg, + }, + 'NativeBase.Icon': { + color: variables.btnWarningBg, + }, + 'NativeBase.IconNB': { + color: variables.btnWarningBg, + }, + backgroundColor: 'transparent', + borderColor: variables.btnWarningBg, + borderWidth: variables.borderWidth * 2, }, - '.danger': { - '.bordered': { - 'NativeBase.Text': { - color: variables.btnDangerBg, - }, - 'NativeBase.Icon': { - color: variables.btnDangerBg, - }, - 'NativeBase.IconNB': { - color: variables.btnDangerBg, - }, - }, - backgroundColor: variables.btnDangerBg, + 'NativeBase.Text': { + color: variables.btnDangerBg, + }, + 'NativeBase.Icon': { + color: variables.btnDangerBg, + }, + 'NativeBase.IconNB': { + color: variables.btnDangerBg, + }, + backgroundColor: 'transparent', + borderColor: variables.btnDangerBg, + borderWidth: variables.borderWidth * 2, }, - - '.block': { - justifyContent: 'center', - alignSelf: 'stretch', + '.disabled': { + backgroundColor: null, + borderColor: variables.btnDisabledBg, + borderWidth: variables.borderWidth * 2, + 'NativeBase.Text': { + color: variables.btnDisabledBg, + }, }, - - '.full': { - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 + 'NativeBase.Text': { + color: variables.btnPrimaryBg, }, - - '.rounded': { - paddingHorizontal: variables.buttonPadding + 20, - borderRadius: variables.borderRadiusLarge, + 'NativeBase.Icon': { + color: variables.btnPrimaryBg, }, + 'NativeBase.IconNB': { + color: variables.btnPrimaryBg, + }, + borderWidth: variables.borderWidth, + elevation: null, + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + shadowRadius: null, + backgroundColor: 'transparent', + }, - + '.dark': { + '.bordered': { + 'NativeBase.Text': { + color: '#000', + }, + 'NativeBase.Icon': { + color: '#000', + }, + 'NativeBase.IconNB': { + color: '#000', + }, + }, + backgroundColor: '#000', + }, + '.light': { '.transparent': { - backgroundColor: 'transparent', - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, + 'NativeBase.Text': { + color: '#f4f4f4', + }, + 'NativeBase.Icon': { + color: '#f4f4f4', + }, + 'NativeBase.IconNB': { + color: '#f4f4f4', + }, + }, + '.bordered': { + 'NativeBase.Text': { + color: '#f4f4f4', + }, + 'NativeBase.Icon': { + color: '#f4f4f4', + }, + 'NativeBase.IconNB': { + color: '#f4f4f4', + }, + }, + 'NativeBase.Text': { + color: '#000', + }, + 'NativeBase.Icon': { + color: '#000', + }, + 'NativeBase.IconNB': { + color: '#000', + }, + backgroundColor: '#f4f4f4', + }, + '.primary': { + '.bordered': { 'NativeBase.Text': { color: variables.btnPrimaryBg, }, @@ -294,198 +195,295 @@ export default (variables = variable) => { 'NativeBase.IconNB': { color: variables.btnPrimaryBg, }, - '.dark': { - 'NativeBase.Text': { - color: '#000', - }, - 'NativeBase.IconNB': { - color: '#000', - }, - 'NativeBase.Icon': { - color: '#000', - }, - backgroundColor: null, - }, - '.danger': { - 'NativeBase.Text': { - color: variables.btnDangerBg, - }, - 'NativeBase.IconNB': { - color: variables.btnDangerBg, - }, - 'NativeBase.Icon': { - color: variables.btnDangerBg, - }, - backgroundColor: null, - }, - '.warning': { - 'NativeBase.Text': { - color: variables.btnWarningBg, - }, - 'NativeBase.IconNB': { - color: variables.btnWarningBg, - }, - 'NativeBase.Icon': { - color: variables.btnWarningBg, - }, - backgroundColor: null, - }, - '.info': { - 'NativeBase.Text': { - color: variables.btnInfoBg, - }, - 'NativeBase.IconNB': { - color: variables.btnInfoBg, - }, - 'NativeBase.Icon': { - color: variables.btnInfoBg, - }, - backgroundColor: null, - }, - '.primary': { - 'NativeBase.Text': { - color: variables.btnPrimaryBg, - }, - 'NativeBase.IconNB': { - color: variables.btnPrimaryBg, - }, - 'NativeBase.Icon': { - color: variables.btnPrimaryBg, - }, - backgroundColor: null, - }, - '.success': { - 'NativeBase.Text': { - color: variables.btnSuccessBg, - }, - 'NativeBase.IconNB': { - color: variables.btnSuccessBg, - }, - 'NativeBase.Icon': { - color: variables.btnSuccessBg, - }, - backgroundColor: null, - }, - '.light': { - 'NativeBase.Text': { - color: '#f4f4f4', - }, - 'NativeBase.IconNB': { - color: '#f4f4f4', - }, - 'NativeBase.Icon': { - color: '#f4f4f4', - }, - backgroundColor: null, - }, - - }, + backgroundColor: variables.btnPrimaryBg, + }, - '.small': { - height: 30, + '.success': { + '.bordered': { 'NativeBase.Text': { - fontSize: 14, + color: variables.btnSuccessBg, + }, + 'NativeBase.Icon': { + color: variables.btnSuccessBg, + }, + 'NativeBase.IconNB': { + color: variables.btnSuccessBg, }, }, + backgroundColor: variables.btnSuccessBg, + }, - '.large': { - height: 60, + '.info': { + '.bordered': { 'NativeBase.Text': { - fontSize: 22, - lineHeight: 32, + color: variables.btnInfoBg, + }, + 'NativeBase.Icon': { + color: variables.btnInfoBg, + }, + 'NativeBase.IconNB': { + color: variables.btnInfoBg, }, }, + backgroundColor: variables.btnInfoBg, + }, - '.iconRight': { + '.warning': { + '.bordered': { 'NativeBase.Text': { - marginRight: variables.buttonPadding, + color: variables.btnWarningBg, + }, + 'NativeBase.Icon': { + color: variables.btnWarningBg, + }, + 'NativeBase.IconNB': { + color: variables.btnWarningBg, }, }, - '.iconLeft': { + backgroundColor: variables.btnWarningBg, + }, + + '.danger': { + '.bordered': { 'NativeBase.Text': { - marginLeft: variables.buttonPadding, + color: variables.btnDangerBg, + }, + 'NativeBase.Icon': { + color: variables.btnDangerBg, + }, + 'NativeBase.IconNB': { + color: variables.btnDangerBg, }, }, + backgroundColor: variables.btnDangerBg, + }, + '.block': { + alignSelf: 'stretch', + }, - '.capitalize': { + '.full': { + alignSelf: 'stretch', + margin: 0, + borderRadius: 0, + }, - }, + // Assume icon button dimensions + '.rounded': { + paddingHorizontal: variables.btnHeight / 2, + borderRadius: variables.btnHeight / 2, + minWidth: 0, - '.vertical': { - flexDirection: 'column', - height: null, + 'NativeBase.Icon': { + marginLeft: -variables.iconFontSize / 2, + marginRight: -variables.iconFontSize / 2, }, + 'NativeBase.IconNB': { + marginLeft: -variables.iconFontSize / 2, + marginRight: -variables.iconFontSize / 2, + }, + }, + '.transparent': { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, 'NativeBase.Text': { - fontFamily: variables.btnFontFamily, - marginLeft: 0, - marginRight: 0, - color: variables.inverseTextColor, - fontSize: variables.btnTextSize, - lineHeight: variables.btnLineHeight, - // childPosition: 1 + color: variables.btnPrimaryBg, }, - 'NativeBase.Icon': { - color: variables.inverseTextColor, - fontSize: 24, - marginHorizontal: 5, - paddingTop: (platform === 'ios') ? 2 : undefined + color: variables.btnPrimaryBg, }, 'NativeBase.IconNB': { - color: variables.inverseTextColor, - fontSize: 24, - marginHorizontal: 5, - paddingTop: (platform === 'ios') ? 2 : undefined + color: variables.btnPrimaryBg, + }, + '.dark': { + 'NativeBase.Text': { + color: '#000', + }, + 'NativeBase.IconNB': { + color: '#000', + }, + 'NativeBase.Icon': { + color: '#000', + }, + }, + '.light': { + 'NativeBase.Text': { + color: '#f4f4f4', + }, + 'NativeBase.IconNB': { + color: '#f4f4f4', + }, + 'NativeBase.Icon': { + color: '#f4f4f4', + }, + }, + '.danger': { + 'NativeBase.Text': { + color: variables.btnDangerBg, + }, + 'NativeBase.IconNB': { + color: variables.btnDangerBg, + }, + 'NativeBase.Icon': { + color: variables.btnDangerBg, + }, + backgroundColor: null, + }, + '.warning': { + 'NativeBase.Text': { + color: variables.btnWarningBg, + }, + 'NativeBase.IconNB': { + color: variables.btnWarningBg, + }, + 'NativeBase.Icon': { + color: variables.btnWarningBg, + }, + backgroundColor: null, }, - '.iconLeft': { + '.info': { + 'NativeBase.Text': { + color: variables.btnInfoBg, + }, 'NativeBase.IconNB': { - marginRight: 10, - marginLeft: 0, + color: variables.btnInfoBg, }, 'NativeBase.Icon': { - marginRight: 10, - marginLeft: 0, + color: variables.btnInfoBg, }, + backgroundColor: null, }, - '.iconRight': { + '.primary': { + 'NativeBase.Text': { + color: variables.btnPrimaryBg, + }, 'NativeBase.IconNB': { - marginLeft: 10, - marginRight: 0, + color: variables.btnPrimaryBg, }, 'NativeBase.Icon': { - marginLeft: 10, - marginRight: 0, + color: variables.btnPrimaryBg, }, + backgroundColor: null, }, - '.picker': { + '.success': { 'NativeBase.Text': { - '.note': { - fontSize: 16, - lineHeight: null, - }, + color: variables.btnSuccessBg, + }, + 'NativeBase.IconNB': { + color: variables.btnSuccessBg, + }, + 'NativeBase.Icon': { + color: variables.btnSuccessBg, }, + backgroundColor: null, }, + }, - paddingVertical: variables.buttonPadding, - paddingHorizontal: variables.buttonPadding + 10, - backgroundColor: variables.btnPrimaryBg, - borderRadius: variables.borderRadiusBase, - borderColor: variables.btnPrimaryBg, - borderWidth: null, - height: 45, - alignSelf: 'flex-start', + '.small': { + height: variables.btnHeightSmall, + 'NativeBase.Text': { + fontSize: variables.btnTextSizeSmall, + }, + }, + + '.large': { + height: 60, + 'NativeBase.Text': { + fontSize: variables.btnTextSizeLarge, + lineHeight: 32, + }, + }, + + '.vertical': { flexDirection: 'row', - elevation: 2, - shadowColor: (platformStyle==='material') ? '#000' : undefined, - shadowOffset: (platformStyle==='material') ? {width: 0, height: 2} : undefined, - shadowOpacity: (platformStyle==='material') ? 0.2 : undefined, - shadowRadius: (platformStyle==='material') ? 1.2 : undefined, - alignItems: 'center', - justifyContent: 'space-between', + height: null, + }, + + '.iconLeft': { + '.rounded': { + 'NativeBase.IconNB': { + paddingLeft: variables.btnPadding, + }, + 'NativeBase.Icon': { + paddingLeft: variables.btnPadding, + }, + }, + 'NativeBase.IconNB': { + marginRight: variables.btnPadding, + }, + 'NativeBase.Icon': { + marginRight: variables.btnPadding, + }, + }, + '.iconRight': { + '.rounded': { + 'NativeBase.IconNB': { + paddingRight: variables.btnPadding, + }, + 'NativeBase.Icon': { + paddingRight: variables.btnPadding, + }, + }, + 'NativeBase.IconNB': { + paddingRight: variables.btnPadding, + marginLeft: variables.btnPadding, + }, + 'NativeBase.Icon': { + paddingRight: variables.btnPadding, + marginLeft: variables.btnPadding, + }, + }, + '.picker': { + 'NativeBase.Text': { + '.note': { + fontSize: 16, + lineHeight: null, + }, + }, + }, + + + 'NativeBase.Text': { + fontFamily: variables.btnFontFamily, + marginHorizontal: 0, + color: variables.inverseTextColor, + fontSize: variables.btnTextSize, + lineHeight: variables.btnLineHeight, + // childPosition: 1 + }, + + 'NativeBase.Icon': { + color: variables.inverseTextColor, + fontSize: variables.iconFontSize, + }, + 'NativeBase.IconNB': { + color: variables.inverseTextColor, + fontSize: variables.iconFontSize, + }, + + paddingHorizontal: variables.btnPadding, + backgroundColor: variables.btnPrimaryBg, + borderRadius: variables.borderRadiusBase, + borderColor: variables.btnPrimaryBg, + borderWidth: null, + margin: 4, + height: variables.btnHeight, + minWidth: (platformStyle === 'material') ? 64 : undefined, + flexDirection: 'row', + alignSelf: 'flex-start', + elevation: 2, + shadowColor: (platformStyle === 'material') ? '#000' : undefined, + shadowOffset: (platformStyle === 'material') ? { width: 0, height: 2 } : undefined, + shadowOpacity: (platformStyle === 'material') ? 0.2 : undefined, + shadowRadius: (platformStyle === 'material') ? 1.2 : undefined, + alignItems: 'center', + justifyContent: 'center', }; return buttonTheme; }; diff --git a/src/theme/components/Header.js b/src/theme/components/Header.js index 08caf92dac..53398794ad 100644 --- a/src/theme/components/Header.js +++ b/src/theme/components/Header.js @@ -62,9 +62,8 @@ export default (variables = variable) => { borderBottomWidth: null, }, 'NativeBase.Button': { - justifyContent: 'center', alignSelf: 'center', - alignItems: 'center', + margin: 0, '.transparent': { 'NativeBase.Text': { color: variables.toolbarBtnColor, @@ -76,9 +75,7 @@ export default (variables = variable) => { 'NativeBase.IconNB': { color: variables.toolbarBtnColor, }, - paddingHorizontal: variables.buttonPadding, }, - paddingHorizontal: 15, }, '.searchBar': { 'NativeBase.Item': { @@ -154,27 +151,19 @@ export default (variables = variable) => { }, }, '.transparent': { - marginLeft: -3, 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize, - marginTop: 2, - marginRight: 2, - marginLeft: 2 }, 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize, - marginTop: 2, - marginRight: 2, - marginLeft: 2 }, 'NativeBase.Text': { color: variables.toolbarBtnColor, fontSize: 17, top: (platform === 'ios') ? undefined : -1.5, }, - backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -189,7 +178,7 @@ export default (variables = variable) => { color: variables.toolbarBtnColor, }, alignSelf: null, - paddingHorizontal: variables.buttonPadding, + margin: 0, }, flex: ((platform === 'ios') && (platformStyle!=='material')) ? 1 : 0.5, alignSelf: 'center', @@ -206,9 +195,6 @@ export default (variables = variable) => { }, 'NativeBase.Button': { alignSelf: 'center', - '.transparent': { - backgroundColor: 'transparent', - }, 'NativeBase.Icon': { color: variables.toolbarBtnColor, }, @@ -226,10 +212,10 @@ export default (variables = variable) => { height: 30, 'NativeBase.Icon': { color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize-2, + fontSize: variables.iconHeaderSize - 2, marginTop: 2, marginRight: 2, - marginLeft: 5 + marginLeft: 5, }, 'NativeBase.Text': { color: variables.toolbarBtnColor, @@ -245,29 +231,15 @@ export default (variables = variable) => { }, }, '.transparent': { - marginRight: -8, - paddingHorizontal: 15, - borderRadius: 50, 'NativeBase.Icon': { color: variables.toolbarBtnColor, - fontSize: (platform==='ios') ? variables.iconHeaderSize-6 : variables.iconHeaderSize-2, - marginTop: 2, - marginLeft: 2, - marginRight: 2 + fontSize: variables.iconHeaderSize, }, 'NativeBase.IconNB': { color: variables.toolbarBtnColor, - fontSize: (platform==='ios') ? variables.iconHeaderSize-6 : variables.iconHeaderSize-2, - marginTop: 2, - marginLeft: 2, - marginRight: 2 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnColor, - fontSize: 17, - top: (platform === 'ios') ? undefined : -1.5, + fontSize: variables.iconHeaderSize, }, - backgroundColor: 'transparent', + margin: 0, borderColor: null, elevation: 0, shadowColor: null, @@ -282,7 +254,6 @@ export default (variables = variable) => { color: variables.toolbarBtnColor, }, alignSelf: null, - paddingHorizontal: variables.buttonPadding, }, flex: 1, alignSelf: 'center', @@ -290,6 +261,7 @@ export default (variables = variable) => { flexDirection: 'row', justifyContent: 'flex-end', }, + backgroundColor: variables.toolbarDefaultBg, flexDirection: 'row', paddingHorizontal: 10, @@ -298,11 +270,11 @@ export default (variables = variable) => { borderBottomWidth: (platform === 'ios') ? (1/PixelRatio.getPixelSizeForLayoutSize(1)) : 0, borderBottomColor: variables.toolbarDefaultBorder, height: variables.toolbarHeight, - elevation: 3, - shadowColor: (platformStyle==='material') ? '#000' : undefined, - shadowOffset: (platformStyle==='material') ? {width: 0, height: 2} : undefined, - shadowOpacity: (platformStyle==='material') ? 0.2 : undefined, - shadowRadius: (platformStyle==='material') ? 1.2 : undefined, + elevation: 4, + shadowColor: (platformStyle === 'material') ? '#000' : undefined, + shadowOffset: (platformStyle === 'material') ? { width: 0, height: 2 } : undefined, + shadowOpacity: (platformStyle === 'material') ? 0.2 : undefined, + shadowRadius: (platformStyle === 'material') ? 1.2 : undefined, top: 0, left: 0, right: 0, diff --git a/src/theme/variables/commonColor.js b/src/theme/variables/commonColor.js index f6b79837ed..f7775a623d 100644 --- a/src/theme/variables/commonColor.js +++ b/src/theme/variables/commonColor.js @@ -12,8 +12,8 @@ export default { platform, // AndroidRipple androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + androidRippleColor: 'rgba(255, 255, 255, 0.26)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.26)', // Badge badgeBg: '#ED1727', @@ -22,37 +22,10 @@ export default { badgePadding: (platform === 'ios') ? 3 : 0, // Button - btnFontFamily: (platform === 'ios') ? 'System' : 'Roboto_medium', + btnFontFamily: (platform === 'ios') ? 'System' : 'sans-serif-medium', btnDisabledBg: '#b5b5b5', btnDisabledClr: '#f1f1f1', - // CheckBox - CheckboxRadius: (platform === 'ios') ? 13 : 0, - CheckboxBorderWidth: (platform === 'ios') ? 1 : 2, - CheckboxPaddingLeft: (platform === 'ios') ? 4 : 2, - CheckboxPaddingBottom: (platform === 'ios') ? 0 : 5, - CheckboxIconSize: (platform === 'ios') ? 21 : 14, - CheckboxIconMarginTop: (platform === 'ios') ? undefined : 1, - CheckboxFontSize: (platform === 'ios') ? (23 / 0.9) : 18, - DefaultFontSize: 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Segment - segmentBackgroundColor: '#3F51B5', - segmentActiveBackgroundColor: '#fff', - segmentTextColor: '#fff', - segmentActiveTextColor: '#3F51B5', - segmentBorderColor: '#fff', - segmentBorderColorMain: '#3F51B5', - - // New Variable - get defaultTextColor() { - return this.textColor; - }, - - get btnPrimaryBg() { return this.brandPrimary; }, @@ -84,8 +57,7 @@ export default { return this.inverseTextColor; }, get btnTextSize() { - return (platform === 'ios') ? this.fontSizeBase * 1.1 : - this.fontSizeBase - 1; + return (platform === 'ios') ? this.fontSizeBase * 1.1 : this.fontSizeBase; }, get btnTextSizeLarge() { return this.fontSizeBase * 1.5; @@ -97,7 +69,9 @@ export default { return this.fontSizeBase * 3.8; }, - buttonPadding: 6, + btnHeight: (platform === 'ios') ? 45 : 36, + btnHeightSmall: (platform === 'ios') ? 36 : 32, + btnPadding: 6, get iconSizeLarge() { return this.iconFontSize * 1.5; @@ -106,6 +80,32 @@ export default { return this.iconFontSize * 0.6; }, + // CheckBox + CheckboxRadius: (platform === 'ios') ? 13 : 0, + CheckboxBorderWidth: (platform === 'ios') ? 1 : 2, + CheckboxPaddingLeft: (platform === 'ios') ? 4 : 2, + CheckboxPaddingBottom: (platform === 'ios') ? 0 : 5, + CheckboxIconSize: (platform === 'ios') ? 21 : 14, + CheckboxIconMarginTop: (platform === 'ios') ? undefined : 1, + CheckboxFontSize: (platform === 'ios') ? (23 / 0.9) : 18, + DefaultFontSize: 17, + checkboxBgColor: '#039BE5', + checkboxSize: 20, + checkboxTickColor: '#fff', + + // Segment + segmentBackgroundColor: '#3F51B5', + segmentActiveBackgroundColor: '#fff', + segmentTextColor: '#fff', + segmentActiveTextColor: '#3F51B5', + segmentBorderColor: '#fff', + segmentBorderColorMain: '#3F51B5', + + // New Variable + get defaultTextColor() { + return this.textColor; + }, + // Card cardDefaultBg: '#fff', @@ -121,8 +121,8 @@ export default { // Font - fontFamily: (platform === 'ios') ? 'System' : 'Roboto', - fontSizeBase: 15, + fontFamily: (platform === 'ios') ? 'System' : 'sans-serif', + fontSizeBase: (platform === 'ios') ? 15 : 14, get fontSizeH1() { return this.fontSizeBase * 1.8; @@ -176,8 +176,8 @@ export default { // Icon iconFamily: 'Ionicons', - iconFontSize: (platform === 'ios') ? 30 : 28, - iconMargin: 7, + iconFontSize: (platform === 'ios') ? 30 : 24, + iconMargin:(platform === 'ios') ? 7 : 12, iconHeaderSize: (platform === 'ios') ? 33 : 24, @@ -204,7 +204,7 @@ export default { // Line Height - btnLineHeight: 19, + btnLineHeight: (platform === 'ios') ? 19 : 16, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, @@ -265,7 +265,7 @@ export default { // Title - titleFontfamily: (platform === 'ios') ? 'System' : 'Roboto_medium', + titleFontfamily: (platform === 'ios') ? 'System' : 'sans-serif-medium', titleFontSize: (platform === 'ios') ? 17 : 19, subTitleFontSize: (platform === 'ios') ? 12 : 14, subtitleColor: '#FFF', diff --git a/src/theme/variables/material.js b/src/theme/variables/material.js index 6967fb7142..bcaa1505b9 100644 --- a/src/theme/variables/material.js +++ b/src/theme/variables/material.js @@ -12,8 +12,8 @@ export default { platform, // AndroidRipple androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + androidRippleColor: 'rgba(255, 255, 255, 0.26)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.26)', // Badge badgeBg: '#ED1727', @@ -22,37 +22,10 @@ export default { badgePadding: (platform === 'ios') ? 3 : 0, // Button - btnFontFamily: (platform === 'ios') ? 'Roboto' : 'Roboto_medium', + btnFontFamily: (platform === 'ios') ? 'Roboto_medium' : 'sans-serif-medium', btnDisabledBg: '#b5b5b5', btnDisabledClr: '#f1f1f1', - // CheckBox - CheckboxRadius: 0, - CheckboxBorderWidth: 2, - CheckboxPaddingLeft: 2, - CheckboxPaddingBottom: (platform === 'ios') ? 0 : 5, - CheckboxIconSize: (platform === 'ios') ? 18 : 14, - CheckboxIconMarginTop: (platform === 'ios') ? undefined : 1, - CheckboxFontSize: (platform === 'ios') ? 21 : 18, - DefaultFontSize: 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Segment - segmentBackgroundColor: '#3F51B5', - segmentActiveBackgroundColor: '#fff', - segmentTextColor: '#fff', - segmentActiveTextColor: '#3F51B5', - segmentBorderColor: '#fff', - segmentBorderColorMain: '#3F51B5', - - // New Variable - get defaultTextColor() { - return this.textColor; - }, - - get btnPrimaryBg() { return this.brandPrimary; }, @@ -84,8 +57,7 @@ export default { return this.inverseTextColor; }, get btnTextSize() { - return (platform === 'ios') ? this.fontSizeBase * 1.1 : - this.fontSizeBase - 1; + return this.fontSizeBase; }, get btnTextSizeLarge() { return this.fontSizeBase * 1.5; @@ -97,7 +69,9 @@ export default { return this.fontSizeBase * 3.8; }, - buttonPadding: 6, + btnHeight: 36, + btnHeightSmall: 32, + btnPadding: 6, get iconSizeLarge() { return this.iconFontSize * 1.5; @@ -107,6 +81,33 @@ export default { }, + // CheckBox + CheckboxRadius: 0, + CheckboxBorderWidth: 2, + CheckboxPaddingLeft: 2, + CheckboxPaddingBottom: (platform === 'ios') ? 0 : 5, + CheckboxIconSize: (platform === 'ios') ? 18 : 14, + CheckboxIconMarginTop: (platform === 'ios') ? undefined : 1, + CheckboxFontSize: (platform === 'ios') ? 21 : 18, + DefaultFontSize: 17, + checkboxBgColor: '#039BE5', + checkboxSize: 20, + checkboxTickColor: '#fff', + + // Segment + segmentBackgroundColor: '#3F51B5', + segmentActiveBackgroundColor: '#fff', + segmentTextColor: '#fff', + segmentActiveTextColor: '#3F51B5', + segmentBorderColor: '#fff', + segmentBorderColorMain: '#3F51B5', + + // New Variable + get defaultTextColor() { + return this.textColor; + }, + + // Card cardDefaultBg: '#fff', @@ -121,8 +122,8 @@ export default { // Font - fontFamily: 'Roboto', - fontSizeBase: 15, + fontFamily: (platform === 'ios') ? 'Roboto' : 'sans-serif', + fontSizeBase: 14, get fontSizeH1() { return this.fontSizeBase * 1.8; @@ -204,7 +205,7 @@ export default { // Line Height - btnLineHeight: 19, + btnLineHeight: 16, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, @@ -265,7 +266,7 @@ export default { // Title - titleFontfamily: (platform === 'ios') ? 'Roboto' : 'Roboto_medium', + titleFontfamily: (platform === 'ios') ? 'Roboto_medium' : 'sans-serif-medium', titleFontSize: 19, subTitleFontSize: 14, subtitleColor: '#FFF', diff --git a/src/theme/variables/platform.js b/src/theme/variables/platform.js index f74e4a2cd4..7156ebb53a 100644 --- a/src/theme/variables/platform.js +++ b/src/theme/variables/platform.js @@ -5,15 +5,15 @@ import { Platform, Dimensions, PixelRatio } from 'react-native'; const deviceHeight = Dimensions.get('window').height; const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; -const platformStyle = undefined; +const platformStyle = platform === 'ios' ? undefined : 'material'; export default { platformStyle, platform, // AndroidRipple androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + androidRippleColor: 'rgba(255, 255, 255, 0.26)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.26)', // Badge badgeBg: '#ED1727', @@ -22,37 +22,10 @@ export default { badgePadding: (platform === 'ios') ? 3 : 0, // Button - btnFontFamily: (platform === 'ios') ? 'System' : 'Roboto_medium', + btnFontFamily: (platform === 'ios') ? 'System' : 'sans-serif-medium', btnDisabledBg: '#b5b5b5', btnDisabledClr: '#f1f1f1', - // CheckBox - CheckboxRadius: (platform === 'ios') ? 13 : 0, - CheckboxBorderWidth: (platform === 'ios') ? 1 : 2, - CheckboxPaddingLeft: (platform === 'ios') ? 4 : 2, - CheckboxPaddingBottom: (platform === 'ios') ? 0 : 5, - CheckboxIconSize: (platform === 'ios') ? 21 : 14, - CheckboxIconMarginTop: (platform === 'ios') ? undefined : 1, - CheckboxFontSize: (platform === 'ios') ? (23 / 0.9) : 18, - DefaultFontSize: 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Segment - segmentBackgroundColor: (platform === 'ios') ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: (platform === 'ios') ? '#007aff' : '#fff', - segmentTextColor: (platform === 'ios') ? '#007aff' : '#fff', - segmentActiveTextColor: (platform === 'ios') ? '#fff' : '#3F51B5', - segmentBorderColor: (platform === 'ios') ? '#007aff' : '#fff', - segmentBorderColorMain: (platform === 'ios') ? '#a7a6ab' : '#3F51B5', - - // New Variable - get defaultTextColor() { - return this.textColor; - }, - - get btnPrimaryBg() { return this.brandPrimary; }, @@ -84,20 +57,21 @@ export default { return this.inverseTextColor; }, get btnTextSize() { - return (platform === 'ios') ? this.fontSizeBase * 1.1 : - this.fontSizeBase - 1; + return (platform === 'ios') ? this.fontSizeBase * 1.1 : this.fontSizeBase; }, get btnTextSizeLarge() { return this.fontSizeBase * 1.5; }, get btnTextSizeSmall() { - return this.fontSizeBase * 0.8; + return (platform === 'ios') ? this.fontSizeBase * 0.8 : this.fontSizeBase - 1; }, get borderRadiusLarge() { return this.fontSizeBase * 3.8; }, - buttonPadding: 6, + btnHeight: (platform === 'ios') ? 45 : 36, + btnHeightSmall: (platform === 'ios') ? 36 : 32, + btnPadding: 6, get iconSizeLarge() { return this.iconFontSize * 1.5; @@ -107,6 +81,33 @@ export default { }, + // CheckBox + CheckboxRadius: (platform === 'ios') ? 13 : 0, + CheckboxBorderWidth: (platform === 'ios') ? 1 : 2, + CheckboxPaddingLeft: (platform === 'ios') ? 4 : 2, + CheckboxPaddingBottom: (platform === 'ios') ? 0 : 5, + CheckboxIconSize: (platform === 'ios') ? 21 : 14, + CheckboxIconMarginTop: (platform === 'ios') ? undefined : 1, + CheckboxFontSize: (platform === 'ios') ? (23 / 0.9) : 18, + DefaultFontSize: 17, + checkboxBgColor: '#039BE5', + checkboxSize: 20, + checkboxTickColor: '#fff', + + // Segment + segmentBackgroundColor: (platform === 'ios') ? '#F8F8F8' : '#3F51B5', + segmentActiveBackgroundColor: (platform === 'ios') ? '#007aff' : '#fff', + segmentTextColor: (platform === 'ios') ? '#007aff' : '#fff', + segmentActiveTextColor: (platform === 'ios') ? '#fff' : '#3F51B5', + segmentBorderColor: (platform === 'ios') ? '#007aff' : '#fff', + segmentBorderColorMain: (platform === 'ios') ? '#a7a6ab' : '#3F51B5', + + // New Variable + get defaultTextColor() { + return this.textColor; + }, + + // Card cardDefaultBg: '#fff', @@ -121,8 +122,8 @@ export default { // Font - fontFamily: (platform === 'ios') ? 'System' : 'Roboto', - fontSizeBase: 15, + fontFamily: (platform === 'ios') ? 'System' : 'sans-serif', + fontSizeBase: (platform === 'ios') ? 15 : 14, get fontSizeH1() { return this.fontSizeBase * 1.8; @@ -176,8 +177,8 @@ export default { // Icon iconFamily: 'Ionicons', - iconFontSize: (platform === 'ios') ? 30 : 28, - iconMargin: 7, + iconFontSize: (platform === 'ios') ? 30 : 24, + iconMargin: (platform === 'ios') ? 7 : 12, iconHeaderSize: (platform === 'ios') ? 33 : 24, @@ -204,7 +205,7 @@ export default { // Line Height - btnLineHeight: 19, + btnLineHeight: (platform === 'ios') ? 19 : 16, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, @@ -265,7 +266,7 @@ export default { // Title - titleFontfamily: (platform === 'ios') ? 'System' : 'Roboto_medium', + titleFontfamily: (platform === 'ios') ? 'System' : 'sans-serif-medium', titleFontSize: (platform === 'ios') ? 17 : 19, subTitleFontSize: (platform === 'ios') ? 12 : 14, subtitleColor: (platform === 'ios') ? '#8e8e93' : '#FFF',