1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

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

This commit is contained in:
kumavis 2016-05-13 16:28:46 -07:00
parent 82db0afb30
commit 46f1ab8b48
8 changed files with 156 additions and 118 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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