mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Clicking network status indicator reveals provider menu
This commit is contained in:
parent
b3520ee0ef
commit
5560ebba26
@ -71,6 +71,7 @@ App.prototype.render = function() {
|
|||||||
|
|
||||||
// app bar
|
// app bar
|
||||||
this.renderAppBar(),
|
this.renderAppBar(),
|
||||||
|
this.renderNetworkDropdown(),
|
||||||
this.renderDropdown(),
|
this.renderDropdown(),
|
||||||
|
|
||||||
// panel content
|
// panel content
|
||||||
@ -111,7 +112,14 @@ App.prototype.renderAppBar = function(){
|
|||||||
},
|
},
|
||||||
}, state.isUnlocked && [
|
}, state.isUnlocked && [
|
||||||
|
|
||||||
h(NetworkIndicator, {network: this.props.network}),
|
h(NetworkIndicator, {
|
||||||
|
network: this.props.network,
|
||||||
|
onClick:(event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
this.setState({ isNetworkMenuOpen: true })
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
// metamask name
|
// metamask name
|
||||||
h('h1', 'MetaMask'),
|
h('h1', 'MetaMask'),
|
||||||
@ -133,6 +141,58 @@ App.prototype.renderAppBar = function(){
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
App.prototype.renderNetworkDropdown = function() {
|
||||||
|
const props = this.props
|
||||||
|
const state = this.state || {}
|
||||||
|
const isOpen = state.isNetworkMenuOpen
|
||||||
|
|
||||||
|
const checked = h('i.fa.fa-check.fa-lg', { ariaHidden: true })
|
||||||
|
|
||||||
|
return h(MenuDroppo, {
|
||||||
|
isOpen,
|
||||||
|
onClickOutside: (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
this.setState({ isNetworkMenuOpen: !isOpen })
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
position: 'fixed',
|
||||||
|
left: 0,
|
||||||
|
zIndex: 0,
|
||||||
|
},
|
||||||
|
innerStyle: {
|
||||||
|
background: 'white',
|
||||||
|
boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
|
||||||
|
},
|
||||||
|
}, [ // DROP MENU ITEMS
|
||||||
|
h('style', `
|
||||||
|
.drop-menu-item:hover { background:rgb(235, 235, 235); }
|
||||||
|
.drop-menu-item i { margin: 11px; }
|
||||||
|
`),
|
||||||
|
|
||||||
|
h(DropMenuItem, {
|
||||||
|
label: 'Main Ethereum Network',
|
||||||
|
closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
|
||||||
|
action:() => state.dispatch(actions.setProviderType('mainnet')),
|
||||||
|
icon: h('img.menu-icon', { src: '/images/ethereum-network.jpg' }),
|
||||||
|
}),
|
||||||
|
|
||||||
|
h(DropMenuItem, {
|
||||||
|
label: 'Morden Test Network',
|
||||||
|
closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
|
||||||
|
action:() => state.dispatch(actions.setProviderType('testnet')),
|
||||||
|
icon: h('img.menu-icon', { src: '/images/morden-test-network.jpg' }),
|
||||||
|
}),
|
||||||
|
|
||||||
|
h(DropMenuItem, {
|
||||||
|
label: 'Localhost 8545',
|
||||||
|
closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
|
||||||
|
action:() => state.dispatch(actions.setRpcTarget('http://localhost:8545')),
|
||||||
|
icon: h('img.menu-icon', { src: '/images/unknown-private-network.jpg' }),
|
||||||
|
}),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
App.prototype.renderDropdown = function() {
|
App.prototype.renderDropdown = function() {
|
||||||
const props = this.props
|
const props = this.props
|
||||||
return h(MenuDroppo, {
|
return h(MenuDroppo, {
|
||||||
|
@ -39,6 +39,7 @@ Network.prototype.render = function() {
|
|||||||
h('#network_component.flex-center', {
|
h('#network_component.flex-center', {
|
||||||
style: { marginRight: '-16px' },
|
style: { marginRight: '-16px' },
|
||||||
title: hoverText,
|
title: hoverText,
|
||||||
},[ h('img',{src: imagePath + iconName + ".jpg", width: '25px'}) ])
|
onClick:(event) => this.props.onClick(event),
|
||||||
|
},[ h('img.menu-icon',{src: imagePath + iconName + ".jpg"}) ])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -199,3 +199,7 @@ hr.horizontal-line {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img.menu-icon {
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user