m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

WIP: Working on new layout

Browse Source
This commit is contained in:
Frankie 2016-06-30 11:15:32 -07:00
parent 4433618e95
commit 5252504e3f
4 changed files with 120 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,115 +44,132 @@ AccountDetailScreen.prototype.render = function () {
return ( return (
h('.account-detail-section.flex-column.flex-grow', [ h('.account-detail-section', [
// identicon, label, balance, etc // identicon, label, balance, etc
h('.account-data-subsection.flex-column.flex-grow', { h('.account-data-subsection', {
style: { style: {
margin: '0 20px', margin: '0 20px',
}, },
}, [ }, [
// header - identicon + nav // header - identicon + nav
h('.flex-row.flex-center', { h('div', {
style: { style: {
marginTop: 28, marginTop: 28,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'flex-start',
}, },
}, [ }, [
// large identicon // large identicon and addresses
h('.identicon-wrapper.flex-column.flex-center.select-none', [ h('.identicon-wrapper.select-none', [
h(Identicon, { h(Identicon, {
diameter: 62, diameter: 62,
address: selected, address: selected,
}), }),
]), ]),
]), h('flex-column', {
style: {
h('.flex-center', { lineHeight: '10px',
style: { marginLeft: '15px',
height: '62px',
paddingTop: '8px',
},
}, [
h(EditableLabel, {
textValue: identity ? identity.name : '',
state: {
isEditingLabel: false,
},
saveText: (text) => {
props.dispatch(actions.saveAccountLabel(selected, text))
}, },
}, [ }, [
h(EditableLabel, {
textValue: identity ? identity.name : '',
state: {
isEditingLabel: false,
},
saveText: (text) => {
props.dispatch(actions.saveAccountLabel(selected, text))
},
}, [
// What is shown when not editing + edit text:
h('label.editing-label', [h('.edit-text', 'edit')]),
h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
]),
h('.flex-row',{
style:{
width: '15em',
justifyContent: 'space-between',
alignItems: 'baseline',
}
},[
h('div', {
style: {
overflow: 'hidden',
textOverflow: 'ellipsis',
paddingTop: '3px',
width: '5em',
fontSize: 'smaller',
},
}, ethUtil.toChecksumAddress(selected)),
h('.flex-row', {
style: {
justifyContent: 'flex-end',
},
}, [
h(CopyButton, {
value: ethUtil.toChecksumAddress(selected),
}),
h(Tooltip, {
title: 'Export Private Key',
}, [
h('div', {
style: {
margin: '5px',
},
}, [
h('img.cursor-pointer.color-orange', {
src: 'images/key-32.png',
onClick: () => this.requestAccountExport(selected),
style: {
margin: '0px 5px',
width: '20px',
height: '20px',
position: 'relative',
top: '3px',
right: '4px',
},
}),
]),
]),
]),
]),
h('.flex-row', {
style: {
justifyContent: 'space-between',
alignItems: 'flex-start',
}
}, [
h(EtherBalance, {
value: account && account.balance,
style: {
lineHeight: '7px',
},
}),
h('button', {
onClick: () => props.dispatch(actions.showSendPage()),
style: {
margin: 10,
},
}, 'SEND'),
]),
// What is shown when not editing + edit text:
h('label.editing-label', [h('.edit-text', 'edit')]),
h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
]), ]),
]), ]),
// address and getter actions // address and getter actions
h('.flex-row', {
style: {
marginBottom: 16,
},
}, [
h('div', {
style: {
overflow: 'hidden',
textOverflow: 'ellipsis',
paddingTop: '3px',
},
}, ethUtil.toChecksumAddress(selected)),
h(CopyButton, {
value: ethUtil.toChecksumAddress(selected),
}),
h(Tooltip, {
title: 'Export Private Key',
}, [
h('div', {
style: {
margin: '5px',
},
}, [
h('img.cursor-pointer.color-orange', {
src: 'images/key-32.png',
onClick: () => this.requestAccountExport(selected),
style: {
margin: '0px 5px',
width: '20px',
height: '20px',
position: 'relative',
top: '3px',
right: '4px',
},
}),
]),
]),
]),
// balance + send // balance + send
h('.flex-row.flex-space-between', [
h(EtherBalance, {
value: account && account.balance,
style: {
lineHeight: '50px',
},
}),
h('button', {
onClick: () => props.dispatch(actions.showSendPage()),
style: {
margin: 10,
},
}, 'SEND'),
]),
]), ]),
@ -214,4 +231,3 @@ AccountDetailScreen.prototype.transactionList = function () {
AccountDetailScreen.prototype.requestAccountExport = function () { AccountDetailScreen.prototype.requestAccountExport = function () {
this.props.dispatch(actions.requestExportAccount()) this.props.dispatch(actions.requestExportAccount())
} }

18
ui/app/components/eth-balance.js
View File

@ -24,8 +24,24 @@ EthBalanceComponent.prototype.render = function () {
style: { style: {
display: 'inline', display: 'inline',
}, },
}, value), }, this.renderBalance(value)),
]) ])
) )
} }
EthBalanceComponent.prototype.renderBalance = function (value) {
if (value === 'None') return value
var balance = value[0]
var label = value[1]
return (
h('.flex-column',[
h('div', balance),
h('div', label)
])
)
}

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

@ -387,7 +387,7 @@ input.large-input {
} }
.name-label{ .name-label{
margin-bottom: 14px;
} }
.edit-text { .edit-text {
height: 100%; height: 100%;

6
ui/app/util.js
View File

@ -105,14 +105,14 @@ function formatBalance (balance, decimalsToKeep) {
if (afterDecimal !== '0') { if (afterDecimal !== '0') {
var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits
if (sigFigs) { afterDecimal = sigFigs[0] } if (sigFigs) { afterDecimal = sigFigs[0] }
formatted = '0.' + afterDecimal + ' ETH' formatted = ['0.' + afterDecimal, ' ETH']
} }
} else { } else {
formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ' ETH' formatted = [beforeDecimal + '.' + afterDecimal.slice(0, 3), ' ETH']
} }
} else { } else {
afterDecimal += Array(decimalsToKeep).join('0') afterDecimal += Array(decimalsToKeep).join('0')
formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ' ETH' formatted = [beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep), ' ETH']
} }
return formatted return formatted
} }