diff options
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | ui/app/actions.js | 9 | ||||
| -rw-r--r-- | ui/app/app.js | 107 | ||||
| -rw-r--r-- | ui/app/components/drop-menu-item.js | 31 | ||||
| -rw-r--r-- | ui/app/reducers/app.js | 5 |
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: |