aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--package.json4
-rw-r--r--ui/app/actions.js9
-rw-r--r--ui/app/app.js107
-rw-r--r--ui/app/components/drop-menu-item.js31
-rw-r--r--ui/app/reducers/app.js5
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: