From 46f1ab8b4826678241f94f8d9b5fac4f55fc09f4 Mon Sep 17 00:00:00 2001 From: kumavis Date: Fri, 13 May 2016 16:28:46 -0700 Subject: [PATCH] ui - redesign - trans group + + account detail + tx list fixes --- ui/app/account-detail.js | 164 ++++++++++++++------------ ui/app/app.js | 3 +- ui/app/components/panel.js | 11 +- ui/app/components/transaction-list.js | 82 +++++++------ ui/app/conf-tx.js | 3 +- ui/app/css/index.css | 2 +- ui/app/css/lib.css | 6 +- ui/app/loading.js | 3 +- 8 files changed, 156 insertions(+), 118 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 884a5d9c5..663014293 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -42,85 +42,99 @@ AccountDetailScreen.prototype.render = function() { return ( - h('.account-detail-section.flex-column.flex-grow', { - style: { - width: 330, - marginTop: 28, - }, - }, [ + h('.account-detail-section.flex-column.flex-grow', [ - h('.flex-row.flex-space-between', [ - - // invisible placeholder for later - h('i.fa.fa-users.fa-lg.color-orange', { - style: { - visibility: 'hidden', - }, - }), - - // large identicon - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - h(Identicon, { - diameter: 62, - address: selected, - }), - ]), - - // small accounts nav - h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', { - onClick: this.navigateToAccounts.bind(this), - }), - - ]), - - h('h2.font-medium.color-forest.flex-center', { + // identicon, label, balance, etc + h('.account-data-subsection.flex-column.flex-grow', { style: { - paddingTop: 8, - marginBottom: 32, - }, - }, identity && identity.name), - - h('.flex-row.flex-space-between', { - style: { - marginBottom: 16, + margin: '0 20px', }, }, [ - h('div', { + // header - identicon + nav + h('.flex-row.flex-space-between', { style: { - lineHeight: '16px', + marginTop: 28, }, - }, addressSummary(selected)), + }, [ - h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', { - onClick: () => this.requestAccountExport(account.address), - }), + // invisible placeholder for later + h('i.fa.fa-users.fa-lg.color-orange', { + style: { + visibility: 'hidden', + }, + }), - h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', { - onClick: () => console.warn('QRCode not implented...'), - }), + // large identicon + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + h(Identicon, { + diameter: 62, + address: selected, + }), + ]), - h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', { - onClick: () => copyToClipboard(account.address), - }), - - ]), - - h('.flex-row.flex-space-between', [ - - h('div', { - style: { - lineHeight: '50px', - }, - }, formatBalance(account.balance)), - - h('button', { - onClick: () => this.props.dispatch(actions.showSendPage()), - }, 'SEND ETH'), + // small accounts nav + h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', { + onClick: this.navigateToAccounts.bind(this), + }), + ]), + + // account label + h('h2.font-medium.color-forest.flex-center', { + style: { + paddingTop: 8, + marginBottom: 32, + }, + }, identity && identity.name), + + // address and getter actions + h('.flex-row.flex-space-between', { + style: { + marginBottom: 16, + }, + }, [ + + h('div', { + style: { + lineHeight: '16px', + }, + }, addressSummary(selected)), + + h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', { + onClick: () => this.requestAccountExport(account.address), + }), + + h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', { + onClick: () => console.warn('QRCode not implented...'), + }), + + h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', { + onClick: () => copyToClipboard(account.address), + }), + + ]), + + // balance + send + h('.flex-row.flex-space-between', [ + + h('div', { + style: { + lineHeight: '50px', + }, + }, formatBalance(account && account.balance)), + + h('button', { + onClick: () => this.props.dispatch(actions.showSendPage()), + }, 'SEND ETH'), + + ]), + ]), + // 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 - // 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) - // sort by recency - .sort((a, b) => b.time - a.time), state.networkVersion) + var txsToRender = transactions + // 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) + + return transactionList(txsToRender, state.networkVersion) } AccountDetailScreen.prototype.navigateToAccounts = function(event){ diff --git a/ui/app/app.js b/ui/app/app.js index 9f91aa47a..bd4249956 100644 --- a/ui/app/app.js +++ b/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, }, [ diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js index 2f5a3715d..5d72d6068 100644 --- a/ui/app/components/panel.js +++ b/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: { - flex: '1 0 auto', - }, + style, 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), ]) }), diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 0c025cae3..e10dfecf3 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -5,50 +5,62 @@ 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('span', 'Transactions'), - ]), + h('section.transaction-list', [ - h('.tx-list', { + 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.map((transaction) => { - - var panelOpts = { - key: `tx-${transaction.hash}`, - identiconKey: transaction.txParams.to, + transactions.length ? + transactions.map(renderTransaction) + : + [h('.flex-center', { style: { - cursor: 'pointer', + height: '100%', }, - onClick: (event) => { - var url = explorerLink(transaction.hash, parseInt(network)) - chrome.tabs.create({ url }); - }, - attributes: [ - { - key: 'TO', - value: addressSummary(transaction.txParams.to), - }, - { - key: 'VALUE', - value: formatBalance(transaction.txParams.value), - }, - ] - } + }, 'No transaction history...')] - return h(Panel, panelOpts) - }) - ] - ) + )) - ]) + ]) + + ) } + +function renderTransaction(transaction){ + var panelOpts = { + key: `tx-${transaction.hash}`, + identiconKey: transaction.txParams.to, + onClick: (event) => { + var url = explorerLink(transaction.hash, parseInt(network)) + chrome.tabs.create({ url }) + }, + attributes: [ + { + key: 'TO', + value: addressSummary(transaction.txParams.to), + }, + { + key: 'VALUE', + value: formatBalance(transaction.txParams.value), + }, + ] + } + + return h(Panel, panelOpts) +} \ No newline at end of file diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 8ab79c3b9..9092c85c9 100644 --- a/ui/app/conf-tx.js +++ b/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, }, [ diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 9dbfb6518..18d921700 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -327,7 +327,7 @@ app sections /* account detail screen */ .account-detail-section { - margin: 0 20px; + } /* tx confirm */ diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 14ef272ad..22e578ec6 100644 --- a/ui/app/css/lib.css +++ b/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; } diff --git a/ui/app/loading.js b/ui/app/loading.js index 9288256de..f6279d5cf 100644 --- a/ui/app/loading.js +++ b/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, }, [