Lots of flex rearrangement on account detail view

Includes removal of ReactCssTransitionGroup for a simpler UI refactor.

package.json

@@ -11,7 +11,6 @@
     "dist": "npm run clear && npm install && gulp dist",
     "test": "npm run lint && npm run test-unit && npm run test-integration",
     "test-unit": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/**/*.js\"",
-    "test-responsive": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/responsive/**/*.js\"",
     "single-test": "METAMASK_ENV=test mocha --require test/helper.js",
     "test-integration": "npm run buildMock && npm run buildCiUnits && testem ci -P 2",
     "lint": "gulp lint",
@@ -106,7 +105,6 @@
     "pumpify": "^1.3.4",
     "qrcode-npm": "0.0.3",
     "react": "^15.0.2",
-    "react-addons-css-transition-group": "^15.0.2",
     "react-dom": "^15.5.4",
     "react-hyperscript": "^2.2.2",
     "react-markdown": "^2.3.0",

ui/app/account-detail.js

@@ -4,7 +4,6 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('./actions')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
 const Identicon = require('./components/identicon')
 const EthBalance = require('./components/eth-balance')
@@ -51,14 +50,9 @@ AccountDetailScreen.prototype.render = function () {
 
   return (
 
-    h('.account-detail-section', {
+    h('.account-detail-section.full-flex-height', [
-      style: {
-        height: '100%',
-        maxWidth: '850px',
-      },
-    }, [
 
-      // identicon, label, balance, etc
+    // identicon, label, balance, etc
       h('.account-data-subsection', {
         style: {
           margin: '0 20px',
@@ -205,14 +199,7 @@ AccountDetailScreen.prototype.render = function () {
       ]),
 
       // subview (tx history, pk export confirm, buy eth warning)
-      h(ReactCSSTransitionGroup, {
+      this.subview(),
-        className: 'css-transition-group',
-        transitionName: 'main',
-        transitionEnterTimeout: 300,
-        transitionLeaveTimeout: 300,
-      }, [
-        this.subview(),
-      ]),
 
     ])
   )
@@ -240,11 +227,7 @@ AccountDetailScreen.prototype.subview = function () {
 AccountDetailScreen.prototype.tabSections = function () {
   const { currentAccountTab } = this.props
 
-  return h('section.tabSection', {
+  return h('section.tabSection.full-flex-height.grow-tenx', [
-    style: {
-      height: '100%',
-    },
-  }, [
 
     h(TabBar, {
       tabs: [

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, {
+        this.renderPrimary(),
-          className: 'css-transition-group',
-          transitionName: 'main',
-          transitionEnterTimeout: 300,
-          transitionLeaveTimeout: 300,
-        }, [
-          this.renderPrimary(),
-        ]),
       ]),
     ])
   )
@@ -123,10 +112,8 @@ App.prototype.renderAppBar = function () {
 
   return (
 
-    h('div', {
+    h('.full-width', {
-      style: {
+      height: '38px',
-        width: '100%',
-      },
     }, [
 
       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 }),
         },
         [

ui/app/components/loading.js

@@ -1,7 +1,6 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 
 
 inherits(LoadingIndicator, Component)
@@ -15,35 +14,27 @@ LoadingIndicator.prototype.render = function () {
   const { isLoading, loadingMessage } = this.props
 
   return (
-    h(ReactCSSTransitionGroup, {
+    isLoading ? h('div', {
-      className: 'css-transition-group',
+      style: {
-      transitionName: 'loader',
+        zIndex: 10,
-      transitionEnterTimeout: 150,
+        position: 'absolute',
-      transitionLeaveTimeout: 150,
+        flexDirection: 'column',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+        background: 'rgba(255, 255, 255, 0.8)',
+      },
     }, [
+      h('img', {
+        src: 'images/loading.svg',
+      }),
 
-      isLoading ? h('div', {
+      h('br'),
-        style: {
-          zIndex: 10,
-          position: 'absolute',
-          flexDirection: 'column',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-          width: '100%',
-          background: 'rgba(255, 255, 255, 0.8)',
-        },
-      }, [
-        h('img', {
-          src: 'images/loading.svg',
-        }),
 
-        h('br'),
+      showMessageIfAny(loadingMessage),
-
+    ]) : null
-        showMessageIfAny(loadingMessage),
-      ]) : null,
-    ])
   )
 }
 

ui/app/components/shapeshift-form.js

@@ -2,7 +2,6 @@ const PersistentForm = require('../../lib/persistent-form')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const actions = require('../actions')
 const Qr = require('./qr-code')
 const isValidAddress = require('../util').isValidAddress
@@ -24,14 +23,7 @@ function ShapeshiftForm () {
 }
 
 ShapeshiftForm.prototype.render = function () {
-  return h(ReactCSSTransitionGroup, {
+  return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain()
-    className: 'css-transition-group',
-    transitionName: 'main',
-    transitionEnterTimeout: 300,
-    transitionLeaveTimeout: 300,
-  }, [
-    this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
-  ])
 }
 
 ShapeshiftForm.prototype.renderMain = function () {

ui/app/components/tab-bar.js

@@ -21,6 +21,7 @@ TabBar.prototype.render = function () {
         background: '#EBEBEB',
         color: '#AEAEAE',
         paddingTop: '4px',
+        minHeight: '30px',
       },
     }, tabs.map((tab) => {
       const { key, content } = tab

ui/app/components/token-list.js

@@ -47,10 +47,11 @@ TokenList.prototype.render = function () {
     return h(TokenCell, tokenData)
   })
 
-  return h('div', [
+  return h('.full-flex-height', [
-    h('ol', {
+    this.renderTokenStatusBar(),
+
+    h('ol.full-flex-height.flex-column', {
       style: {
-        height: '260px',
         overflowY: 'auto',
         display: 'flex',
         flexDirection: 'column',
@@ -63,6 +64,7 @@ TokenList.prototype.render = function () {
           flex-direction: row;
           align-items: center;
           padding: 10px;
+          min-height: 50px;
         }
 
         li.token-cell > h3 {
@@ -76,17 +78,35 @@ TokenList.prototype.render = function () {
 
       `),
       ...tokenViews,
-      tokenViews.length ? null : this.message('No Tokens Found.'),
+      h('.flex-grow'),
     ]),
-    this.addTokenButtonElement(),
   ])
 }
 
-TokenList.prototype.addTokenButtonElement = function () {
+TokenList.prototype.renderTokenStatusBar = function () {
-  return h('div', [
+  const { tokens } = this.state
-    h('div.footer.hover-white.pointer', {
+
+  let msg
+  if (tokens.length > 0) {
+    msg = `You own ${tokens.length} tokens`
+  } else {
+    msg = `No tokens found`
+  }
+
+  return h('div', {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      minHeight: '70px',
+      padding: '10px',
+    },
+  }, [
+    h('span', msg),
+    h('button', {
       key: 'reveal-account-bar',
-      onClick: () => {
+      onClick: (event) => {
+        event.preventDefault()
         this.props.addToken()
       },
       style: {
@@ -97,7 +117,7 @@ TokenList.prototype.addTokenButtonElement = function () {
         alignItems: 'center',
       },
     }, [
-      h('i.fa.fa-plus.fa-lg'),
+      'ADD TOKEN',
     ]),
   ])
 }

ui/app/components/transaction-list.js

@@ -24,9 +24,9 @@ TransactionList.prototype.render = function () {
 
   return (
 
-    h('section.transaction-list', {
+    h('section.transaction-list.full-flex-height', {
       style: {
-        height: '100%',
+        justifyContent: 'center',
       },
     }, [
 
@@ -68,13 +68,15 @@ TransactionList.prototype.render = function () {
               },
             })
           })
-        : h('.flex-center', {
+        : h('.flex-center.full-flex-height', {
           style: {
             flexDirection: 'column',
-            height: '100%',
+            justifyContent: 'center',
           },
         }, [
-          'No transaction history.',
+          h('p', {
+            marginTop: '50px',
+          }, 'No transaction history.'),
         ]),
       ]),
     ])

ui/app/conf-tx.js

@@ -1,6 +1,5 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('./actions')
@@ -92,34 +91,25 @@ ConfirmTxScreen.prototype.render = function () {
 
       warningIfExists(props.warning),
 
-      h(ReactCSSTransitionGroup, {
+      currentTxView({
-        className: 'css-transition-group',
+        // Properties
-        transitionName: 'main',
+        txData: txData,
-        transitionEnterTimeout: 300,
+        key: txData.id,
-        transitionLeaveTimeout: 300,
+        selectedAddress: props.selectedAddress,
-      }, [
+        accounts: props.accounts,
-
+        identities: props.identities,
-        currentTxView({
+        conversionRate,
-          // Properties
+        currentCurrency,
-          txData: txData,
+        blockGasLimit,
-          key: txData.id,
+        // Actions
-          selectedAddress: props.selectedAddress,
+        buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
-          accounts: props.accounts,
+        sendTransaction: this.sendTransaction.bind(this),
-          identities: props.identities,
+        cancelTransaction: this.cancelTransaction.bind(this, txData),
-          conversionRate,
+        signMessage: this.signMessage.bind(this, txData),
-          currentCurrency,
+        signPersonalMessage: this.signPersonalMessage.bind(this, txData),
-          blockGasLimit,
+        cancelMessage: this.cancelMessage.bind(this, txData),
-          // Actions
+        cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
-          buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
+      }),
-          sendTransaction: this.sendTransaction.bind(this),
-          cancelTransaction: this.cancelTransaction.bind(this, txData),
-          signMessage: this.signMessage.bind(this, txData),
-          signPersonalMessage: this.signPersonalMessage.bind(this, txData),
-          cancelMessage: this.cancelMessage.bind(this, txData),
-          cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
-        }),
-
-      ]),
     ])
   )
 }

ui/app/css/index.css

@@ -25,19 +25,48 @@ html, body {
   padding: 0;
 }
 
-.css-transition-group {
+html {
-  flex: 1;
+  min-height: 400px;
-  height: 100%;
+}
+
+.app-root {
+  overflow: hidden;
+  position: relative
+}
+
+.app-primary {
+  display: flex;
 }
 
 input:focus, textarea:focus {
   outline: none;
 }
 
+.full-size {
+  height: 100%;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-flex-height {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
 #app-content {
   overflow-x: hidden;
   min-width: 357px;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 button, input[type="submit"] {
@@ -138,10 +167,6 @@ h2.page-subtitle {
   margin: 12px;
 }
 
-.app-primary {
-
-}
-
 .app-footer {
   padding-bottom: 10px;
   align-items: center;
@@ -413,7 +438,14 @@ input.large-input {
 .account-detail-section {
   display: flex;
   flex-wrap: wrap;
+  overflow-y: auto;
+  flex-direction: inherit;
 }
+
+.grow-tenx {
+  flex-grow: 10;
+}
+
 .name-label{
 
 }

ui/app/css/lib.css

@@ -270,3 +270,4 @@ hr.horizontal-line {
   margin-top: 20px;
   color: red;
 }
+