From 2913dcb82c9191881e0a411a33bd6fc32171935c Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 11 May 2016 02:11:31 -0700 Subject: ui - redesign - account details --- ui/app/account-detail.js | 95 +++++++++++++++++++++++++++--------------- ui/app/components/identicon.js | 14 ++++--- ui/app/css/index.css | 6 +-- ui/app/css/lib.css | 22 ++++++++++ 4 files changed, 95 insertions(+), 42 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index ae4552df6..a71e85da8 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -5,9 +5,12 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const copyToClipboard = require('copy-to-clipboard') const actions = require('./actions') +const addressSummary = require('./util').addressSummary +const formatBalance = require('./util').formatBalance const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const AccountPanel = require('./components/account-panel') +const Identicon = require('./components/identicon') const transactionList = require('./components/transaction-list') const ExportAccountView = require('./components/account-export') @@ -41,49 +44,80 @@ AccountDetailScreen.prototype.render = function() { h('.account-detail-section.flex-column.flex-grow', { style: { - width: '330px', + width: 330, + 'margin-top': 28, }, }, [ - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { + 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: account.address + }), + ]), + + // small accounts nav + h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', { onClick: this.navigateToAccounts.bind(this), }), - h('h2.page-subtitle', 'Account Detail'), + ]), - // account summary, with embedded action buttons - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - key: 'accountPanel' - }), + h('h2.font-medium.color-forest.flex-center', { + style: { + 'padding-top': 8, + 'margin-bottom': 32, + }, + }, identity && identity.name), - h('div', { + h('.flex-row.flex-space-between', { style: { - display: 'flex', - } + 'margin-bottom': 16, + }, }, [ - h('button', { - onClick: () => { - copyToClipboard(identity.address) + h('div', { + style: { + 'line-height': 16, }, - }, 'COPY ADDR'), + }, addressSummary(account.address)), - h('button', { - onClick: () => { - this.props.dispatch(actions.showSendPage()) + 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), + }), + + ]), + + h('.flex-row.flex-space-between', [ + + h('div', { + style: { + 'line-height': 50, }, - }, 'SEND'), + }, formatBalance(account.balance)), h('button', { - onClick: () => { - this.requestAccountExport(identity.address) - }, - }, 'EXPORT'), + onClick: () => this.props.dispatch(actions.showSendPage()), + }, 'SEND ETH'), + ]), h(ReactCSSTransitionGroup, { @@ -93,12 +127,7 @@ AccountDetailScreen.prototype.render = function() { }, [ this.subview(), ]), - // transaction table - /* - h('section.flex-column', [ - h('span', 'your transaction history will go here.'), - ]), - */ + ]) ) } diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 3fbf3c699..ef625cc62 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -10,18 +10,20 @@ inherits(IdenticonComponent, Component) function IdenticonComponent() { Component.call(this) - this.diameter = 46 + this.defaultDiameter = 46 } IdenticonComponent.prototype.render = function() { + var state = this.props + var diameter = state.diameter || this.defaultDiameter return ( h('div', { key: 'identicon-' + this.props.address, style: { display: 'inline-block', - height: this.diameter, - width: this.diameter, - borderRadius: this.diameter / 2, + height: diameter, + width: diameter, + borderRadius: diameter / 2, overflow: 'hidden', }, }) @@ -33,12 +35,12 @@ IdenticonComponent.prototype.componentDidMount = function(){ var address = state.address if (!address) return - console.log('rendering for address ' + address) var numericRepresentation = jsNumberForAddress(address) var container = findDOMNode(this) // jazzicon with hack to fix inline svg error - var identicon = jazzicon(this.diameter, numericRepresentation) + var diameter = state.diameter || this.defaultDiameter + var identicon = jazzicon(diameter, numericRepresentation) var identiconSrc = identicon.innerHTML var dataUri = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(identiconSrc) var img = document.createElement('img') diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 59577f76c..9dbfb6518 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -28,18 +28,18 @@ html, body { } button { + font-family: 'Transat Black'; outline: none; cursor: pointer; margin: 10px; - padding: 6px; + padding: 8px 12px; border: none; - border-radius: 3px; background: #F7861C; - font-weight: 500; color: white; transform-origin: center center; transition: transform 50ms ease-in; } + button:hover { transform: scale(1.1); } diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 6223a8c06..14ef272ad 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -1,3 +1,13 @@ +/* color */ + +.color-orange { + color: #F7861C; +} + +.color-forest { + color: #08525D; +} + /* lib */ .full-width { @@ -47,6 +57,10 @@ flex: none; } +.flex-basis-auto { + flex-basis: auto; +} + .flex-grow { flex: 1 1 auto; } @@ -105,6 +119,10 @@ transform: scale(0.95); } +.cursor-disabled { + cursor: not-allowed; +} + .margin-bottom-sml { margin-bottom: 20px; } @@ -125,6 +143,10 @@ font-size: 12px; } +.font-medium { + font-size: 1.2em; +} + /* Send Screen */ .send-screen { margin: 0 20px; -- cgit