diff options
Diffstat (limited to 'app/components')
25 files changed, 256 insertions, 160 deletions
diff --git a/app/components/Account.js b/app/components/Account.js index afa36fe31a..4ec57aaf1e 100644 --- a/app/components/Account.js +++ b/app/components/Account.js @@ -33,7 +33,7 @@ export default class Account extends Component { <Button style={styles.account__close} onPress={ this.props.onClose } testName='account__close'> - <Img style={styles.account__close_icon} source="icon-back" /> + <Img height={24} width={24} style={styles.account__close_icon} source="icon-back" /> <Text style={styles.account__close_title}>Settings</Text> </Button> <View style={styles.account__container}> @@ -66,7 +66,7 @@ export default class Account extends Component { icon='icon-extLink' testName='account__buymore'> <Label>Buy more credit</Label> - <Img source='icon-extLink' height='16' width='16' /> + <Img source='icon-extLink' height={16} width={16} /> </GreenButton> <RedButton onPress={ this.props.onLogout } diff --git a/app/components/AccountStyles.js b/app/components/AccountStyles.js index 406215cd4f..b5ac785fe0 100644 --- a/app/components/AccountStyles.js +++ b/app/components/AccountStyles.js @@ -7,11 +7,11 @@ export default { ...createViewStyles({ account: { backgroundColor: colors.darkBlue, - height: '100%', + flex: 1, }, account__container: { flexDirection: 'column', - height: '100%', + flex: 1, paddingBottom: 48, }, account__header: { diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js index 14e4879706..c4f014d210 100644 --- a/app/components/AdvancedSettings.js +++ b/app/components/AdvancedSettings.js @@ -127,7 +127,7 @@ function BaseLayout(props) { onPress={ props.onClose } testName='closeButton'> <View style={ styles.advanced_settings__close_content }> - <Img style={ styles.advanced_settings__close_icon } source="icon-back" /> + <Img height={24} width={24} style={ styles.advanced_settings__close_icon } source="icon-back" /> <Text style={ styles.advanced_settings__close_title }>Settings</Text> </View> </Button> diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js index 8f6f1e81ba..75ed925b70 100644 --- a/app/components/AdvancedSettingsStyles.js +++ b/app/components/AdvancedSettingsStyles.js @@ -6,12 +6,11 @@ export default { ...createViewStyles({ advanced_settings: { backgroundColor: '#192E45', - height: '100%', + flex: 1, }, advanced_settings__container: { flexDirection: 'column', - height: '100%', - paddingBottom: 48, + flex: 1, }, advanced_settings__header: { flexGrow: 0, @@ -32,8 +31,6 @@ export default { paddingTop: 24, }, advanced_settings__close_icon: { - width: 24, - height: 24, opacity: 0.6, marginRight: 8, }, diff --git a/app/components/Connect.js b/app/components/Connect.js index 9f8b2b993f..56defe49b7 100644 --- a/app/components/Connect.js +++ b/app/components/Connect.js @@ -82,7 +82,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> { <View style={styles.connect}> <View style={styles.status}> <View style={styles.status_icon}> - <Img source="icon-fail" height="60" width="60" alt="" /> + <Img source="icon-fail" height={60} width={60} alt="" /> </View> <View style={styles.error_title}> { error.title } @@ -94,7 +94,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> { <View> <GreenButton onPress={ this.onExternalLink.bind(this, 'purchase') }> <Label>Buy more time</Label> - <Img source='icon-extLink' height='16' width='16' /> + <Img source='icon-extLink' height={16} width={16} /> </GreenButton> </View> : null @@ -164,7 +164,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> { { /* show spinner when connecting */ } { isConnecting ? <View style={ styles.status_icon }> - <Img source="icon-spinner" height="60" width="60" alt="" ref={ this._updateMapOffset } /> + <Img source='icon-spinner' height={60} width={60} alt="" ref={ this._updateMapOffset } /> </View> : null } @@ -225,7 +225,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> { <View style={styles.footer}> <TransparentButton onPress={ this.props.onSelectLocation }> <Label>{ this.props.selectedRelayName }</Label> - <Img height='12' width='7' source='icon-chevron' /> + <Img height={12} width={7} source='icon-chevron' /> </TransparentButton> <GreenButton onPress={ this.props.onConnect } testName='secureConnection'>Secure my connection</GreenButton> </View> diff --git a/app/components/CustomScrollbars.android.js b/app/components/CustomScrollbars.android.js new file mode 100644 index 0000000000..8c9ea03da2 --- /dev/null +++ b/app/components/CustomScrollbars.android.js @@ -0,0 +1,36 @@ +// @flow + +import * as React from 'react'; +import { View, Component } from 'reactxp'; + +type Props = { + autoHide: boolean, + thumbInset: { x: number, y: number }, + children?: React.Node, +}; + +type State = { + canScroll: boolean, + showScrollIndicators: boolean, +}; + +export default class CustomScrollbars extends Component<Props, State> { + static defaultProps = { + autoHide: true, + thumbInset: { x: 2, y: 2 }, + }; + + state = { + canScroll: false, + showScrollIndicators: true, + }; + + render() { + const { autoHide: _autoHide, thumbInset: _thumbInset, children, ...otherProps } = this.props; + + return ( + <View { ...otherProps }> + { children } + </View>); + } +} diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js index 50ab49d39f..6e5864aa0f 100644 --- a/app/components/HeaderBar.js +++ b/app/components/HeaderBar.js @@ -31,26 +31,26 @@ export default class HeaderBar extends Component { render() { let containerClass = [ styles['headerbar'], - styles['headerbar__' + process.platform], - styles['headerbar__style_' + this.props.style] + styles[process.platform], + styles['style_' + this.props.style] ]; if(this.props.hidden) { - containerClass.push(styles['headerbar__hidden']); + containerClass.push(styles['hidden']); } return ( <View style={ containerClass }> {!this.props.hidden ? - <View style={styles.headerbar__container} testName="headerbar__container"> - <Img style={ styles.headerbar__logo } source='logo-icon'/> - <Text style={styles.headerbar__title}>MULLVAD VPN</Text> + <View style={styles.container} testName="headerbar__container"> + <Img height={50} width={50} source='logo-icon'/> + <Text style={styles.title}>MULLVAD VPN</Text> </View> : null} {this.props.showSettings ? - <Button style={ styles.headerbar__settings } onPress={ this.props.onSettings } testName="headerbar__settings"> - <Img source='icon-settings' style={ styles.headerbar__settings_icon } /> + <Button style={ styles.settings } onPress={ this.props.onSettings } testName="headerbar__settings"> + <Img height={24} width={24} source='icon-settings' style={ styles.settings_icon } hoverStyle={ styles.settings_icon_hover }/> </Button> : null} </View> diff --git a/app/components/HeaderBarStyles.js b/app/components/HeaderBarStyles.js index a8569f2f81..8c744ffcfb 100644 --- a/app/components/HeaderBarStyles.js +++ b/app/components/HeaderBarStyles.js @@ -14,43 +14,41 @@ export default { justifyContent: 'space-between', alignItems: 'center', }, - headerbar__hidden: { + hidden: { paddingTop: 24, paddingBottom: 0, paddingLeft: 0, paddingRight: 0, }, - headerbar__darwin: { + darwin: { paddingTop: 24, }, - headerbar__style_defaultDark: { + style_defaultDark: { backgroundColor: colors.darkBlue, }, - headerbar__style_error: { + style_error: { backgroundColor: colors.red, }, - headerbar__style_success: { + style_success: { backgroundColor: colors.green, }, - headerbar__container: { + container: { display: 'flex', flexDirection: 'row', alignItems: 'center', }, - headerbar__logo: { - height: 50, - width: 50, - }, - headerbar__settings: { + settings: { padding: 0 }, - headerbar__settings_icon: { - width: 24, - height: 24, + settings_icon: { + color: colors.white60, + }, + settings_icon_hover: { + color: colors.white, }, }), ...createTextStyles({ - headerbar__title: { + title: { fontFamily: 'DINPro', fontSize: 24, fontWeight: '900', diff --git a/app/components/Img.android.js b/app/components/Img.android.js index ced9d3f461..c1deb53bf7 100644 --- a/app/components/Img.android.js +++ b/app/components/Img.android.js @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react'; import { StyleSheet } from 'react-native'; -import { Image } from 'reactxp'; +import { Image, Styles } from 'reactxp'; export default class Img extends Component { props: { @@ -21,11 +21,11 @@ export default class Img extends Component { if (tintColor === 'currentColor' && this.props.style) { const { color: tint, ...otherStyles } = StyleSheet.flatten(this.props.style); return( - <Image style={[ otherStyles, { tintColor: tint, height: height, width: width } ]} source={ source }/> + <Image style={Styles.createViewStyle({ ...otherStyles, tintColor: tint, height: height, width: width }, false)} source={ source }/> ); } else { return( - <Image style={[ this.props.style, { height: height, width: width } ]} source={ source }/> + <Image style={Styles.createViewStyle({ ...this.props.style, height: height, width: width }, false)} source={ source }/> ); } } diff --git a/app/components/Layout.css b/app/components/Layout.css deleted file mode 100644 index 14acf93769..0000000000 --- a/app/components/Layout.css +++ /dev/null @@ -1,15 +0,0 @@ -.layout { - display: flex; - flex-direction: column; - height: 100vh; -} - -.layout__header { - flex: 0 0 auto; -} - -.layout__container { - flex: 1 1 100%; - background: #294D73; - overflow: hidden; /* needed for flex boxes with overflow: auto to work */ -}
\ No newline at end of file diff --git a/app/components/Layout.js b/app/components/Layout.js index 51b135e8f5..dea641919c 100644 --- a/app/components/Layout.js +++ b/app/components/Layout.js @@ -1,46 +1,49 @@ // @flow import * as React from 'react'; import HeaderBar from './HeaderBar'; +import { View, Component } from 'reactxp'; import type { HeaderBarProps } from './HeaderBar'; -export class Header extends React.Component<HeaderBarProps> { +import styles from './LayoutStyles'; + +export class Header extends Component { + props: HeaderBarProps; static defaultProps = HeaderBar.defaultProps; render() { return ( - <div className="layout__header"> + <View style={styles.header}> <HeaderBar { ...this.props } /> - </div> + </View> ); } } +export class Container extends Component { + props: { + children: React.Node + } -type ContainerProps = { - children?: React.Element<*> -}; - -export class Container extends React.Component<ContainerProps> { render() { return ( - <div className="layout__container"> + <View style={styles.container}> { this.props.children } - </div> + </View> ); } } -type LayoutProps = { - children?: React.Node -}; +export class Layout extends Component { + props: { + children: Array<React.Node> | React.Node + } -export class Layout extends React.Component<LayoutProps> { render() { return ( - <div className="layout"> + <View style={styles.layout}> { this.props.children } - </div> + </View> ); } } diff --git a/app/components/LayoutStyles.js b/app/components/LayoutStyles.js new file mode 100644 index 0000000000..ab32d45e7b --- /dev/null +++ b/app/components/LayoutStyles.js @@ -0,0 +1,20 @@ +// @flow +import { createViewStyles } from '../lib/styles'; +import { colors } from '../config'; + +export default { + ...createViewStyles({ + layout: { + flexDirection: 'column', + flex: 1, + }, + header: { + flex: 0, + }, + container: { + flex: 1, + backgroundColor: colors.blue, + overflow: 'hidden', + } + }), +}; diff --git a/app/components/Login.js b/app/components/Login.js index d510f96d7b..fb2930e35f 100644 --- a/app/components/Login.js +++ b/app/components/Login.js @@ -75,21 +75,18 @@ export default class Login extends Component<LoginPropTypes, State> { <Layout> <Header showSettings={ true } onSettings={ this.props.onSettings } /> <Container> - <View style={styles.login}> - <View style={styles.login_form}> - { this._getStatusIcon() } + <View style={styles.login_form}> + { this._getStatusIcon() } + <Text style={styles.title}>{ this._formTitle() }</Text> - <Text style={styles.title}>{ this._formTitle() }</Text> - - {this._shouldShowLoginForm() && <View> - { this._createLoginForm() } - </View>} - </View> - - <Animated.View onLayout={this._onFooterLayout} style={[styles.login_footer, this.state.footerAnimationStyle]} testName={'footerVisibility ' + this._shouldShowFooter(this.props).toString()}> - { this._createFooter() } - </Animated.View> + {this._shouldShowLoginForm() && <View> + { this._createLoginForm() } + </View>} </View> + + <Animated.View onLayout={this._onFooterLayout} style={[styles.login_footer, this.state.footerAnimationStyle]} testName={'footerVisibility ' + this._shouldShowFooter(this.props).toString()}> + { this._createFooter() } + </Animated.View> </Container> </Layout> ); @@ -180,7 +177,7 @@ export default class Login extends Component<LoginPropTypes, State> { const statusIconPath = this._getStatusIconPath(); return <View style={ styles.status_icon}> { statusIconPath ? - <Img source={ statusIconPath } height='48' width='48' alt="" /> : + <Img source={ statusIconPath } height={48} width={48} alt="" /> : null } </View>; } @@ -218,10 +215,10 @@ export default class Login extends Component<LoginPropTypes, State> { _accountInputButtonStyles(): Array<Object> { const { status } = this.props.account; - const classes = [styles.account_input_button]; + const classes = [styles.input_button]; if(status === 'logging in') { - classes.push(styles.account_input_button__invisible); + classes.push(styles.input_button__invisible); } classes.push(this.state.loginButtonAnimationStyle); @@ -231,14 +228,14 @@ export default class Login extends Component<LoginPropTypes, State> { _accountInputArrowStyles(): Array<Object> { const { accountToken, status } = this.props.account; - const classes = [styles.account_input_button]; + const classes = [styles.input_arrow]; if(accountToken && accountToken.length > 0) { - classes.push(styles.account_input_button__active); + classes.push(styles.input_arrow__active); } if(status === 'logging in') { - classes.push(styles.account_input_button__invisible); + classes.push(styles.input_arrow__invisible); } return classes; @@ -269,7 +266,7 @@ export default class Login extends Component<LoginPropTypes, State> { toValue: toValue, easing: Animated.Easing.InOut(), duration: 250, - useNativeDriver: true, + useNativeDriver: false, }); } @@ -282,7 +279,7 @@ export default class Login extends Component<LoginPropTypes, State> { toValue: toValue, easing: Animated.Easing.Linear(), duration: 250, - useNativeDriver: true, + useNativeDriver: false, }); } @@ -303,7 +300,7 @@ export default class Login extends Component<LoginPropTypes, State> { } }; - return <View style= {styles.login}> + return <View> <Text style={ styles.subtitle }>{ this._formSubtitle() }</Text> <View style={ this._accountInputGroupStyles() }> <View style={ styles.account_input_backdrop}> @@ -321,7 +318,7 @@ export default class Login extends Component<LoginPropTypes, State> { ref={ autoFocusOnFailure } testName='AccountInput'/> <Animated.View style={this._accountInputButtonStyles()} onPress={ this._onLogin } testName='account-input-button'> - <Img style={this._accountInputArrowStyles()} source='icon-arrow' height='16' width='24' tintColor='currentColor' /> + <Img style={this._accountInputArrowStyles()} source='icon-arrow' height={16} width={24} tintColor='currentColor' /> </Animated.View> </View> <Accordion height={ this._shouldShowAccountHistory(this.props) ? 'auto' : 0 }> @@ -339,7 +336,7 @@ export default class Login extends Component<LoginPropTypes, State> { <Text style={ styles.login_footer__prompt}>{ 'Don\'t have an account number?' }</Text> <BlueButton onPress={ this._onCreateAccount }> <Label>Create account</Label> - <Img source='icon-extLink' height='16' width='16' /> + <Img source='icon-extLink' height={16} width={16} /> </BlueButton> </View>; } @@ -387,7 +384,7 @@ class AccountDropdownItem extends React.Component<AccountDropdownItemProps> { cellHoverStyle={ styles.account_dropdown__remove_cell_hover } hoverStyle={ styles.account_dropdown__remove_hover } source='icon-close-sml' - height='16' width='16' + height={16} width={16} onPress={ () => this.props.onRemove(this.props.value) }/> </CellButton> </View>); diff --git a/app/components/LoginStyles.js b/app/components/LoginStyles.js index 471ab045cc..21c3aa4429 100644 --- a/app/components/LoginStyles.js +++ b/app/components/LoginStyles.js @@ -4,9 +4,6 @@ import { colors } from '../config'; export default { ...createViewStyles({ - login: { - height: '100%', - }, login_footer: { backgroundColor: colors.darkBlue, paddingTop: 18, @@ -22,7 +19,6 @@ export default { login_form:{ flex:1, flexDirection: 'column', - justifyContent: 'flex_end', overflow:'visible', paddingTop: 0, paddingBottom: 0, @@ -59,23 +55,33 @@ export default { account_input_textfield__inactive: { backgroundColor: colors.white60, }, - account_input_button: { + input_button: { + flex: 0, + borderWidth: 0, + width: 48, + alignItems: 'center', + justifyContent: 'center', + }, + input_button__invisible: { + backgroundColor: colors.white, + opacity: 0, + }, + input_arrow: { flex: 0, - border: 0, + borderWidth: 0, width: 48, alignItems: 'center', justifyContent: 'center', color: colors.blue20, }, - account_input_button__active: { + input_arrow__active: { color: colors.white, }, - account_input_button__invisible: { + input_arrow__invisible: { color: colors.white, - backgroundColor: colors.white, - visibility: 'hidden', opacity: 0, }, + account_dropdown__spacer: { height: 1, backgroundColor: colors.darkBlue, @@ -131,20 +137,19 @@ export default { fontFamily: 'Open Sans', fontSize: 13, fontWeight: '600', - - letterSpaceing: -0.2, + letterSpacing: -0.2, color: colors.white80, marginBottom: 8, }, account_input_textfield: { - border: 0, + borderWidth: 0, paddingTop: 10, paddingRight: 12, paddingLeft: 12, paddingBottom: 12, fontFamily: 'DINPro', fontSize: 20, - fontWeight: 900, + fontWeight: '900', lineHeight: 26, color: colors.blue, backgroundColor: 'transparent', @@ -157,7 +162,7 @@ export default { fontWeight: '900', lineHeight: 26, color: colors.blue80, - border: 0, + borderWidth: 0, textAlign: 'left', marginLeft: 0, }, diff --git a/app/components/PlatformWindow.android.js b/app/components/PlatformWindow.android.js index 6670a654e7..b2a13e86c9 100644 --- a/app/components/PlatformWindow.android.js +++ b/app/components/PlatformWindow.android.js @@ -1,10 +1,10 @@ // @flow -import React, { Component } from 'react'; +import * as React from 'react'; import { KeyboardAvoidingView } from 'react-native'; -export default class PlatformWindow extends Component { +export default class PlatformWindow extends React.Component { props: { - children: Array<React.Element<*>> | React.Element<*> + children: Array<React.Node> | React.Node }; render() { diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js index 7c1693e300..f751653622 100644 --- a/app/components/PreferencesStyles.js +++ b/app/components/PreferencesStyles.js @@ -6,7 +6,7 @@ export default { ...createViewStyles({ preferences: { backgroundColor: colors.darkBlue, - height: '100%', + flex: 1, }, preferences__container: { display: 'flex', diff --git a/app/components/SelectLocationStyles.js b/app/components/SelectLocationStyles.js index 079e28dd93..721ad64eec 100644 --- a/app/components/SelectLocationStyles.js +++ b/app/components/SelectLocationStyles.js @@ -6,7 +6,7 @@ export default { ...createViewStyles({ select_location: { backgroundColor: colors.darkBlue, - height: '100%', + flex: 1, }, container: { flexDirection: 'column', diff --git a/app/components/Settings.js b/app/components/Settings.js index 642887cd9b..9161f36460 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -31,7 +31,7 @@ export default class Settings extends Component<SettingsProps> { <Container> <View style={styles.settings}> <Button style={styles.settings__close} onPress={ this.props.onClose } testName='settings__close'> - <Img style={styles.settings__close_icon} source='icon-close'/> + <Img height={24} width={24} style={styles.settings__close_icon} source='icon-close'/> </Button> <View style={styles.settings__container}> @@ -80,14 +80,14 @@ export default class Settings extends Component<SettingsProps> { testName='settings__account_paid_until_button'> <Label>Account</Label> <SubText testName='settings__account_paid_until_subtext' style={styles.settings__account_paid_until_Label__error}>OUT OF TIME</SubText> - <Img height='12' width='7' source='icon-chevron' /> + <Img height={12} width={7} source='icon-chevron' /> </CellButton> ) : ( <CellButton onPress={ this.props.onViewAccount } testName='settings__account_paid_until_button'> <Label>Account</Label> <SubText testName='settings__account_paid_until_subtext'>{ formattedExpiry }</SubText> - <Img height='12' width='7' source='icon-chevron' /> + <Img height={12} width={7} source='icon-chevron' /> </CellButton> )} </View> @@ -95,13 +95,13 @@ export default class Settings extends Component<SettingsProps> { <CellButton onPress={ this.props.onViewPreferences } testName='settings__preferences'> <Label>Preferences</Label> - <Img height='12' width='7' source='icon-chevron' /> + <Img height={12} width={7} source='icon-chevron' /> </CellButton> <CellButton onPress={ this.props.onViewAdvancedSettings } testName='settings__advanced'> <Label>Advanced</Label> - <Img height='12' width='7' source='icon-chevron' /> + <Img height={12} width={7} source='icon-chevron' /> </CellButton> <View style={styles.settings__cell_spacer}/> </View>; @@ -113,7 +113,7 @@ export default class Settings extends Component<SettingsProps> { testName='settings__version'> <Label>App version</Label> <SubText>{this._formattedVersion()}</SubText> - <Img height='16' width='16' source='icon-extLink' /> + <Img height={16} width={16} source='icon-extLink' /> </CellButton> <View style={styles.settings__cell_spacer}/> </View>; @@ -133,19 +133,19 @@ export default class Settings extends Component<SettingsProps> { <CellButton onPress={ this.props.onExternalLink.bind(this, 'faq') } testName='settings__external_link'> <Label>FAQs</Label> - <Img height='16' width='16' source='icon-extLink' /> + <Img height={16} width={16} source='icon-extLink' /> </CellButton> <CellButton onPress={ this.props.onExternalLink.bind(this, 'guides') } testName='settings__external_link'> <Label>Guides</Label> - <Img height='16' width='16' source='icon-extLink' /> + <Img height={16} width={16} source='icon-extLink' /> </CellButton> <CellButton onPress={ this.props.onViewSupport } testName='settings__view_support'> <Label>Contact support</Label> - <Img height='12' width='7' source='icon-chevron' /> + <Img height={12} width={7} source='icon-chevron' /> </CellButton> </View>; } diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js index 81d72277a3..d84673253e 100644 --- a/app/components/SettingsStyles.js +++ b/app/components/SettingsStyles.js @@ -4,7 +4,7 @@ import { colors } from '../config'; export default Object.assign(createViewStyles({ settings: { backgroundColor: colors.darkBlue, - height: '100%' + flex: 1, }, settings__container:{ flexDirection: 'column', diff --git a/app/components/Support.js b/app/components/Support.js index 9b37f85f4e..0b3e88676a 100644 --- a/app/components/Support.js +++ b/app/components/Support.js @@ -117,7 +117,7 @@ export default class Support extends Component<SupportProps, SupportState> { <Container> <View style={styles.support}> <Button style={styles.support__close} onPress={ this.props.onClose } testName="support__close"> - <Img style={styles.support__close_icon} source="icon-back" /> + <Img height={24} width={24} style={styles.support__close_icon} source="icon-back" /> <Text style={styles.support__close_title}>Settings</Text> </Button> <View style={styles.support__container}> @@ -201,7 +201,7 @@ export default class Support extends Component<SupportProps, SupportState> { onPress={ this.onViewLog } testName='support__view_logs'> <Label>View app logs</Label> - <Img source='icon-extLink' height='16' width='16' /> + <Img source='icon-extLink' height={16} width={16} /> </BlueButton>, <GreenButton key={2} disabled={ !this.validate() } @@ -217,7 +217,7 @@ export default class Support extends Component<SupportProps, SupportState> { <View style={styles.support__form}> <View style={styles.support__form_row}> <View style={styles.support__status_icon}> - <Img source="icon-spinner" alt="" /> + <Img source="icon-spinner" height={60} width={60} alt="" /> </View> <View style={styles.support__status_security__secure}> Secure Connection @@ -235,7 +235,7 @@ export default class Support extends Component<SupportProps, SupportState> { <View style={styles.support__form}> <View style={styles.support__form_row}> <View style={styles.support__status_icon}> - <Img source="icon-success" alt="" /> + <Img source="icon-success" height={60} width={60} alt="" /> </View> <Text style={styles.support__status_security__secure}> Secure Connection @@ -262,7 +262,7 @@ export default class Support extends Component<SupportProps, SupportState> { <View style={styles.support__form}> <View style={styles.support__form_row}> <View style={styles.support__status_icon}> - <Img source="icon-fail" alt="" /> + <Img source="icon-fail" height={60} width={60} alt="" /> </View> <Text style={styles.support__status_security__secure}> Secure Connection diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js index c02e2b5a55..cc6cca788c 100644 --- a/app/components/SupportStyles.js +++ b/app/components/SupportStyles.js @@ -4,7 +4,7 @@ import { colors } from '../config'; export default Object.assign(createViewStyles({ support:{ backgroundColor: colors.darkBlue, - height: '100%', + flex: 1, }, support__container:{ display: 'flex', @@ -26,8 +26,6 @@ export default Object.assign(createViewStyles({ justifyContent: 'flex-start', }, support__close_icon:{ - width: 24, - height: 24, flex: 0, opacity: 0.6, marginRight: 8, diff --git a/app/components/Switch.android.js b/app/components/Switch.android.js new file mode 100644 index 0000000000..17bb976186 --- /dev/null +++ b/app/components/Switch.android.js @@ -0,0 +1,30 @@ +// @flow +import * as React from 'react'; +import { Switch as _Switch } from 'react-native'; + +export type SwitchProps = { + isOn: boolean; + onChange?: (isOn: boolean) => void; +}; + +type State = { +}; + +export default class Switch extends React.Component<SwitchProps, State> { + static defaultProps: SwitchProps = { + isOn: false, + onChange: ()=>{}, + }; + + state = { + }; + + render() { + const { isOn, ...otherProps } = this.props; + return ( + <_Switch { ...otherProps } + value={ isOn } + onValueChange={ this.props.onChange(isOn) } /> + ); + } +} diff --git a/app/components/TransitionContainer.js b/app/components/TransitionContainer.js index c4f6e459f3..687a9ae9e0 100644 --- a/app/components/TransitionContainer.js +++ b/app/components/TransitionContainer.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { Styles, Component, Animated, View, Types, UserInterface } from 'reactxp'; import type { TransitionGroupProps } from '../transitions'; +import getStyles from './TransitionContainerStyles'; type TransitionContainerProps = { children: React.Node, @@ -16,11 +17,6 @@ type State = { dimensions: Types.Dimensions, }; -const transitionContainerStyle = Styles.createViewStyle({ - flex: 1, - position: 'relative' -}); - export default class TransitionContainer extends Component<TransitionContainerProps, State> { constructor(props: TransitionContainerProps) { @@ -30,16 +26,6 @@ export default class TransitionContainer extends Component<TransitionContainerPr this.state = { dimensions, - animationStyles: { - style: Styles.createAnimatedViewStyle({ - position: 'absolute', - width: dimensions.width, - height: dimensions.height, - }), - allowPointerEvents: Styles.createAnimatedViewStyle({ - pointerEvents: 'auto', - }) - } }; } @@ -64,7 +50,7 @@ export default class TransitionContainer extends Component<TransitionContainerPr onFinishedAnimation() { this.setState({ - childrenAnimation: this.state.animationStyles.allowPointerEvents, + childrenAnimation: getStyles().allowPointerEventsStyle, previousChildren: null }); } @@ -88,7 +74,6 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }).start(() => this.onFinishedAnimation()); }); } @@ -112,7 +97,6 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: this.state.dimensions.height, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }).start(() => this.onFinishedAnimation()); }); } @@ -138,13 +122,11 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }), Animated.timing(previousTranslationValue, { toValue: - this.state.dimensions.width / 2, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }) ]); compositeAnimation.start(() => this.onFinishedAnimation()); @@ -172,13 +154,11 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }), Animated.timing(previousTranslationValue, { toValue: this.state.dimensions.width, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, }) ]); compositeAnimation.start(() => this.onFinishedAnimation()); @@ -189,15 +169,14 @@ export default class TransitionContainer extends Component<TransitionContainerPr const { children } = this.props; const { previousChildren, childrenAnimation, previousChildrenAnimation } = this.state; return ( - <View style={[ transitionContainerStyle ]}> - + <View style={ getStyles().transitionContainerStyle }> { previousChildren && (<Animated.View key={ previousChildren && previousChildren.key } - style={[this.state.animationStyles.style, previousChildrenAnimation]}> + style={[getStyles().animationDefaultStyle, previousChildrenAnimation]}> { previousChildren } </Animated.View>) } - <Animated.View key={ children.key } style={[this.state.animationStyles.style, childrenAnimation]}> + <Animated.View key={ children.key } style={[getStyles().animationDefaultStyle, childrenAnimation]}> { children } </Animated.View> diff --git a/app/components/TransitionContainerStyles.android.js b/app/components/TransitionContainerStyles.android.js new file mode 100644 index 0000000000..d335eea680 --- /dev/null +++ b/app/components/TransitionContainerStyles.android.js @@ -0,0 +1,26 @@ +// @flow +import { Styles, UserInterface } from 'reactxp'; +import { MobileAppBridge } from 'NativeModules'; +import { log } from '../lib/platform'; + +const dimensions = UserInterface.measureWindow(); +let menuBarHeight; + +MobileAppBridge.getMenuBarHeight().then(_response => {menuBarHeight = _response;}).catch(e => { + log.error('Failed getting menuBarHeight:', e); +}); + +export default () => { + return { + animationDefaultStyle: Styles.createAnimatedViewStyle({ + position: 'absolute', + width: dimensions.width, + height: dimensions.height - menuBarHeight + 24, + }, false), + allowPointerEventsStyle: null, + transitionContainerStyle: Styles.createViewStyle({ + width: dimensions.width, + height: dimensions.height - menuBarHeight + 24, //TODO: Remove ugly hack since it seems that at least my LG is seems hard to find the real display area ... Probably needs to be fixed for some versions or models + }, false) + }; +};
\ No newline at end of file diff --git a/app/components/TransitionContainerStyles.js b/app/components/TransitionContainerStyles.js new file mode 100644 index 0000000000..eb03570d46 --- /dev/null +++ b/app/components/TransitionContainerStyles.js @@ -0,0 +1,22 @@ +// @flow +import { Styles, UserInterface } from 'reactxp'; + +const dimensions = UserInterface.measureWindow(); +const styles = { + animationDefaultStyle: Styles.createAnimatedViewStyle({ + position: 'absolute', + width: dimensions.width, + height: dimensions.height, + }), + allowPointerEventsStyle: Styles.createAnimatedViewStyle({ + pointerEvents: 'auto', + }), + transitionContainerStyle: Styles.createViewStyle({ + width: dimensions.width, + height: dimensions.height, + }) +}; + +export default () => { + return styles; +};
\ No newline at end of file |