diff options
24 files changed, 180 insertions, 97 deletions
diff --git a/app/assets/css/style.css b/app/assets/css/style.css index 619e40daf3..22d8c1f046 100644 --- a/app/assets/css/style.css +++ b/app/assets/css/style.css @@ -6,5 +6,4 @@ /* app */ @import '../../components/PlatformWindow.css'; @import '../../components/CustomScrollbars.css'; -@import '../../components/Layout.css'; @import '../../components/Switch.css'; diff --git a/app/components/Account.js b/app/components/Account.js index afa36fe31a..e58affdd1d 100644 --- a/app/components/Account.js +++ b/app/components/Account.js @@ -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/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js index 8f6f1e81ba..7e577abb55 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, 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..0c03dfd80e 100644 --- a/app/components/HeaderBar.js +++ b/app/components/HeaderBar.js @@ -50,7 +50,7 @@ export default class HeaderBar extends Component { {this.props.showSettings ? <Button style={ styles.headerbar__settings } onPress={ this.props.onSettings } testName="headerbar__settings"> - <Img source='icon-settings' style={ styles.headerbar__settings_icon } /> + <Img source='icon-settings' style={ styles.headerbar__settings_icon } hoverStyle={ styles.settings_icon_hover }/> </Button> : null} </View> diff --git a/app/components/HeaderBarStyles.js b/app/components/HeaderBarStyles.js index a8569f2f81..179e45ae55 100644 --- a/app/components/HeaderBarStyles.js +++ b/app/components/HeaderBarStyles.js @@ -47,6 +47,10 @@ export default { headerbar__settings_icon: { width: 24, height: 24, + color: colors.white60, + }, + settings_icon_hover: { + color: colors.white, }, }), ...createTextStyles({ 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..c59db65b1a 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>; } @@ -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..47d7467f7d 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, @@ -61,7 +57,7 @@ export default { }, account_input_button: { flex: 0, - border: 0, + borderWidth: 0, width: 48, alignItems: 'center', justifyContent: 'center', @@ -73,7 +69,6 @@ export default { account_input_button__invisible: { color: colors.white, backgroundColor: colors.white, - visibility: 'hidden', opacity: 0, }, account_dropdown__spacer: { @@ -131,20 +126,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 +151,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..d569c8f2f7 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -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..702750ade1 100644 --- a/app/components/Support.js +++ b/app/components/Support.js @@ -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..1745f982dd 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', 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..b5144bbff0 100644 --- a/app/components/TransitionContainer.js +++ b/app/components/TransitionContainer.js @@ -88,7 +88,7 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, + useNativeDriver: false, }).start(() => this.onFinishedAnimation()); }); } @@ -112,7 +112,7 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: this.state.dimensions.height, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, + useNativeDriver: false, }).start(() => this.onFinishedAnimation()); }); } @@ -138,13 +138,13 @@ export default class TransitionContainer extends Component<TransitionContainerPr toValue: 0, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, + useNativeDriver: false, }), Animated.timing(previousTranslationValue, { toValue: - this.state.dimensions.width / 2, easing: Animated.Easing.InOut(), duration: nextProps.duration, - useNativeDriver: true, + useNativeDriver: false, }) ]); compositeAnimation.start(() => this.onFinishedAnimation()); diff --git a/app/index.android.js b/app/index.android.js new file mode 100644 index 0000000000..1e9594a1c9 --- /dev/null +++ b/app/index.android.js @@ -0,0 +1,6 @@ +import React from 'react'; +import RX from 'reactxp'; +import App from './App'; + +RX.App.initialize(true, true); +RX.UserInterface.setMainView(<App />);
\ No newline at end of file diff --git a/rn-cli.config.js b/rn-cli.config.js new file mode 100644 index 0000000000..dfc815ae30 --- /dev/null +++ b/rn-cli.config.js @@ -0,0 +1,10 @@ +const path = require('path'); + +module.exports = { + getProjectRoots: () => { + const roots = []; + roots.push(__dirname); + roots.push(path.resolve(__dirname, './app')); + return roots; + }, +}; |