From 81f62a7443d47461b5f9b20f442392562458c79a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 13 Oct 2017 02:10:58 -0400 Subject: [PATCH] Adding Account Dropdown V2 --- app/images/.DS_Store | Bin 6148 -> 0 bytes app/images/import-account.svg | 18 ++++++ app/images/plus-btn-white.svg | 17 ++++++ app/images/settings.svg | 46 +++++++------- ui/app/app.js | 5 +- ui/app/components/account-menu/index.js | 56 ++++++++++++++++++ .../components/dropdowns/components/menu.js | 44 ++++++++++++++ ui/app/css/itcss/components/account-menu.scss | 44 ++++++++++++++ ui/app/css/itcss/components/header.scss | 4 ++ ui/app/css/itcss/components/index.scss | 4 ++ ui/app/css/itcss/components/menu.scss | 43 ++++++++++++++ 11 files changed, 256 insertions(+), 25 deletions(-) delete mode 100644 app/images/.DS_Store create mode 100644 app/images/import-account.svg create mode 100644 app/images/plus-btn-white.svg create mode 100644 ui/app/components/account-menu/index.js create mode 100644 ui/app/components/dropdowns/components/menu.js create mode 100644 ui/app/css/itcss/components/account-menu.scss create mode 100644 ui/app/css/itcss/components/menu.scss diff --git a/app/images/.DS_Store b/app/images/.DS_Store deleted file mode 100644 index d28ef208994005c1558ebb9af379185ae29e441d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKO-lnY5Pi`_ioNvcasNOqMG(C$rQ$_IDBi7Ysp41Jb`N^mpYEHEh@r$78tjP?VmR%o`DKP>#2AiXkB?wq4)#I``gN|K zsyjj!(X}(+3~Vy6ABP>O{}QRat54%f5kvZhNIztDOqi;B`38uWxHb&5x+8` jhEQ2K){d0oBQ_PzrP3j0hGj%rDE>!4X>jEX{3-*Vg5{O^ diff --git a/app/images/import-account.svg b/app/images/import-account.svg new file mode 100644 index 000000000..d6a81b70c --- /dev/null +++ b/app/images/import-account.svg @@ -0,0 +1,18 @@ + + + + import-account + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/plus-btn-white.svg b/app/images/plus-btn-white.svg new file mode 100644 index 000000000..2672d39dd --- /dev/null +++ b/app/images/plus-btn-white.svg @@ -0,0 +1,17 @@ + + + + plus-btn-white + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/settings.svg b/app/images/settings.svg index fe61320a5..cf9b298dd 100644 --- a/app/images/settings.svg +++ b/app/images/settings.svg @@ -1,24 +1,22 @@ - - - - - - + + + + settings + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/app/app.js b/ui/app/app.js index 360ba04cf..92fc5e697 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -34,6 +34,7 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') +const AccountMenu = require('./components/account-menu') // Global Modals const Modal = require('./components/modals/index').Modal @@ -130,6 +131,8 @@ App.prototype.render = function () { frequentRpcList: this.props.frequentRpcList, }, []), + h(AccountMenu), + h(Loading, { isLoading: isLoading || isLoadingNetwork, loadingMessage: loadMessage, @@ -344,7 +347,7 @@ App.prototype.renderPrimary = function () { case 'sendTransaction': log.debug('rendering send tx screen') - + const SendComponentToRender = checkFeatureToggle('send-v2') ? SendTransactionScreen2 : SendTransactionScreen diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js new file mode 100644 index 000000000..7dc3d10a5 --- /dev/null +++ b/ui/app/components/account-menu/index.js @@ -0,0 +1,56 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const connect = require('react-redux').connect +const h = require('react-hyperscript') +const actions = require('../../actions') +const { Menu, Item, Divider } = require('../dropdowns/components/menu') + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu) + +inherits(AccountMenu, Component) +function AccountMenu () { Component.call(this) } + +function mapStateToProps (state) { + return { + selectedAddress: state.metamask.selectedAddress, + } +} + +function mapDispatchToProps () { + return {} +} + +AccountMenu.prototype.render = function () { + return h(Menu, { className: 'account-menu' }, [ + h(Item, { className: 'account-menu__header' }, [ + 'My Accounts', + h('button.account-menu__logout-button', 'Log out'), + ]), + h(Divider), + h(Item, { text: 'hi' }), + h(Divider), + h(Item, { + onClick: true, + icon: h('img', { src: 'images/plus-btn-white.svg' }), + text: 'Create Account', + }), + h(Item, { + onClick: true, + icon: h('img', { src: 'images/import-account.svg' }), + text: 'Import Account', + }), + h(Divider), + h(Item, { + onClick: true, + icon: h('img', { src: 'images/mm-info-icon.svg' }), + text: 'Info & Help', + }), + h(Item, { + onClick: true, + icon: h('img', { src: 'images/settings.svg' }), + text: 'Settings', + }), + ]) +} + + diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js new file mode 100644 index 000000000..0cbe0f342 --- /dev/null +++ b/ui/app/components/dropdowns/components/menu.js @@ -0,0 +1,44 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') + +inherits(Menu, Component) +function Menu () { Component.call(this) } + +Menu.prototype.render = function () { + const { className = '', children, isShowing } = this.props + return isShowing + ? h('div', { className: `menu ${className}` }, children) + : h('noscript') +} + +inherits(Item, Component) +function Item () { Component.call(this) } + +Item.prototype.render = function () { + const { + icon, + children, + text, + className = '', + onClick, + } = this.props + const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}` + const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null + const textComponent = text ? h('div.menu__item__text', text) : null + + return children + ? h('div', { className: itemClassName }, children) + : h('div.menu__item', { className: itemClassName }, [ iconComponent, textComponent ] + .filter(d => Boolean(d)) + ) +} + +inherits(Divider, Component) +function Divider () { Component.call(this) } + +Divider.prototype.render = function () { + return h('div.menu__divider') +} + +module.exports = { Menu, Item, Divider } diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss new file mode 100644 index 000000000..8b08c02fd --- /dev/null +++ b/ui/app/css/itcss/components/account-menu.scss @@ -0,0 +1,44 @@ +.account-menu { + position: fixed; + z-index: 100; + top: 58px; + width: 310px; + + @media screen and (max-width: 575px) { + right: calc((100vw - 100%) / 2); + } + + @media screen and (min-width: 576px) { + right: calc((100vw - 85vw) / 2); + } + + @media screen and (min-width: 769px) { + right: calc((100vw - 80vw) / 2); + } + + @media screen and (min-width: 1281px) { + right: calc((100vw - 65vw) / 2); + } + + &__header { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + } + + &__logout-button { + border: 1px solid $dusty-gray; + background-color: transparent; + color: $white; + border-radius: 4px; + font-size: 12px; + line-height: 23px; + padding: 0 24px; + } + + img { + width: 16px; + height: 16px; + } +} diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 4fa80f047..512cbd995 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -84,4 +84,8 @@ h2.page-subtitle { display: flex; flex-flow: row nowrap; align-items: center; + + .identicon { + cursor: pointer; + } } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index f24a9caa8..dee0959b7 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -31,3 +31,7 @@ @import './add-token.scss'; @import './currency-display.scss'; + +@import './account-menu.scss'; + +@import './menu.scss'; diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss new file mode 100644 index 000000000..d01c24a70 --- /dev/null +++ b/ui/app/css/itcss/components/menu.scss @@ -0,0 +1,43 @@ +.menu { + border-radius: 4px; + background: rgba($black, .8); + box-shadow: rgba($black, .15) 0 2px 2px 2px; + min-width: 150px; + color: $white; + + &__item { + padding: 18px; + display: flex; + flex-flow: row nowrap; + align-items: center; + + &--clickable { + cursor: pointer; + + &:hover { + background-color: rgba($white, .05); + } + + &:active { + background-color: rgba($white, .1); + } + } + + &__icon { + height: 16px; + width: 16px; + margin-right: 14px; + } + + &__text { + font-size: 16px; + line-height: 21px; + } + } + + &__divider { + background-color: $scorpion; + width: 100%; + height: 1px; + } +}