diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | ui/app/app.js | 105 | ||||
| -rw-r--r-- | ui/app/components/drop-menu-item.js | 2 |
3 files changed, 57 insertions, 52 deletions
diff --git a/package.json b/package.json index 4c8f66633..99569e5db 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.3", + "menu-droppo": "^1.1.0", "metamask-logo": "^1.1.5", "multiplex": "^6.7.0", "once": "^1.3.3", diff --git a/ui/app/app.js b/ui/app/app.js index 2f4136b78..66f42c5cc 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -68,6 +68,7 @@ App.prototype.render = function() { // app bar this.renderAppBar(), + this.renderDropdown(), // panel content h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), { @@ -139,6 +140,8 @@ App.prototype.renderAppBar = function(){ visibility: state.isUnlocked ? 'visibile' : 'none', background: state.isUnlocked ? 'white' : 'none', height: '36px', + position: 'relative', + zIndex: 1, }, }, state.isUnlocked && [ @@ -166,65 +169,67 @@ App.prototype.renderAppBar = function(){ }, }), ]), - - 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' - }), - ]), - ]), ]) ) } -App.prototype.renderPrimary = function(state){ - var state = this.props +App.prototype.renderDropdown = function() { + const props = this.props + return h(MenuDroppo, { + isOpen: props.menuOpen, + onClickOutside: (event) => { + this.props.dispatch(actions.closeMenu()) + }, + style: { + position: 'fixed', + right: 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: 'Settings', + closeMenu:() => this.props.dispatch(actions.closeMenu()), + action:() => this.props.dispatch(actions.showConfigPage()), + icon: h('i.fa.fa-gear.fa-lg', { ariaHidden: true }), + }), + + h(DropMenuItem, { + label: 'Lock Account', + closeMenu:() => this.props.dispatch(actions.closeMenu()), + action:() => this.props.dispatch(actions.lockMetamask()), + icon: h('i.fa.fa-lock.fa-lg', { ariaHidden: true }), + }), + + h(DropMenuItem, { + label: 'Help', + closeMenu:() => this.props.dispatch(actions.closeMenu()), + action:() => this.props.dispatch(actions.showInfoPage()), + icon: h('i.fa.fa-question.fa-lg', { ariaHidden: true }), + }), + ]) +} + +App.prototype.renderPrimary = function(){ + var props = this.props - if (state.seedWords) { + if (props.seedWords) { return h(CreateVaultCompleteScreen, {key: 'createVaultComplete'}) } // show initialize screen - if (!state.isInitialized) { + if (!props.isInitialized) { // show current view - switch (state.currentView.name) { + switch (props.currentView.name) { case 'createVault': return h(CreateVaultScreen, {key: 'createVault'}) @@ -242,12 +247,12 @@ App.prototype.renderPrimary = function(state){ } // show unlock screen - if (!state.isUnlocked) { + if (!props.isUnlocked) { return h(UnlockScreen, {key: 'locked'}) } // show current view - switch (state.currentView.name) { + switch (props.currentView.name) { case 'accounts': return h(AccountsScreen, {key: 'accounts'}) diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js index 1adbba519..c8e61278c 100644 --- a/ui/app/components/drop-menu-item.js +++ b/ui/app/components/drop-menu-item.js @@ -19,7 +19,7 @@ DropMenuItem.prototype.render = function() { }, style: { listStyle: 'none', - padding: '6px 10px 6px 17px', + padding: '6px 16px 6px 5px', fontFamily: 'Transat Medium', color: 'rgb(125, 128, 130)', cursor: 'pointer', |