diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 24561c32e..22a883096 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -128,6 +128,7 @@ AccountDetailScreen.prototype.render = function () { selected, network, identities: props.identities, + enableAccountOptions: true, }, ), ] @@ -152,7 +153,6 @@ AccountDetailScreen.prototype.render = function () { fontSize: '13px', fontFamily: 'Montserrat Light', textRendering: 'geometricPrecision', - marginTop: '10px', marginBottom: '15px', color: '#AEAEAE', }, diff --git a/ui/app/app.js b/ui/app/app.js index e23caa72b..0592496fc 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -30,6 +30,7 @@ const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') +const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns module.exports = connect(mapStateToProps)(App) @@ -37,6 +38,13 @@ inherits(App, Component) function App () { Component.call(this) } function mapStateToProps (state) { + const { + identities, + accounts, + address, + } = state.metamask + const selected = address || Object.keys(accounts)[0] + return { // state from plugin isLoading: state.appState.isLoading, @@ -57,6 +65,10 @@ function mapStateToProps (state) { lastUnreadNotice: state.metamask.lastUnreadNotice, lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], + + // state needed to get account dropdown temporarily rendering from app bar + identities, + selected, } } @@ -169,17 +181,27 @@ App.prototype.renderAppBar = function () { }, }, [ + props.isUnlocked && h(AccountDropdowns, { + style: {}, + enableAccountsSelector: true, + identities: this.props.identities, + selected: this.props.selected, + network: this.props.network, + }, []), + // hamburger props.isUnlocked && h(SandwichExpando, { + className: 'sandwich-expando', width: 16, barHeight: 2, padding: 0, isOpen: state.isMainMenuOpen, color: 'rgb(247,146,30)', - onClick: (event) => { - event.preventDefault() + onClick: () => { event.stopPropagation() - this.setState({ isMainMenuOpen: !state.isMainMenuOpen }) + this.setState({ + isMainMenuOpen: !state.isMainMenuOpen, + }) }, }), ]), @@ -227,6 +249,9 @@ App.prototype.renderNetworkDropdown = function () { key: 'main', closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), onClick: () => props.dispatch(actions.setProviderType('mainnet')), + style: { + fontSize: '18px', + }, }, [ h('.menu-icon.diamond'), @@ -241,6 +266,9 @@ App.prototype.renderNetworkDropdown = function () { key: 'ropsten', closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), onClick: () => props.dispatch(actions.setProviderType('ropsten')), + style: { + fontSize: '18px', + }, }, [ h('.menu-icon.red-dot'), @@ -255,6 +283,9 @@ App.prototype.renderNetworkDropdown = function () { key: 'kovan', closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), onClick: () => props.dispatch(actions.setProviderType('kovan')), + style: { + fontSize: '18px', + }, }, [ h('.menu-icon.hollow-diamond'), @@ -269,6 +300,9 @@ App.prototype.renderNetworkDropdown = function () { key: 'rinkeby', closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), onClick: () => props.dispatch(actions.setProviderType('rinkeby')), + style: { + fontSize: '18px', + }, }, [ h('.menu-icon.golden-square'), @@ -283,6 +317,9 @@ App.prototype.renderNetworkDropdown = function () { key: 'default', closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), onClick: () => props.dispatch(actions.setDefaultRpcTarget()), + style: { + fontSize: '18px', + }, }, [ h('i.fa.fa-question-circle.fa-lg.menu-icon'), @@ -299,6 +336,9 @@ App.prototype.renderNetworkDropdown = function () { { closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), onClick: () => this.props.dispatch(actions.showConfigPage()), + style: { + fontSize: '18px', + }, }, [ h('i.fa.fa-question-circle.fa-lg.menu-icon'), @@ -318,9 +358,13 @@ App.prototype.renderDropdown = function () { isOpen: isOpen, zIndex: 11, onClickOutside: (event) => { - const { classList } = event.target - const isNotToggleElement = !classList.contains('sandwich-expando') - if (isNotToggleElement) { + const classList = event.target.classList + const parentClassList = event.target.parentElement.classList + + const isToggleElement = classList.contains('sandwich-expando') || + parentClassList.contains('sandwich-expando') + + if (isOpen && !isToggleElement) { this.setState({ isMainMenuOpen: false }) } }, @@ -579,7 +623,6 @@ App.prototype.renderCommonRpc = function (rpcList, provider) { if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { return null } else { - return h( DropdownMenuItem, { diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 79e6cff59..da92619e1 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -17,14 +17,14 @@ class AccountDropdowns extends Component { accountSelectorActive: false, optionsMenuActive: false, } - this.accountSelectorToggleClassName = 'fa-angle-down' + this.accountSelectorToggleClassName = 'accounts-selector' this.optionsMenuToggleClassName = 'fa-ellipsis-h' } renderAccounts () { const { identities, selected } = this.props - return Object.keys(identities).map((key) => { + return Object.keys(identities).map((key, index) => { const identity = identities[key] const isSelected = identity.address === selected @@ -35,17 +35,24 @@ class AccountDropdowns extends Component { onClick: () => { this.props.actions.showAccountDetail(identity.address) }, + style: { + marginTop: index === 0 ? '5px' : '', + fontSize: '24px', + }, }, [ h( Identicon, { address: identity.address, - diameter: 16, + diameter: 32, + style: { + marginLeft: '10px', + }, }, ), - h('span', { style: { marginLeft: '10px' } }, identity.name || ''), - h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null), + h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''), + h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), ] ) }) @@ -59,10 +66,15 @@ class AccountDropdowns extends Component { Dropdown, { style: { - marginLeft: '-125px', + marginLeft: '-238px', + marginTop: '38px', minWidth: '180px', overflowY: 'auto', maxHeight: '300px', + width: '300px', + }, + innerStyle: { + padding: '8px 25px', }, isOpen: accountSelectorActive, onClickOutside: (event) => { @@ -85,10 +97,13 @@ class AccountDropdowns extends Component { h( Identicon, { - diameter: 16, + style: { + marginLeft: '10px', + }, + diameter: 32, }, ), - h('span', { style: { marginLeft: '10px' } }, 'Create Account'), + h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'), ], ), h( @@ -101,10 +116,19 @@ class AccountDropdowns extends Component { h( Identicon, { - diameter: 16, + style: { + marginLeft: '10px', + }, + diameter: 32, }, ), - h('span', { style: { marginLeft: '10px' } }, 'Import Account'), + h('span', { + style: { + marginLeft: '20px', + fontSize: '24px', + marginBottom: '5px', + }, + }, 'Import Account'), ] ), ] @@ -119,7 +143,7 @@ class AccountDropdowns extends Component { Dropdown, { style: { - marginLeft: '-162px', + marginLeft: '-215px', minWidth: '180px', }, isOpen: optionsMenuActive, @@ -183,7 +207,7 @@ class AccountDropdowns extends Component { } render () { - const { style } = this.props + const { style, enableAccountsSelector, enableAccountOptions } = this.props const { optionsMenuActive, accountSelectorActive } = this.state return h( @@ -192,10 +216,18 @@ class AccountDropdowns extends Component { style: style, }, [ - h( - 'i.fa.fa-angle-down', + enableAccountsSelector && h( + // 'i.fa.fa-angle-down', + 'div.cursor-pointer.color-orange.accounts-selector', { - style: {}, + style: { + // fontSize: '1.8em', + background: 'url(images/switch_acc.svg) white center center no-repeat', + height: '25px', + width: '25px', + transform: 'scale(0.75)', + marginRight: '3px', + }, onClick: (event) => { event.stopPropagation() this.setState({ @@ -206,10 +238,13 @@ class AccountDropdowns extends Component { }, this.renderAccountSelector(), ), - h( + enableAccountOptions && h( 'i.fa.fa-ellipsis-h', { - style: { 'marginLeft': '10px'}, + style: { + marginRight: '0.5em', + fontSize: '1.8em', + }, onClick: (event) => { event.stopPropagation() this.setState({ @@ -225,6 +260,11 @@ class AccountDropdowns extends Component { } } +AccountDropdowns.defaultProps = { + enableAccountsSelector: false, + enableAccountOptions: false, +} + AccountDropdowns.propTypes = { identities: PropTypes.objectOf(PropTypes.object), selected: PropTypes.string, diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index 759800fd6..b99e0aa9a 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -54,7 +54,7 @@ Dropdown.propTypes = { class DropdownMenuItem extends Component { render () { - const { onClick, closeMenu, children } = this.props + const { onClick, closeMenu, children, style } = this.props return h( 'li.dropdown-menu-item', @@ -66,13 +66,14 @@ class DropdownMenuItem extends Component { style: { listStyle: 'none', padding: '8px 0px 8px 0px', - fontSize: '12px', + fontSize: '18px', fontStyle: 'normal', fontFamily: 'Montserrat Regular', cursor: 'pointer', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', + ...style, }, }, children diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js index 636e82ba1..c26505193 100644 --- a/ui/app/components/notice.js +++ b/ui/app/components/notice.js @@ -21,7 +21,7 @@ Notice.prototype.render = function () { return ( h('.flex-column.flex-center.flex-grow', { style: { - width: '100%', + width: '100%', }, }, [ h('h3.flex-center.text-transform-uppercase.terms-header', { diff --git a/ui/app/css/index.css b/ui/app/css/index.css index e9a70b3a2..49b432a1f 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -201,7 +201,7 @@ textarea.twelve-word-phrase { } .check { - margin-left: 7px; + margin-left: 12px; color: #F7861C; flex: 1 0 auto; display: flex; diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 98570859a..6fff4f56a 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -238,10 +238,15 @@ hr.horizontal-line { .menu-icon { display: inline-block; - height: 9px; - min-width: 9px; + height: 12px; + min-width: 12px; margin: 13px; } + +i.fa.fa-question-circle.fa-lg.menu-icon { + font-size: 18px; +} + .ether-icon { background: rgb(0, 163, 68); border-radius: 20px;