From 0ea6749dbc923a6e796b1de4bbd301d931739b9d Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 25 Jul 2017 18:22:31 -0700 Subject: Lots of flex rearrangement on account detail view Includes removal of ReactCssTransitionGroup for a simpler UI refactor. --- ui/app/app.js | 31 ++++++++----------------------- 1 file changed, 8 insertions(+), 23 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 973cb756c..6da48b9b6 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -3,7 +3,6 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('./actions') -const ReactCSSTransitionGroup = require('react-addons-css-transition-group') // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -67,17 +66,15 @@ App.prototype.render = function () { const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null - log.debug('Main ui render function') return ( - h('.flex-column.flex-grow.full-height', { + h('.flex-column.full-height', { style: { // Windows was showing a vertical scroll bar: overflow: 'hidden', position: 'relative', - height: '100%', alignItems: 'center', }, }, [ @@ -93,20 +90,12 @@ App.prototype.render = function () { }), // panel content - h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), { + h('.app-primary' + (transForward ? '.from-right' : '.from-left'), { style: { - height: '100%', maxWidth: '850px', }, }, [ - h(ReactCSSTransitionGroup, { - className: 'css-transition-group', - transitionName: 'main', - transitionEnterTimeout: 300, - transitionLeaveTimeout: 300, - }, [ - this.renderPrimary(), - ]), + this.renderPrimary(), ]), ]) ) @@ -123,10 +112,8 @@ App.prototype.renderAppBar = function () { return ( - h('div', { - style: { - width: '100%', - }, + h('.full-width', { + height: '38px', }, [ h('.app-header.flex-row.flex-space-between', { @@ -328,11 +315,6 @@ App.prototype.renderDropdown = function () { onClick: () => { this.props.dispatch(actions.showConfigPage()) }, }, 'Settings'), - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { this.props.dispatch(actions.showImportPage()) }, - }, 'Import Account'), - h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), onClick: () => { this.props.dispatch(actions.lockMetamask()) }, @@ -515,6 +497,8 @@ App.prototype.toggleMetamaskActive = function () { App.prototype.renderCustomOption = function (provider) { const { rpcTarget, type } = provider + const props = this.props + if (type !== 'rpc') return null // Concatenate long URLs @@ -533,6 +517,7 @@ App.prototype.renderCustomOption = function (provider) { DropdownMenuItem, { key: rpcTarget, + onClick: () => props.dispatch(actions.setCustomRpc(rpcTarget)), closeMenu: () => this.setState({ isNetworkMenuOpen: false }), }, [ -- cgit v1.2.3