diff options
| -rw-r--r-- | ui/app/components/dropdowns/components/account-dropdowns.js | 84 | ||||
| -rw-r--r-- | ui/app/components/modals/modal.js | 4 | ||||
| -rw-r--r-- | ui/app/components/wallet-view.js | 6 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/account-dropdown.scss | 14 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/index.scss | 2 |
5 files changed, 83 insertions, 27 deletions
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index f6606d8bb..043789b6c 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem const Identicon = require('../../identicon') const ethUtil = require('ethereumjs-util') const copyToClipboard = require('copy-to-clipboard') +const { formatBalance } = require('../../../util') class AccountDropdowns extends Component { constructor (props) { @@ -24,12 +25,15 @@ class AccountDropdowns extends Component { } renderAccounts () { - const { identities, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props + const { identities, accounts, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props return Object.keys(identities).map((key, index) => { const identity = identities[key] const isSelected = identity.address === selected + const balanceValue = accounts[key].balance + const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...' + return h( DropdownMenuItem, { @@ -46,45 +50,77 @@ class AccountDropdowns extends Component { ), }, [ - h('div.flex-row', {}, [ + h('div.flex-row.flex-center', {}, [ h('span', { style: { - flex: '1 1 auto', + flex: '1 1 0', + minWidth: '20px', + minHeight: '30px', } - }, isSelected ? h('.check', '✓') : null), + }, [ + h('span', { + style: { + flex: '1 1 auto', + fontSize: '14px', + } + }, isSelected ? h('i.fa.fa-check') : null), + ]), h( Identicon, { address: identity.address, - diameter: 32, + diameter: 24, style: { flex: '1 1 auto', + marginLeft: '10px', }, }, ), - h('span', { + h('span.flex-column', { style: { - flex: '5 5 auto', - fontSize: '24px', - maxWidth: '145px', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, identity.name || ''), + flex: '10 10 auto', + width: '175px', + alignItems: 'flex-start', + justifyContent: 'center', + marginLeft: '10px', + } + }, [ + h('span.account-dropdown-name', { + style: { + fontSize: '18px', + maxWidth: '145px', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, identity.name || ''), + + h('span.account-dropdown-balance', { + style: { + fontSize: '14px', + }, + }, formattedBalance) + ]), h('span', { style: { - flex: '2 2 auto', - fontSize: '18px', + flex: '3 3 auto', }, - onClick: () => { - actions.showNewAccountModal() - } - }, 'Edit'), + }, [ + h('span.account-dropdown-edit-button', { + style: { + fontSize: '16px', + }, + onClick: () => { + actions.showNewAccountModal() + }, + }, [ + 'Edit', + ]) + ]), ]) ] @@ -93,7 +129,7 @@ class AccountDropdowns extends Component { } renderAccountSelector () { - const { actions, dropdownWrapperStyle, useCssTransition } = this.props + const { actions, dropdownWrapperStyle, useCssTransition, innerStyle } = this.props const { accountSelectorActive, menuItemStyles } = this.state return h( @@ -108,7 +144,7 @@ class AccountDropdowns extends Component { maxHeight: '300px', width: '300px', }, - innerStyle: {}, + innerStyle, isOpen: accountSelectorActive, onClickOutside: (event) => { const { classList } = event.target @@ -141,7 +177,7 @@ class AccountDropdowns extends Component { }, ), h('span', { - style: { marginLeft: '20px', fontSize: '24px' }, + style: { marginLeft: '20px', fontSize: '18px' }, onClick: () => { actions.showNewAccountModal() }, @@ -171,7 +207,7 @@ class AccountDropdowns extends Component { h('span', { style: { marginLeft: '20px', - fontSize: '24px', + fontSize: '18px', marginBottom: '5px', }, }, 'Import Account'), diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 4b3d3b09c..77391dfcc 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -18,10 +18,10 @@ const MODALS = { h(BuyOptions, {}, []), ], EDIT_ACCOUNT_NAME: [ - h(AccountDetailsModal, {}, []), + h(EditAccountNameModal, {}, []), ], ACCOUNT_DETAILS: [ - h(EditAccountNameModal, {}, []), + h(AccountDetailsModal, {}, []), ], NEW_ACCOUNT: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 6bde2d9f4..a92ec418e 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -39,7 +39,7 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props + const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount, accounts } = this.props // temporary logs + fake extra wallets console.log(selectedAccount) @@ -96,11 +96,15 @@ WalletView.prototype.render = function () { } }, [ h(AccountDropdowns, { + accounts, style: { position: 'absolute', left: 'calc(50% + 28px + 5.5px)', top: '14px', }, + innerStyle: { + padding: '2px 16px', + }, useCssTransition: true, selected: selectedAddress, network, diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss new file mode 100644 index 000000000..ff3295650 --- /dev/null +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -0,0 +1,14 @@ +.account-dropdown-name { + +} + +.account-dropdown-balance { + color: $dusty-gray; +} + +.account-dropdown-edit-button { + color: $dusty-gray; + &:hover { + color: $white; + } +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 291e09007..ebcd0dba6 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -10,6 +10,8 @@ @import './newui-sections.scss'; +@import './account-dropdown.scss'; + // Balances @import './hero-balance.scss'; |