From 5560ebba264d0ff5254562c700f86b2546afac4d Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 3 Jun 2016 17:09:18 -0700 Subject: [PATCH 1/2] Clicking network status indicator reveals provider menu --- ui/app/app.js | 62 +++++++++++++++++++++++++++++++++++- ui/app/components/network.js | 3 +- ui/app/css/lib.css | 4 +++ 3 files changed, 67 insertions(+), 2 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 7d5d2108a..56981e6fc 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -71,6 +71,7 @@ App.prototype.render = function() { // app bar this.renderAppBar(), + this.renderNetworkDropdown(), this.renderDropdown(), // panel content @@ -111,7 +112,14 @@ App.prototype.renderAppBar = function(){ }, }, 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 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() { const props = this.props return h(MenuDroppo, { diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 37046fd30..e73ecb3f4 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -39,6 +39,7 @@ Network.prototype.render = function() { h('#network_component.flex-center', { style: { marginRight: '-16px' }, title: hoverText, - },[ h('img',{src: imagePath + iconName + ".jpg", width: '25px'}) ]) + onClick:(event) => this.props.onClick(event), + },[ h('img.menu-icon',{src: imagePath + iconName + ".jpg"}) ]) ) } diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 865d8060c..855ed94d8 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -199,3 +199,7 @@ hr.horizontal-line { display: flex; align-items: center; } + +img.menu-icon { + width: 25px; +} From b9007ee8439ed0fbff5b0aede2d0e78d75601c45 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 3 Jun 2016 17:49:54 -0700 Subject: [PATCH 2/2] Add provider menu on clicking network status indicator. Also simplifies network status icons. --- CHANGELOG.md | 3 ++- ui/app/app.js | 37 ++++++++++++++++++------------------ ui/app/components/network.js | 32 +++++++++++++++++++++++++------ 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; }