From 5252504e3f1b8437d6152861f06ee490f723276e Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 30 Jun 2016 11:15:32 -0700 Subject: [PATCH] WIP: Working on new layout --- ui/app/account-detail.js | 170 +++++++++++++++++-------------- ui/app/components/eth-balance.js | 18 +++- ui/app/css/index.css | 2 +- ui/app/util.js | 6 +- 4 files changed, 114 insertions(+), 82 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 02a807dbb..da9fc47fe 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -44,115 +44,132 @@ AccountDetailScreen.prototype.render = function () { return ( - h('.account-detail-section.flex-column.flex-grow', [ + h('.account-detail-section', [ // identicon, label, balance, etc - h('.account-data-subsection.flex-column.flex-grow', { + h('.account-data-subsection', { style: { margin: '0 20px', }, }, [ // header - identicon + nav - h('.flex-row.flex-center', { + h('div', { style: { marginTop: 28, + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'flex-start', }, }, [ - // large identicon - h('.identicon-wrapper.flex-column.flex-center.select-none', [ + // large identicon and addresses + h('.identicon-wrapper.select-none', [ h(Identicon, { diameter: 62, address: selected, }), ]), - ]), - - h('.flex-center', { - style: { - height: '62px', - paddingTop: '8px', - }, - }, [ - h(EditableLabel, { - textValue: identity ? identity.name : '', - state: { - isEditingLabel: false, - }, - saveText: (text) => { - props.dispatch(actions.saveAccountLabel(selected, text)) + h('flex-column', { + style: { + lineHeight: '10px', + marginLeft: '15px', }, }, [ + 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), - ]), - ]), - - // address and getter actions - h('.flex-row', { - style: { - marginBottom: 16, - }, - }, [ - - h('div', { - style: { - overflow: 'hidden', - textOverflow: 'ellipsis', - paddingTop: '3px', - }, - }, ethUtil.toChecksumAddress(selected)), + // 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(CopyButton, { - value: ethUtil.toChecksumAddress(selected), - }), - h(Tooltip, { - title: 'Export Private Key', - }, [ - h('div', { + 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: { - margin: '5px', - }, + justifyContent: 'space-between', + alignItems: 'flex-start', + } }, [ - h('img.cursor-pointer.color-orange', { - src: 'images/key-32.png', - onClick: () => this.requestAccountExport(selected), + + h(EtherBalance, { + value: account && account.balance, style: { - margin: '0px 5px', - width: '20px', - height: '20px', - position: 'relative', - top: '3px', - right: '4px', + lineHeight: '7px', }, }), - ]), - ]), - ]), + h('button', { + onClick: () => props.dispatch(actions.showSendPage()), + style: { + margin: 10, + }, + }, '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'), + // address and getter actions - ]), + // balance + send ]), @@ -214,4 +231,3 @@ AccountDetailScreen.prototype.transactionList = function () { AccountDetailScreen.prototype.requestAccountExport = function () { this.props.dispatch(actions.requestExportAccount()) } - diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 710d4fc8b..279feba35 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -24,8 +24,24 @@ EthBalanceComponent.prototype.render = function () { style: { 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) + ]) + ) + +} diff --git a/ui/app/css/index.css b/ui/app/css/index.css index fc10e56b6..27444ab6f 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -387,7 +387,7 @@ input.large-input { } .name-label{ - margin-bottom: 14px; + } .edit-text { height: 100%; diff --git a/ui/app/util.js b/ui/app/util.js index db12a1282..a88e659b4 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -105,14 +105,14 @@ function formatBalance (balance, decimalsToKeep) { if (afterDecimal !== '0') { var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits if (sigFigs) { afterDecimal = sigFigs[0] } - formatted = '0.' + afterDecimal + ' ETH' + formatted = ['0.' + afterDecimal, ' ETH'] } } else { - formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ' ETH' + formatted = [beforeDecimal + '.' + afterDecimal.slice(0, 3), ' ETH'] } } else { afterDecimal += Array(decimalsToKeep).join('0') - formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ' ETH' + formatted = [beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep), ' ETH'] } return formatted }