diff options
Diffstat (limited to 'ui/app')
| -rw-r--r-- | ui/app/components/send/account-list-item.js | 51 | ||||
| -rw-r--r-- | ui/app/components/send/from-dropdown.js | 69 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/account-dropdown.scss | 29 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/send.scss | 37 | ||||
| -rw-r--r-- | ui/app/send-v2.js | 11 |
5 files changed, 105 insertions, 92 deletions
diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js new file mode 100644 index 000000000..b11527d95 --- /dev/null +++ b/ui/app/components/send/account-list-item.js @@ -0,0 +1,51 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const Identicon = require('../identicon') + +inherits(AccountListItem, Component) +function AccountListItem () { + Component.call(this) +} + +module.exports = AccountListItem + +AccountListItem.prototype.render = function () { + const { + account, + handleClick, + icon = null, + } = this.props + + const { identity, balancesToRender } = account + const { name, address } = identity + const { primary, secondary } = balancesToRender + + return h('div.account-list-item', { + onClick: () => handleClick(identity), + }, [ + + h('div.account-list-item__top-row', {}, [ + + h( + Identicon, + { + address, + diameter: 18, + className: 'account-list-item__identicon', + }, + ), + + h('div.account-list-item__account-name', {}, name), + + icon && h('div.account-list-item__icon', [icon]), + + ]), + + h('div.account-list-item__account-primary-balance', {}, primary), + + h('div.account-list-item__account-secondary-balance', {}, secondary), + + ]) +}
\ No newline at end of file diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index c438cefd5..fb0a00cc2 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('../identicon') +const AccountListItem = require('./account-list-item') module.exports = FromDropdown @@ -10,48 +11,15 @@ function FromDropdown () { Component.call(this) } -FromDropdown.prototype.renderSingleIdentity = function ( - account, - handleClick, - inList = false, - selectedIdentity = {} -) { - const { identity, balancesToRender } = account - const { name, address } = identity - const { primary, secondary } = balancesToRender +FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) { + const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } }) - const iconType = inList ? 'check' : 'caret-down' - const showIcon = !inList || address === selectedIdentity.address - - return h('div.send-v2__from-dropdown__account', { - onClick: () => handleClick(identity), - }, [ - - h('div.send-v2__from-dropdown__top-row', {}, [ - - h( - Identicon, - { - address, - diameter: 18, - className: 'send-v2__from-dropdown__identicon', - }, - ), - - h('div.send-v2__from-dropdown__account-name', {}, name), - - showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`), - - ]), - - h('div.send-v2__from-dropdown__account-primary-balance', {}, primary), - - h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary), - - ]) + return currentAccount.identity.address === selectedAccount.identity.address + ? listItemIcon + : null } -FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) { +FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, closeDropdown) { return h('div', {}, [ h('div.send-v2__from-dropdown__close-area', { @@ -60,12 +28,11 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, h('div.send-v2__from-dropdown__list', {}, [ - ...identities.map(identity => this.renderSingleIdentity( - identity, - () => console.log('Select identity'), - true, - selectedIdentity - )) + ...accounts.map(account => h(AccountListItem, { + account, + handleClick: () => console.log('Select identity'), + icon: this.getListItemIcon(account, selectedAccount), + })) ]), @@ -74,8 +41,8 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, FromDropdown.prototype.render = function () { const { - identities, - selectedIdentity, + accounts, + selectedAccount, setFromField, openDropdown, closeDropdown, @@ -84,9 +51,13 @@ FromDropdown.prototype.render = function () { return h('div.send-v2__from-dropdown', {}, [ - this.renderSingleIdentity(selectedIdentity, openDropdown), + h(AccountListItem, { + account: selectedAccount, + handleClick: openDropdown, + icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }) + }), - dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown), + dropdownOpen && this.renderDropdown(accounts, selectedAccount, closeDropdown), ]) diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 1c4620e40..42f02d84d 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -15,3 +15,32 @@ color: $white; } } + +.account-list-item { + &__top-row { + display: flex; + margin-top: 10px; + margin-left: 8px; + position: relative; + } + + &__account-name { + font-size: 16px; + margin-left: 8px; + } + + &__icon { + position: absolute; + right: 12px; + top: 1px; + } + &__account-primary-balance { + margin-left: 34px; + margin-top: 4px; + } + + &__account-secondary-balance { + margin-left: 34px; + color: $dusty-gray; + } +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index ddd22f9fd..dfeb83a0a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -528,43 +528,6 @@ font-size: 12px; color: $tundora; - &__top-row { - display: flex; - margin-top: 10px; - margin-left: 8px; - position: relative; - } - - &__account-name { - font-size: 16px; - margin-left: 8px; - } - - &__caret-down, - &__check { - position: absolute; - right: 12px; - top: 1px; - } - - &__caret-down { - color: $alto; - } - - &__check { - color: $caribbean-green; - } - - &__account-primary-balance { - margin-left: 34px; - margin-top: 4px; - } - - &__account-secondary-balance { - margin-left: 34px; - color: $dusty-gray; - } - &__close-area { position: fixed; top: 0; diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 53e63b784..e0d7c2394 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -2,13 +2,12 @@ const { inherits } = require('util') const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') const connect = require('react-redux').connect -const Identicon = require('./components/identicon') const FromDropdown = require('./components/send/from-dropdown') module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { - const mockIdentities = Array.from(new Array(5)) + const mockAccounts = Array.from(new Array(5)) .map((v, i) => ({ identity: { name: `Test Account Name ${i}`, @@ -20,7 +19,7 @@ function mapStateToProps (state) { } })) - return { identities: mockIdentities } + return { accounts: mockAccounts } } inherits(SendTransactionScreen, PersistentForm) @@ -43,7 +42,7 @@ function SendTransactionScreen () { } SendTransactionScreen.prototype.render = function () { - const { identities } = this.props + const { accounts } = this.props const { dropdownOpen } = this.state return ( @@ -75,8 +74,8 @@ SendTransactionScreen.prototype.render = function () { h(FromDropdown, { dropdownOpen, - identities, - selectedIdentity: identities[0], + accounts, + selectedAccount: accounts[0], setFromField: () => console.log('Set From Field'), openDropdown: () => this.setState({ dropdownOpen: true }), closeDropdown: () => this.setState({ dropdownOpen: false }), |