From 877648623e0b483d05291379b17d5a6646375b34 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 18 May 2016 12:13:19 -0700 Subject: [PATCH] ui - redesign - sendTransaction --- ui/app/account-detail.js | 3 + ui/app/css/index.css | 54 ++++++++---- ui/app/css/lib.css | 17 ---- ui/app/send.js | 182 +++++++++++++++++++++++++++++---------- ui/app/unlock.js | 5 +- 5 files changed, 177 insertions(+), 84 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 00d40a9ee..2b58fb239 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -126,6 +126,9 @@ AccountDetailScreen.prototype.render = function() { h('button', { onClick: () => this.props.dispatch(actions.showSendPage()), + style: { + margin: 10, + }, }, 'SEND ETH'), ]), diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 860491a3d..75f434da6 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -21,7 +21,7 @@ html, body { background: #F7F7F7; } -input:focus { +input:focus, textarea:focus { outline: none; } @@ -36,7 +36,7 @@ button { font-family: 'Transat Black'; outline: none; cursor: pointer; - margin: 10px; + /*margin: 10px;*/ padding: 8px 12px; border: none; background: #F7861C; @@ -52,16 +52,6 @@ button:active { transform: scale(0.95); } -/*input, textarea { - width: 300px; - padding: 6px; - border-radius: 6px; - border-style: solid; - outline: none; - border: 1px solid #F5A623; - background: #FAF6F0; -}*/ - a { text-decoration: none; color: inherit; @@ -80,7 +70,6 @@ app } button.primary { - margin: 10px; padding: 8px 12px; background: #F7861C; box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); @@ -234,32 +223,43 @@ app sections .unlock-screen input[type=password] { width: 260px; - height: 36px; + /*height: 36px; margin-bottom: 24px; - padding: 8px; + padding: 8px;*/ } /* Webkit */ -.password-box::-webkit-input-placeholder { +.unlock-screen input::-webkit-input-placeholder { text-align: center; font-size: 1.2em; } /* Firefox 18- */ -.password-box:-moz-placeholder { +.unlock-screen input:-moz-placeholder { text-align: center; font-size: 1.2em; } /* Firefox 19+ */ -.password-box::-moz-placeholder { +.unlock-screen input::-moz-placeholder { text-align: center; font-size: 1.2em; } /* IE */ -.password-box:-ms-input-placeholder { +.unlock-screen input:-ms-input-placeholder { text-align: center; font-size: 1.2em; } +input.large-input, textarea.large-input { + /*margin-bottom: 24px;*/ + padding: 8px; +} + +input.large-input { + height: 36px; +} + + + /* accounts */ .accounts-section { @@ -369,3 +369,19 @@ app sections background: #FAF6F0; } +/* Send Screen */ + +.send-screen { + +} + +.send-screen section { + margin: 8px 16px; +} + +.send-screen input { + width: 100%; + font-size: 12px; + letter-spacing: 0.1em; +} + diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index c366a5d5f..60c56422d 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -151,23 +151,6 @@ font-size: 1.2em; } -/* Send Screen */ -.send-screen { - margin: 0 20px; -} -.send-screen section { - margin: 7px; - display: flex; - flex-direction: row; - justify-content: center; -} -.send-screen details { - width: 100%; -} -.send-screen section input { - width: 100%; -} - hr.horizontal-line { display: block; height: 1px; diff --git a/ui/app/send.js b/ui/app/send.js index 43b4e3a04..56b23ee24 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -2,9 +2,12 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect +const Identicon = require('./components/identicon') const actions = require('./actions') const util = require('./util') const numericBalance = require('./util').numericBalance +const formatBalance = require('./util').formatBalance +const addressSummary = require('./util').addressSummary const AccountPanel = require('./components/account-panel') const ethUtil = require('ethereumjs-util') @@ -32,78 +35,163 @@ function SendTransactionScreen() { SendTransactionScreen.prototype.render = function() { var state = this.props + var address = state.address var account = state.account var identity = state.identity return ( + h('.send-screen.flex-column.flex-grow', [ - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.back.bind(this), - }), - h('h2.page-subtitle', 'Send Transaction'), + // + // Sender Profile + // + + h('.account-data-subsection.flex-column.flex-grow', { + style: { + margin: '0 20px', + }, + }, [ + + // header - identicon + nav + h('.flex-row.flex-space-between', { + style: { + marginTop: 28, + }, + }, [ + + // invisible placeholder for later + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + onClick: this.back.bind(this), + }), + + // large identicon + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + h(Identicon, { + diameter: 62, + address: address, + }), + ]), + + // 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: 8, + }, + }, identity && identity.name), + + // address and getter actions + h('.flex-row.flex-center', { + style: { + marginBottom: 8, + }, + }, [ + + h('div', { + style: { + lineHeight: '16px', + }, + }, addressSummary(address)), + + ]), + + // balance + h('.flex-row.flex-center', [ + + h('div', formatBalance(account && account.balance)), + + ]), + ]), - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - }), + // + // Required Fields + // - h('section.recipient', [ - h('input.address', { + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginTop: 32, + marginBottom: 16, + }, + }, [ + 'Send Transaction', + ]), + + // 'to' field + h('section.flex-row.flex-center', [ + h('input.address.large-input', { placeholder: 'Recipient Address', }) ]), - h('section.ammount', [ - h('input.ether', { + // 'amount' and send button + h('section.flex-row.flex-center', [ + + h('input.ether.large-input', { placeholder: 'Amount', type: 'number', - style: { marginRight: '6px' } + style: { + marginRight: 6, + }, }), - h('select.currency', { - name: 'currency', - }, [ - h('option', { value: 'ether' }, 'Ether (1e18 wei)'), - h('option', { value: 'wei' }, 'Wei'), - ]), - ]), - h('section.data', [ - h('details', [ - h('summary', { - style: { - cursor: 'pointer', - outline: 'none', - }, - }, 'Advanced'), - h('textarea.txData', { - type: 'textarea', - placeholder: 'Transaction data (optional)', - style: { - height: '100px', - width: '100%', - resize: 'none', - } - }) - ]) - ]), - - h('section', { - }, [ - h('button', { + h('button.primary', { onClick: this.onSubmit.bind(this), + style: { + textTransform: 'uppercase', + }, }, 'Send') + ]), - state.warning ? h('span.error', state.warning.split('.')[0]) : null, + // + // Optional Fields + // + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginTop: 16, + marginBottom: 16, + }, + }, [ + 'Tranasactional Data (optional)', + ]), + + // 'data' field + h('section.flex-row.flex-center', [ + h('input.txData.large-input', { + placeholder: '0x01234', + style: { + width: '100%', + resize: 'none', + } + }), + ]), + + // state.warning ? h('span.error', state.warning.split('.')[0]) : null, + ]) + ) } +SendTransactionScreen.prototype.navigateToAccounts = function(event){ + event.stopPropagation() + this.props.dispatch(actions.showAccountsPage()) +} + SendTransactionScreen.prototype.back = function() { var address = this.props.address this.props.dispatch(actions.backToAccountDetail(address)) diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 512906c67..687bb5e52 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -41,7 +41,7 @@ UnlockScreen.prototype.render = function() { }, }, 'MetaMask'), - h('input.password-box', { + h('input.large-input', { type: 'password', id: 'password-box', placeholder: 'enter password', @@ -60,6 +60,9 @@ UnlockScreen.prototype.render = function() { h('button.primary.cursor-pointer', { onClick: this.onSubmit.bind(this), + style: { + margin: 10, + }, }, 'Unlock'), ])