Add provider menu on clicking network status indicator.

Also simplifies network status icons.

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
 

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()
@@ -151,8 +152,6 @@ App.prototype.renderNetworkDropdown = function() {
   return h(MenuDroppo, {
     isOpen,
     onClickOutside:(event) => {
-      event.preventDefault()
-      event.stopPropagation()
       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 }),
     }),
   ])
 }

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)',
+                },
+              })
+          }
+        }()
+    ])
   )
 }

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;
 }