Add dynamic list item styles

5 files changed, 125 insertions, 31 deletions

diff --git a/package.json b/package.json
index bb15d658b..4c8f66633 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "identicon.js": "^1.2.1",
     "inject-css": "^0.1.1",
     "jazzicon": "^1.1.3",
-    "menu-droppo": "^1.0.2",
+    "menu-droppo": "^1.0.3",
     "metamask-logo": "^1.1.5",
     "multiplex": "^6.7.0",
     "once": "^1.3.3",
@@ -53,7 +53,7 @@
     "redux": "^3.0.5",
     "redux-logger": "^2.3.1",
     "redux-thunk": "^1.0.2",
-    "sandwich-expando": "^1.0.4",
+    "sandwich-expando": "^1.0.5",
     "textarea-caret": "^3.0.1",
     "three.js": "^0.73.2",
     "through2": "^2.0.1",
diff --git a/ui/app/actions.js b/ui/app/actions.js
index c08019d9c..ee5e417d4 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -4,6 +4,8 @@ var actions = {
   // menu state
   TOGGLE_MENU: 'TOGGLE_MENU',
   toggleMenu: toggleMenu,
+  SET_MENU_STATE: 'SET_MENU_STATE',
+  closeMenu: closeMenu,
   // remote state
   UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
   updateMetamaskState: updateMetamaskState,
@@ -116,6 +118,13 @@ function toggleMenu() {
   }
 }
 
+function closeMenu() {
+  return {
+    type: this.SET_MENU_STATE,
+    value: false,
+  }
+}
+
 // async actions
 
 function tryUnlockMetamask(password) {
diff --git a/ui/app/app.js b/ui/app/app.js
index ec869145e..2f4136b78 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -26,6 +26,7 @@ const LoadingIndicator = require('./loading')
 const txHelper = require('../lib/tx-helper')
 const SandwichExpando = require('sandwich-expando')
 const MenuDroppo = require('menu-droppo')
+const DropMenuItem = require('./components/drop-menu-item')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -130,37 +131,85 @@ App.prototype.renderAppBar = function(){
 
   return (
 
-    h('.app-header.flex-row.flex-space-between', {
-      style: {
-        alignItems: 'center',
-        visibility: state.isUnlocked ? 'visibile' : 'none',
-        background: state.isUnlocked ? 'white' : 'none',
-        height: '36px',
-      },
-    }, state.isUnlocked && [
-
-      // mini logo
-      h('img', {
-        height: 24,
-        width: 24,
-        src: '/images/icon-128.png',
-      }),
-
-      // metamask namlterChangese
-      h('h1', 'MetaMask'),
-
-      // hamburger
-      h(SandwichExpando, {
-        width: 16,
-        barHeight: 2,
-        padding: 0,
-        isOpen: state.menuOpen,
-        color: 'rgb(247,146,30)',
-        onClick: () => this.props.dispatch(actions.toggleMenu()),
-      }),
+    h('div', [
 
-    ])
+      h('.app-header.flex-row.flex-space-between', {
+        style: {
+          alignItems: 'center',
+          visibility: state.isUnlocked ? 'visibile' : 'none',
+          background: state.isUnlocked ? 'white' : 'none',
+          height: '36px',
+        },
+      }, state.isUnlocked && [
+
+        // mini logo
+        h('img', {
+          height: 24,
+          width: 24,
+          src: '/images/icon-128.png',
+        }),
+
+        // metamask namlterChangese
+        h('h1', 'MetaMask'),
+
+        // hamburger
+        h(SandwichExpando, {
+          width: 16,
+          barHeight: 2,
+          padding: 0,
+          isOpen: state.menuOpen,
+          color: 'rgb(247,146,30)',
+          onClick: (event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            this.props.dispatch(actions.toggleMenu())
+          },
+        }),
+      ]),
 
+      h(MenuDroppo, {
+        style: {
+          right: '0px',
+        },
+        innerStyle: {
+          background: 'white',
+
+          // This shadow is hidden by the surrounding bounding box.
+          // Maybe worth revealing in the future:
+          boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
+          float: 'right',
+        },
+        isOpen: state.menuOpen,
+        onClickOutside: (event) => {
+          this.props.dispatch(actions.closeMenu())
+        },
+      }, [ // DROP MENU ITEMS
+        h('menu', [
+          h('style', '.drop-menu-item:hover { background:rgb(235, 235, 235); }'),
+
+          h(DropMenuItem, {
+            closeMenu:() => this.props.dispatch(actions.closeMenu()),
+            action:() => this.props.dispatch(actions.showConfigPage()),
+            icon: null,
+            label: 'Settings'
+          }),
+
+          h(DropMenuItem, {
+            closeMenu:() => this.props.dispatch(actions.closeMenu()),
+            action:() => this.props.dispatch(actions.lockMetamask()),
+            icon: null,
+            label: 'Lock Account'
+          }),
+
+          h(DropMenuItem, {
+            closeMenu:() => this.props.dispatch(actions.closeMenu()),
+            action:() => this.props.dispatch(actions.showInfoPage()),
+            icon: null,
+            label: 'Help'
+          }),
+        ]),
+      ]),
+    ])
   )
 }
 
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
new file mode 100644
index 000000000..1adbba519
--- /dev/null
+++ b/ui/app/components/drop-menu-item.js
@@ -0,0 +1,31 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = DropMenuItem
+
+
+inherits(DropMenuItem, Component)
+function DropMenuItem() {
+  Component.call(this)
+}
+
+DropMenuItem.prototype.render = function() {
+
+  return h('li.drop-menu-item', {
+    onClick:() => {
+      this.props.closeMenu()
+      this.props.action()
+    },
+    style: {
+      listStyle: 'none',
+      padding: '6px 10px 6px 17px',
+      fontFamily: 'Transat Medium',
+      color: 'rgb(125, 128, 130)',
+      cursor: 'pointer',
+    },
+  }, [
+    this.props.icon,
+    this.props.label,
+  ])
+}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index a7429c8fb..2cdbaf6f3 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -40,6 +40,11 @@ function reduceApp(state, action) {
       menuOpen: !appState.menuOpen,
     })
 
+  case actions.SET_MENU_STATE:
+    return extend(appState, {
+      menuOpen: action.value,
+    })
+
   // intialize
 
   case actions.SHOW_CREATE_VAULT: