ui - redesign - trans group + + account detail + tx list fixes

ui/app/account-detail.js

@@ -42,14 +42,21 @@ AccountDetailScreen.prototype.render = function() {
 
   return (
 
-    h('.account-detail-section.flex-column.flex-grow', {
+    h('.account-detail-section.flex-column.flex-grow', [
+
+      // identicon, label, balance, etc
+      h('.account-data-subsection.flex-column.flex-grow', {
         style: {
-        width: 330,
+          margin: '0 20px',
-        marginTop: 28,
         },
       }, [
 
-      h('.flex-row.flex-space-between', [
+        // header - identicon + nav
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginTop: 28,
+          },
+        }, [
 
           // invisible placeholder for later
           h('i.fa.fa-users.fa-lg.color-orange', {
@@ -73,6 +80,7 @@ AccountDetailScreen.prototype.render = function() {
 
         ]),
 
+        // account label
         h('h2.font-medium.color-forest.flex-center', {
           style: {
             paddingTop: 8,
@@ -80,6 +88,7 @@ AccountDetailScreen.prototype.render = function() {
           },
         }, identity && identity.name),
 
+        // address and getter actions
         h('.flex-row.flex-space-between', {
           style: {
             marginBottom: 16,
@@ -106,13 +115,14 @@ AccountDetailScreen.prototype.render = function() {
 
         ]),
 
+        // balance + send
         h('.flex-row.flex-space-between', [
 
           h('div', {
             style: {
               lineHeight: '50px',
             },
-        }, formatBalance(account.balance)),
+          }, formatBalance(account && account.balance)),
 
           h('button', {
             onClick: () => this.props.dispatch(actions.showSendPage()),
@@ -120,7 +130,11 @@ AccountDetailScreen.prototype.render = function() {
 
         ]),
       
+      ]),
+
+      // subview (tx history, pk export confirm)
       h(ReactCSSTransitionGroup, {
+        className: 'css-transition-group',
         transitionName: 'main',
         transitionEnterTimeout: 300,
         transitionLeaveTimeout: 300,
@@ -155,15 +169,17 @@ AccountDetailScreen.prototype.transactionList = function() {
   var state = this.props
   var transactions = state.transactions
 
-  return transactionList(transactions
+  var txsToRender = transactions
-  // only transactions that have a hash
-  .filter(tx => tx.hash)
     // only transactions that are from the current address
     .filter(tx => tx.txParams.from === state.address)
     // only transactions that are on the current network
     .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
+    // only transactions that have a hash
+    .filter(tx => tx.hash)
     // sort by recency
-  .sort((a, b) => b.time - a.time), state.networkVersion)
+    .sort((a, b) => b.time - a.time)
+
+  return transactionList(txsToRender, state.networkVersion)
 }
 
 AccountDetailScreen.prototype.navigateToAccounts = function(event){

ui/app/app.js

@@ -104,7 +104,8 @@ App.prototype.render = function() {
         }
       }, [
         h(ReactCSSTransitionGroup, {
-          transitionName: "main",
+          className: 'css-transition-group',
+          transitionName: 'main',
           transitionEnterTimeout: 300,
           transitionLeaveTimeout: 300,
         }, [

ui/app/components/panel.js

@@ -18,12 +18,15 @@ Panel.prototype.render = function() {
   var identity = state.identity || {}
   var account = state.account || {}
   var isFauceting = state.isFauceting
+  var style = {
+    flex: '1 0 auto',
+  }
+
+  if (state.onClick) style.cursor = 'pointer'
 
   return (
     h('.identity-panel.flex-row.flex-space-between', {
-      style: {
+      style,
-        flex: '1 0 auto',
-      },
       onClick: state.onClick,
     }, [
 
@@ -42,7 +45,7 @@ Panel.prototype.render = function() {
           return h('.flex-row.flex-space-between', {
             key: '' + Math.round(Math.random() * 1000000),
           }, [
-            h('label.font-small', attr.key),
+            h('label.font-small.no-select', attr.key),
             h('span.font-small', attr.value),
           ])
         }),

ui/app/components/transaction-list.js

@@ -5,33 +5,50 @@ const explorerLink = require('../../lib/explorer-link')
 const Panel = require('./panel')
 
 module.exports = function(transactions, network) {
-  return h('section', [
+  return (
 
-    h('.current-domain-panel.flex-center.font-small', [
+    h('section.transaction-list', [
-      h('span', 'Transactions'),
+
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+        },
+      }, [
+        'Transactions',
       ]),
 
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '180px',
+          height: '204px',
+          margin: '0 20px',
           textAlign: 'center',
         },
+      }, (
+
+        transactions.length ?
+          transactions.map(renderTransaction)
+        :
+          [h('.flex-center', {
+            style: {
+              height: '100%',
             },
+          }, 'No transaction history...')]
+
+      ))
 
-      [
+    ])
 
-        transactions.map((transaction) => {
+  )
+ }
 
+function renderTransaction(transaction){
   var panelOpts = {
     key: `tx-${transaction.hash}`,
     identiconKey: transaction.txParams.to,
-            style: {
-              cursor: 'pointer',
-            },
     onClick: (event) => {
       var url = explorerLink(transaction.hash, parseInt(network))
-              chrome.tabs.create({ url });
+      chrome.tabs.create({ url })
     },
     attributes: [
       {
@@ -46,9 +63,4 @@ module.exports = function(transactions, network) {
   }
 
   return h(Panel, panelOpts)
-        })
+}
-      ]
-    )
-
-  ])
- }

ui/app/conf-tx.js

@@ -77,7 +77,8 @@ ConfirmTxScreen.prototype.render = function() {
       warningIfExists(state.warning),
 
       h(ReactCSSTransitionGroup, {
-        transitionName: "main",
+        className: 'css-transition-group',
+        transitionName: 'main',
         transitionEnterTimeout: 300,
         transitionLeaveTimeout: 300,
       }, [

ui/app/css/index.css

@@ -327,7 +327,7 @@ app sections
 /* account detail screen */
 
 .account-detail-section {
-  margin: 0 20px;
+
 }
 
 /* tx confirm */

ui/app/css/lib.css

@@ -100,7 +100,7 @@
 }
 
 .select-none {
-  cursor: default;
+  cursor: inherit;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -139,6 +139,10 @@
   font-weight: bold;
 }
 
+.text-transform-uppercase {
+  text-transform: uppercase;
+}
+
 .font-small {
   font-size: 12px;
 }

ui/app/loading.js

@@ -23,7 +23,8 @@ LoadingIndicator.prototype.render = function() {
 
   return (
     h(ReactCSSTransitionGroup, {
-      transitionName: "loader",
+      className: 'css-transition-group',
+      transitionName: 'loader',
       transitionEnterTimeout: 150,
       transitionLeaveTimeout: 150,
     }, [