1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

[WIP] Position account potions dropdown correctly and hook up to action creators

This commit is contained in:
sdtsui 2017-08-09 21:40:21 -07:00
parent be116ecfbd
commit 779be75370
3 changed files with 73 additions and 42 deletions

View File

@ -22,7 +22,7 @@ class AccountDropdowns extends Component {
} }
renderAccounts () { renderAccounts () {
const { identities, selected } = this.props const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props
return Object.keys(identities).map((key, index) => { return Object.keys(identities).map((key, index) => {
const identity = identities[key] const identity = identities[key]
@ -35,10 +35,13 @@ class AccountDropdowns extends Component {
onClick: () => { onClick: () => {
this.props.actions.showAccountDetail(identity.address) this.props.actions.showAccountDetail(identity.address)
}, },
style: { style: Object.assign(
marginTop: index === 0 ? '5px' : '', {
fontSize: '24px', marginTop: index === 0 ? '5px' : '',
}, fontSize: '24px',
},
menuItemStyles,
),
}, },
[ [
h( h(
@ -59,8 +62,8 @@ class AccountDropdowns extends Component {
} }
renderAccountSelector () { renderAccountSelector () {
const { actions } = this.props const { actions, dropdownWrapperStyle } = this.props
const { accountSelectorActive } = this.state const { accountSelectorActive, menuItemStyles } = this.state
return h( return h(
Dropdown, Dropdown,
@ -93,6 +96,10 @@ class AccountDropdowns extends Component {
{ {
closeMenu: () => {}, closeMenu: () => {},
onClick: () => actions.addNewAccount(), onClick: () => actions.addNewAccount(),
style: Object.assign(
{},
menuItemStyles,
),
}, },
[ [
h( h(
@ -112,6 +119,10 @@ class AccountDropdowns extends Component {
{ {
closeMenu: () => {}, closeMenu: () => {},
onClick: () => actions.showImportPage(), onClick: () => actions.showImportPage(),
style: Object.assign(
{},
menuItemStyles,
),
}, },
[ [
h( h(
@ -137,16 +148,20 @@ class AccountDropdowns extends Component {
} }
renderAccountOptions () { renderAccountOptions () {
const { actions } = this.props const { actions, dropdownWrapperStyle } = this.props
const { optionsMenuActive } = this.state const { optionsMenuActive, menuItemStyles } = this.state
return h( return h(
Dropdown, Dropdown,
{ {
style: { style: Object.assign(
marginLeft: '-215px', {
minWidth: '180px', marginLeft: '-10px',
}, position: 'absolute',
width: '29vh', // affects both mobile and laptop views
},
dropdownWrapperStyle,
),
isOpen: optionsMenuActive, isOpen: optionsMenuActive,
onClickOutside: () => { onClickOutside: () => {
const { classList } = event.target const { classList } = event.target
@ -166,6 +181,10 @@ class AccountDropdowns extends Component {
const url = genAccountLink(selected, network) const url = genAccountLink(selected, network)
global.platform.openWindow({ url }) global.platform.openWindow({ url })
}, },
style: Object.assign(
{},
menuItemStyles,
),
}, },
'View account on Etherscan', 'View account on Etherscan',
), ),
@ -178,6 +197,10 @@ class AccountDropdowns extends Component {
var identity = identities[selected] var identity = identities[selected]
actions.showQrView(selected, identity ? identity.name : '') actions.showQrView(selected, identity ? identity.name : '')
}, },
style: Object.assign(
{},
menuItemStyles,
),
}, },
'Show QR Code', 'Show QR Code',
), ),
@ -190,6 +213,10 @@ class AccountDropdowns extends Component {
const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
copyToClipboard(checkSumAddress) copyToClipboard(checkSumAddress)
}, },
style: Object.assign(
{},
menuItemStyles,
),
}, },
'Copy Address to clipboard', 'Copy Address to clipboard',
), ),
@ -200,6 +227,10 @@ class AccountDropdowns extends Component {
onClick: () => { onClick: () => {
actions.requestAccountExport() actions.requestAccountExport()
}, },
style: Object.assign(
{},
menuItemStyles,
),
}, },
'Export Private Key', 'Export Private Key',
), ),
@ -208,7 +239,7 @@ class AccountDropdowns extends Component {
} }
render () { render () {
const { style, enableAccountsSelector, enableAccountOptions } = this.props const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props
const { optionsMenuActive, accountSelectorActive } = this.state const { optionsMenuActive, accountSelectorActive } = this.state
return h( return h(
@ -267,7 +298,7 @@ AccountDropdowns.defaultProps = {
AccountDropdowns.propTypes = { AccountDropdowns.propTypes = {
identities: PropTypes.objectOf(PropTypes.object), identities: PropTypes.objectOf(PropTypes.object),
selected: PropTypes.string, selected: PropTypes.string, // TODO: refactor to be more explicit: selectedAddress
} }
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {

View File

@ -67,7 +67,7 @@ class DropdownMenuItem extends Component {
}, },
style: Object.assign({ style: Object.assign({
listStyle: 'none', listStyle: 'none',
padding: '8px 0px 8px 0px', padding: '8px 0px',
fontSize: '18px', fontSize: '18px',
fontStyle: 'normal', fontStyle: 'normal',
fontFamily: 'Montserrat Regular', fontFamily: 'Montserrat Regular',
@ -75,6 +75,7 @@ class DropdownMenuItem extends Component {
display: 'flex', display: 'flex',
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center', alignItems: 'center',
color: 'white',
}, style), }, style),
}, },
children children

View File

@ -6,14 +6,20 @@ const Identicon = require('./identicon')
const AccountDropdowns = require('./account-dropdowns').AccountDropdowns const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
const Content = require('./wallet-content-display') const Content = require('./wallet-content-display')
const actions = require('../actions') const actions = require('../actions')
const selectors = require('../selectors')
module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
network: state.metamask.network, network: state.metamask.network,
sidebarOpen: state.appState.sidebarOpen, sidebarOpen: state.appState.sidebarOpen,
identities: state.metamask.identities, 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 = () => {} const noop = () => {}
WalletView.prototype.render = function () { WalletView.prototype.render = function () {
const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props
const { network, responsiveDisplayClassname, style, identities } = this.props
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {}, style: {},
@ -45,20 +50,32 @@ WalletView.prototype.render = function () {
}, [ }, [
h('div.flex-row.account-options-menu', { h('div.flex-row.account-options-menu', {
style: {
position: 'relative',
},
}, [ }, [
h(AccountDropdowns, { h(AccountDropdowns, {
// selected, selected: selectedAddress,
// network, network,
// identities: props.identities, identities,
enableAccountOptions: true, 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', { h('div.flex-column.flex-center', {
style: { style: {
// constrains size of absolutely positioned wrappers
position: 'relative', position: 'relative',
}, },
}, [ }, [
@ -70,7 +87,7 @@ WalletView.prototype.render = function () {
}, [ }, [
h(Identicon, { h(Identicon, {
diameter: 54, diameter: 54,
address: selected, address: selectedAddress,
}), }),
]), ]),
@ -84,31 +101,14 @@ WalletView.prototype.render = function () {
style: { style: {
position: 'absolute', position: 'absolute',
left: 'calc(50% + 28px + 5.5px)', left: 'calc(50% + 28px + 5.5px)',
// left: '42px',
// top: '-10px'
// left: '66.5%',
top: '19.5%', top: '19.5%',
}, },
selected, selected: selectedAddress,
network, network,
identities, identities,
enableAccountsSelector: true, enableAccountsSelector: true,
}, []), }, []),
]), ]),
h(
AccountDropdowns,
{
style: {
marginLeft: 'auto',
cursor: 'pointer',
},
selected,
network, // TODO: this prop could be in the account dropdown container
identities: {},
},
),
]), ]),
h(Content, { h(Content, {
@ -128,6 +128,5 @@ WalletView.prototype.render = function () {
marginTop: '1.3em', marginTop: '1.3em',
} }
}) })
]) ])
} }