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 7d5d2108a..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 ( @@ -71,6 +70,7 @@ App.prototype.render = function() { // app bar this.renderAppBar(), + this.renderNetworkDropdown(), this.renderDropdown(), // panel content @@ -94,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 ( @@ -103,15 +105,22 @@ 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}), + h(NetworkIndicator, { + network: this.props.network, + onClick:(event) => { + event.preventDefault() + event.stopPropagation() + this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) + } + }), // metamask name h('h1', 'MetaMask'), @@ -120,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() @@ -133,6 +142,56 @@ 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) => { + 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:() => props.dispatch(actions.setProviderType('mainnet')), + icon: h('.menu-icon.ether-icon'), + }), + + h(DropMenuItem, { + label: 'Morden Test Network', + closeMenu:() => this.setState({ isNetworkMenuOpen: false }), + action:() => props.dispatch(actions.setProviderType('testnet')), + icon: h('.menu-icon.morden-icon'), + }), + + h(DropMenuItem, { + label: 'Localhost 8545', + closeMenu:() => this.setState({ isNetworkMenuOpen: false }), + action:() => props.dispatch(actions.setRpcTarget('http://localhost:8545')), + icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + }), + ]) +} + App.prototype.renderDropdown = function() { const props = this.props return h(MenuDroppo, { diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 37046fd30..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,9 +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, - },[ h('img',{src: imagePath + iconName + ".jpg", width: '25px'}) ]) + onClick:(event) => this.props.onClick(event), + },[ + 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 865d8060c..2a5ebe622 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -199,3 +199,22 @@ hr.horizontal-line { display: flex; align-items: center; } + +.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; +}