From 5560ebba264d0ff5254562c700f86b2546afac4d Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 3 Jun 2016 17:09:18 -0700
Subject: [PATCH] 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;
+}