From 779be75370e10ea9b248686790127200badc3f65 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 9 Aug 2017 21:40:21 -0700 Subject: [WIP] Position account potions dropdown correctly and hook up to action creators --- ui/app/components/account-dropdowns.js | 61 +++++++++++++++++++++++++--------- ui/app/components/dropdown.js | 3 +- ui/app/components/wallet-view.js | 51 ++++++++++++++-------------- 3 files changed, 73 insertions(+), 42 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 3129e0226..3f1b0ee53 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -22,7 +22,7 @@ class AccountDropdowns extends Component { } renderAccounts () { - const { identities, selected } = this.props + const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props return Object.keys(identities).map((key, index) => { const identity = identities[key] @@ -35,10 +35,13 @@ class AccountDropdowns extends Component { onClick: () => { this.props.actions.showAccountDetail(identity.address) }, - style: { - marginTop: index === 0 ? '5px' : '', - fontSize: '24px', - }, + style: Object.assign( + { + marginTop: index === 0 ? '5px' : '', + fontSize: '24px', + }, + menuItemStyles, + ), }, [ h( @@ -59,8 +62,8 @@ class AccountDropdowns extends Component { } renderAccountSelector () { - const { actions } = this.props - const { accountSelectorActive } = this.state + const { actions, dropdownWrapperStyle } = this.props + const { accountSelectorActive, menuItemStyles } = this.state return h( Dropdown, @@ -93,6 +96,10 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => actions.addNewAccount(), + style: Object.assign( + {}, + menuItemStyles, + ), }, [ h( @@ -112,6 +119,10 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => actions.showImportPage(), + style: Object.assign( + {}, + menuItemStyles, + ), }, [ h( @@ -137,16 +148,20 @@ class AccountDropdowns extends Component { } renderAccountOptions () { - const { actions } = this.props - const { optionsMenuActive } = this.state + const { actions, dropdownWrapperStyle } = this.props + const { optionsMenuActive, menuItemStyles } = this.state return h( Dropdown, { - style: { - marginLeft: '-215px', - minWidth: '180px', - }, + style: Object.assign( + { + marginLeft: '-10px', + position: 'absolute', + width: '29vh', // affects both mobile and laptop views + }, + dropdownWrapperStyle, + ), isOpen: optionsMenuActive, onClickOutside: () => { const { classList } = event.target @@ -166,6 +181,10 @@ class AccountDropdowns extends Component { const url = genAccountLink(selected, network) global.platform.openWindow({ url }) }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'View account on Etherscan', ), @@ -178,6 +197,10 @@ class AccountDropdowns extends Component { var identity = identities[selected] actions.showQrView(selected, identity ? identity.name : '') }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'Show QR Code', ), @@ -190,6 +213,10 @@ class AccountDropdowns extends Component { const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) copyToClipboard(checkSumAddress) }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'Copy Address to clipboard', ), @@ -200,6 +227,10 @@ class AccountDropdowns extends Component { onClick: () => { actions.requestAccountExport() }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'Export Private Key', ), @@ -208,7 +239,7 @@ class AccountDropdowns extends Component { } render () { - const { style, enableAccountsSelector, enableAccountOptions } = this.props + const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props const { optionsMenuActive, accountSelectorActive } = this.state return h( @@ -267,7 +298,7 @@ AccountDropdowns.defaultProps = { AccountDropdowns.propTypes = { identities: PropTypes.objectOf(PropTypes.object), - selected: PropTypes.string, + selected: PropTypes.string, // TODO: refactor to be more explicit: selectedAddress } const mapDispatchToProps = (dispatch) => { diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index d9593efe2..07ef75f12 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -67,7 +67,7 @@ class DropdownMenuItem extends Component { }, style: Object.assign({ listStyle: 'none', - padding: '8px 0px 8px 0px', + padding: '8px 0px', fontSize: '18px', fontStyle: 'normal', fontFamily: 'Montserrat Regular', @@ -75,6 +75,7 @@ class DropdownMenuItem extends Component { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', + color: 'white', }, style), }, children diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3c331a100..56aac1f13 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -6,14 +6,20 @@ const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns const Content = require('./wallet-content-display') const actions = require('../actions') +const selectors = require('../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { + return { network: state.metamask.network, sidebarOpen: state.appState.sidebarOpen, identities: state.metamask.identities, + accounts: state.metamask.accounts, + selectedAddress: selectors.getSelectedAddress(state), + selectedIdentity: selectors.getSelectedIdentity(state), + selectedAccount: selectors.getSelectedAccount(state), } } @@ -32,8 +38,7 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address - const { network, responsiveDisplayClassname, style, identities } = this.props + const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -45,20 +50,32 @@ WalletView.prototype.render = function () { }, [ h('div.flex-row.account-options-menu', { + style: { + position: 'relative', + }, }, [ h(AccountDropdowns, { - // selected, - // network, - // identities: props.identities, + selected: selectedAddress, + network, + identities, enableAccountOptions: true, + dropdownWrapperStyle: { + padding: '1px 15px', + marginLeft: '-25px', + position: 'absolute', + width: '122%', //TODO, refactor all of this component out into media queries + }, + menuItemStyles: { + padding: '0px 0px', + margin: '22px 0px', + } }, []), ]), h('div.flex-column.flex-center', { style: { - // constrains size of absolutely positioned wrappers position: 'relative', }, }, [ @@ -70,7 +87,7 @@ WalletView.prototype.render = function () { }, [ h(Identicon, { diameter: 54, - address: selected, + address: selectedAddress, }), ]), @@ -84,31 +101,14 @@ WalletView.prototype.render = function () { style: { position: 'absolute', left: 'calc(50% + 28px + 5.5px)', - // left: '42px', - // top: '-10px' - // left: '66.5%', top: '19.5%', }, - selected, + selected: selectedAddress, network, identities, enableAccountsSelector: true, }, []), ]), - - h( - AccountDropdowns, - { - style: { - marginLeft: 'auto', - cursor: 'pointer', - }, - selected, - network, // TODO: this prop could be in the account dropdown container - identities: {}, - }, - ), - ]), h(Content, { @@ -128,6 +128,5 @@ WalletView.prototype.render = function () { marginTop: '1.3em', } }) - ]) } -- cgit