From 5252504e3f1b8437d6152861f06ee490f723276e Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 30 Jun 2016 11:15:32 -0700 Subject: 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 } -- cgit v1.2.3 From 42cd0b69e76537022c7766cae430e496371818b6 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 30 Jun 2016 12:43:28 -0700 Subject: Implemt new account layout --- ui/app/account-detail.js | 37 ++++++++++++++++++++--------------- ui/app/components/eth-balance.js | 22 +++++++++++++++------ ui/app/components/transaction-list.js | 5 +++-- ui/app/css/fonts.css | 9 ++++++++- ui/app/css/index.css | 15 +++++++------- ui/app/util.js | 6 +++--- 6 files changed, 59 insertions(+), 35 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index da9fc47fe..aae1d434f 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -56,7 +56,7 @@ AccountDetailScreen.prototype.render = function () { // header - identicon + nav h('div', { style: { - marginTop: 28, + marginTop: '15px', display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-start', @@ -90,23 +90,32 @@ AccountDetailScreen.prototype.render = function () { h('label.editing-label', [h('.edit-text', 'edit')]), h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name), ]), - h('.flex-row',{ - style:{ + h('.flex-row', { + style: { width: '15em', justifyContent: 'space-between', alignItems: 'baseline', - } - },[ + }, + }, [ + + // address + h('div', { style: { overflow: 'hidden', textOverflow: 'ellipsis', paddingTop: '3px', width: '5em', - fontSize: 'smaller', + fontSize: '13px', + fontFamily: 'Montserrat Thin', + textRendering: 'geometricPrecision', + marginTop: '10px', + marginBottom: '15px', + color: '#AEAEAE', }, }, ethUtil.toChecksumAddress(selected)), + // copy and export h('.flex-row', { style: { @@ -132,20 +141,20 @@ AccountDetailScreen.prototype.render = function () { margin: '0px 5px', width: '20px', height: '20px', - position: 'relative', - top: '3px', - right: '4px', }, }), ]), ]), ]), ]), + + // account ballence + h('.flex-row', { style: { justifyContent: 'space-between', alignItems: 'flex-start', - } + }, }, [ h(EtherBalance, { @@ -158,7 +167,8 @@ AccountDetailScreen.prototype.render = function () { h('button', { onClick: () => props.dispatch(actions.showSendPage()), style: { - margin: 10, + marginBottom: '20px', + marginRight: '8px', }, }, 'SEND'), @@ -166,11 +176,6 @@ AccountDetailScreen.prototype.render = function () { ]), ]), - - // address and getter actions - - // balance + send - ]), // subview (tx history, pk export confirm) diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 279feba35..c7240ea21 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -29,19 +29,29 @@ EthBalanceComponent.prototype.render = function () { ) } - EthBalanceComponent.prototype.renderBalance = function (value) { if (value === 'None') return value - var balance = value[0] - var label = value[1] + var balance = value.split(' ')[0] + var label = value.split(' ')[1] return ( - h('.flex-column',[ + h('.flex-column', { + style: { + alignItems: 'flex-end', + lineHeight: '13px', + fontFamily: 'Montserrat Thin', + textRendering: 'geometricPrecision', + }, + }, [ h('div', balance), - h('div', label) + h('div', { + style: { + color: ' #AEAEAE', + fontSize: '12px', + }, + }, label), ]) ) - } diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index a1a5db475..886aa7c00 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -35,6 +35,8 @@ TransactionList.prototype.render = function () { style: { background: '#EBEBEB', color: '#AEAEAE', + paddingTop: '4px', + paddingBottom: '4px', }, }, [ 'Transactions', @@ -43,7 +45,7 @@ TransactionList.prototype.render = function () { h('.tx-list', { style: { overflowY: 'auto', - height: '204px', + height: '305px', padding: '0 20px', textAlign: 'center', }, @@ -67,4 +69,3 @@ TransactionList.prototype.render = function () { ]) ) } - diff --git a/ui/app/css/fonts.css b/ui/app/css/fonts.css index e9473af55..da024ce84 100644 --- a/ui/app/css/fonts.css +++ b/ui/app/css/fonts.css @@ -7,7 +7,7 @@ src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; - font-size: 'small', + font-size: 'small'; } @@ -18,3 +18,10 @@ font-weight: normal; font-style: normal; } + +@font-face { + font-family: 'Montserrat Thin'; + src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff'); + src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); + text-rendering: geometricPrecision; +} diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 27444ab6f..d8b84e8b6 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -153,6 +153,7 @@ textarea.twelve-word-phrase { top: 8px; width: 5.2em; line-height: 9px; + text-rendering: geometricPrecision; } .check { @@ -248,7 +249,7 @@ app sections .sizing-input{ font-size: 1em; - height: 31px; + height: 30px; } .editable-label{ display: flex; @@ -394,12 +395,12 @@ input.large-input { visibility: hidden; } .editing-label { - cursor: text; - width: 100%; - position: relative; - top: 7px; - text-align: right; - font-size: small; + display: flex; + justify-content: flex-start; + margin-left: 50px; + margin-bottom: 2px; + font-size: 11px; + text-rendering: geometricPrecision; color: #F7861C; } .name-label:hover .edit-text { diff --git a/ui/app/util.js b/ui/app/util.js index a88e659b4..db12a1282 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 } -- cgit v1.2.3 From 8465be340a884401c9edbf942f01920a07ddf2e4 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 30 Jun 2016 14:57:17 -0700 Subject: Add to CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 769a42825..c0c0bd424 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Implement new account design. - Added a network indicator mark in dropdown menu - Added network name next to network indicator - Add copy transaction hash button to completed transaction list items. -- cgit v1.2.3