m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00
Code

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
ui/app/account-detail.js
View File

@ -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){

3
ui/app/app.js
View File

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

11
ui/app/components/panel.js
View File

@ -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),
])
}),

82
ui/app/components/transaction-list.js
View File

@ -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)
}

3
ui/app/conf-tx.js
View File

@ -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,
}, [

2
ui/app/css/index.css
View File

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

6
ui/app/css/lib.css
View File

@ -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;
}

3
ui/app/loading.js
View File

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