diff options
| -rw-r--r-- | CHANGELOG.md | 3 | ||||
| -rw-r--r-- | ui/app/app.js | 37 | ||||
| -rw-r--r-- | ui/app/components/network.js | 32 | ||||
| -rw-r--r-- | ui/app/css/lib.css | 19 |
4 files changed, 63 insertions, 28 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 784c49cf5..64200fe6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,8 +2,9 @@ ## Current Master -- show network status in title bar +- Show network status in title bar - Added seed word recovery to config screen. +- Clicking network status indicator now reveals a provider menu. ## 2.2.0 2016-06-02 diff --git a/ui/app/app.js b/ui/app/app.js index 56981e6fc..446c743a9 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -53,10 +53,9 @@ function mapStateToProps(state) { } App.prototype.render = function() { - // const { selectedReddit, posts, isFetching, lastUpdated } = this.props - var state = this.props - var view = state.currentView.name - var transForward = state.transForward + var props = this.props + var view = props.currentView.name + var transForward = props.transForward return ( @@ -95,7 +94,9 @@ App.prototype.render = function() { } App.prototype.renderAppBar = function(){ - var state = this.props + const props = this.props + const state = this.state || {} + const isNetworkMenuOpen = state.isNetworkMenuOpen || false return ( @@ -104,20 +105,20 @@ App.prototype.renderAppBar = function(){ h('.app-header.flex-row.flex-space-between', { style: { alignItems: 'center', - visibility: state.isUnlocked ? 'visible' : 'none', - background: state.isUnlocked ? 'white' : 'none', + visibility: props.isUnlocked ? 'visible' : 'none', + background: props.isUnlocked ? 'white' : 'none', height: '36px', position: 'relative', zIndex: 1, }, - }, state.isUnlocked && [ + }, props.isUnlocked && [ h(NetworkIndicator, { network: this.props.network, onClick:(event) => { event.preventDefault() event.stopPropagation() - this.setState({ isNetworkMenuOpen: true }) + this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) } }), @@ -128,7 +129,7 @@ App.prototype.renderAppBar = function(){ width: 16, barHeight: 2, padding: 0, - isOpen: state.menuOpen, + isOpen: props.menuOpen, color: 'rgb(247,146,30)', onClick: (event) => { event.preventDefault() @@ -150,9 +151,7 @@ App.prototype.renderNetworkDropdown = function() { return h(MenuDroppo, { isOpen, - onClickOutside: (event) => { - event.preventDefault() - event.stopPropagation() + onClickOutside:(event) => { this.setState({ isNetworkMenuOpen: !isOpen }) }, style: { @@ -173,22 +172,22 @@ App.prototype.renderNetworkDropdown = function() { 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' }), + action:() => props.dispatch(actions.setProviderType('mainnet')), + icon: h('.menu-icon.ether-icon'), }), 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' }), + action:() => props.dispatch(actions.setProviderType('testnet')), + icon: h('.menu-icon.morden-icon'), }), 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' }), + action:() => props.dispatch(actions.setRpcTarget('http://localhost:8545')), + icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), }), ]) } diff --git a/ui/app/components/network.js b/ui/app/components/network.js index e73ecb3f4..5ad5f9351 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -21,14 +21,14 @@ Network.prototype.render = function() { title: 'Attempting to connect to blockchain.', style: { width: '27px', - marginRight: '-16px' + marginRight: '-27px' }, src: 'images/loading.svg', }) - } else if (networkNumber == 1) { + } else if (parseInt(networkNumber) == 1) { hoverText = 'Main Ethereum Network' iconName = 'ethereum-network' - }else if (networkNumber == 2) { + }else if (parseInt(networkNumber) == 2) { hoverText = "Morden Test Network" iconName = 'morden-test-network' }else { @@ -36,10 +36,30 @@ Network.prototype.render = function() { iconName = 'unknown-private-network' } return ( - h('#network_component.flex-center', { - style: { marginRight: '-16px' }, + h('#network_component.flex-center.pointer', { + style: { + marginRight: '-27px', + marginLeft: '-3px', + }, title: hoverText, onClick:(event) => this.props.onClick(event), - },[ h('img.menu-icon',{src: imagePath + iconName + ".jpg"}) ]) + },[ + function() { + switch (iconName) { + case 'ethereum-network': + return h('.menu-icon.ether-icon') + case 'morden-test-network': + return h('.menu-icon.morden-icon') + default: + return h('i.fa.fa-question-circle.fa-lg', { + ariaHidden: true, + style: { + margin: '10px', + color: 'rgb(125, 128, 130)', + }, + }) + } + }() + ]) ) } diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 855ed94d8..2a5ebe622 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -200,6 +200,21 @@ hr.horizontal-line { align-items: center; } -img.menu-icon { - width: 25px; +.menu-icon { + display: inline-block; + width: 14px; + height: 14px; + margin: 13px; +} +.ether-icon { + background: rgb(0, 163, 68); + border-radius: 20px; +} +.morden-icon { + background: #E20202; +} + +.drop-menu-item { + display: flex; + align-items: center; } |