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

Reorder Account Selector and Account Options

Browse Source
This commit is contained in:
sdtsui 2017-07-18 09:29:52 -07:00
parent f329c232a2
commit 9e8e445695
2 changed files with 128 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/responsive/app/app.js
View File

@ -210,6 +210,7 @@ App.prototype.renderNetworkDropdown = function () {
}, },
innerStyle: {}, innerStyle: {},
}, [ }, [
h( h(
DropdownMenuItem, DropdownMenuItem,
{ {
@ -233,7 +234,8 @@ App.prototype.renderNetworkDropdown = function () {
h('.menu-icon.red-dot'), h('.menu-icon.red-dot'),
'Ropsten Test Network', 'Ropsten Test Network',
providerType === 'ropsten' ? h('.check', '✓') : null, providerType === 'ropsten' ? h('.check', '✓') : null,
]), ]
),
h( h(
DropdownMenuItem, DropdownMenuItem,
@ -289,6 +291,7 @@ App.prototype.renderNetworkDropdown = function () {
activeNetwork === 'custom' ? h('.check', '✓') : null, activeNetwork === 'custom' ? h('.check', '✓') : null,
] ]
), ),
]) ])
} }

170
ui/responsive/app/components/account-dropdowns.js
View File

@ -14,12 +14,12 @@ class AccountDropdowns extends Component {
constructor (props) { constructor (props) {
super(props) super(props)
this.state = { this.state = {
overflowMenuActive: false, accountSelectorActive: false,
switchingMenuActive: false, optionsMenuActive: false,
} }
} }
getAccounts () { renderAccounts () {
const { identities, selected } = this.props const { identities, selected } = this.props
return Object.keys(identities).map((key) => { return Object.keys(identities).map((key) => {
@ -49,38 +49,71 @@ class AccountDropdowns extends Component {
}) })
} }
render () { renderAccountSelector () {
const { style, actions } = this.props const { actions } = this.props
const { switchingMenuActive, overflowMenuActive } = this.state const { accountSelectorActive } = this.state
return h( return h(
'span',
{
style: style,
},
[
h(
'i.fa.fa-angle-down',
{
style: {},
onClick: (event) => {
event.stopPropagation()
this.setState({
switchingMenuActive: !switchingMenuActive,
overflowMenuActive: false,
})
},
},
[
h(
Dropdown, Dropdown,
{ {
style: { style: {
marginLeft: '-140px', marginLeft: '-125px',
minWidth: '180px', minWidth: '180px',
}, },
isOpen: switchingMenuActive, isOpen: accountSelectorActive,
onClickOutside: () => { this.setState({ switchingMenuActive: false}) }, onClickOutside: () => { this.setState({ accountSelectorActive: false }) },
},
[
...this.renderAccounts(),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => actions.addNewAccount(),
},
[
h(
Identicon,
{
diameter: 16,
},
),
h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
],
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => actions.showImportPage(),
},
[
h(
Identicon,
{
diameter: 16,
},
),
h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
]
),
]
)
}
renderAccountOptions () {
const { actions } = this.props
const { optionsMenuActive } = this.state
return h(
Dropdown,
{
style: {
marginLeft: '-162px',
minWidth: '180px',
},
isOpen: optionsMenuActive,
onClickOutside: () => { this.setState({ optionsMenuActive: false }) },
}, },
[ [
h( h(
@ -126,8 +159,32 @@ class AccountDropdowns extends Component {
'Export Private Key', 'Export Private Key',
), ),
] ]
), )
], }
render () {
const { style } = this.props
const { optionsMenuActive, accountSelectorActive } = this.state
return h(
'span',
{
style: style,
},
[
h(
'i.fa.fa-angle-down',
{
style: {},
onClick: (event) => {
event.stopPropagation()
this.setState({
accountSelectorActive: !accountSelectorActive,
optionsMenuActive: false,
})
},
},
this.renderAccountSelector(),
), ),
h( h(
'i.fa.fa-ellipsis-h', 'i.fa.fa-ellipsis-h',
@ -136,59 +193,12 @@ class AccountDropdowns extends Component {
onClick: (event) => { onClick: (event) => {
event.stopPropagation() event.stopPropagation()
this.setState({ this.setState({
overflowMenuActive: !overflowMenuActive, accountSelectorActive: false,
switchingMenuActive: false, optionsMenuActive: !optionsMenuActive,
}) })
}, },
}, },
[ this.renderAccountOptions()
h(
Dropdown,
{
style: {
marginLeft: '-155px',
minWidth: '180px',
},
isOpen: overflowMenuActive,
onClickOutside: () => { this.setState({ overflowMenuActive: false}) },
},
[
...this.getAccounts(),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => actions.addNewAccount(),
},
[
h(
Identicon,
{
diameter: 16,
},
),
h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
],
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => actions.showImportPage(),
},
[
h(
Identicon,
{
diameter: 16,
},
),
h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
]
),
]
),
]
), ),
] ]
) )