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: {},
}, [
h(
DropdownMenuItem,
{
@ -233,7 +234,8 @@ App.prototype.renderNetworkDropdown = function () {
h('.menu-icon.red-dot'),
'Ropsten Test Network',
providerType === 'ropsten' ? h('.check', '✓') : null,
]),
]
),
h(
DropdownMenuItem,
@ -289,6 +291,7 @@ App.prototype.renderNetworkDropdown = function () {
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) {
super(props)
this.state = {
overflowMenuActive: false,
switchingMenuActive: false,
accountSelectorActive: false,
optionsMenuActive: false,
}
}
getAccounts () {
renderAccounts () {
const { identities, selected } = this.props
return Object.keys(identities).map((key) => {
@ -49,38 +49,71 @@ class AccountDropdowns extends Component {
})
}
render () {
const { style, actions } = this.props
const { switchingMenuActive, overflowMenuActive } = this.state
renderAccountSelector () {
const { actions } = this.props
const { accountSelectorActive } = this.state
return h(
'span',
{
style: style,
},
[
h(
'i.fa.fa-angle-down',
{
style: {},
onClick: (event) => {
event.stopPropagation()
this.setState({
switchingMenuActive: !switchingMenuActive,
overflowMenuActive: false,
})
},
},
[
h(
Dropdown,
{
style: {
marginLeft: '-140px',
marginLeft: '-125px',
minWidth: '180px',
},
isOpen: switchingMenuActive,
onClickOutside: () => { this.setState({ switchingMenuActive: false}) },
isOpen: accountSelectorActive,
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(
@ -126,8 +159,32 @@ class AccountDropdowns extends Component {
'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(
'i.fa.fa-ellipsis-h',
@ -136,59 +193,12 @@ class AccountDropdowns extends Component {
onClick: (event) => {
event.stopPropagation()
this.setState({
overflowMenuActive: !overflowMenuActive,
switchingMenuActive: false,
accountSelectorActive: false,
optionsMenuActive: !optionsMenuActive,
})
},
},
[
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'),
]
),
]
),
]
this.renderAccountOptions()
),
]
)