From 085551b7e6b7dab21c21b99a40c4f79c413799d5 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 17 Oct 2017 22:36:53 -0700 Subject: [PATCH] New Account modal --- ui/app/accounts/import/index.js | 1 + ui/app/components/account-menu/index.js | 100 +++++++++--------- .../components/dropdowns/components/menu.js | 4 +- ui/app/config.js | 2 +- ui/app/css/itcss/components/account-menu.scss | 63 ++++++++++- ui/app/css/itcss/components/confirm.scss | 2 +- ui/app/css/itcss/components/header.scss | 4 + ui/app/css/itcss/components/menu.scss | 4 + ui/app/css/itcss/components/network.scss | 1 + ui/app/css/itcss/tools/utilities.scss | 16 ++- 10 files changed, 132 insertions(+), 65 deletions(-) diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index 821bb6efe..c66dcfc66 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -37,6 +37,7 @@ AccountImportSubview.prototype.render = function () { h('div.flex-center', { style: { flexDirection: 'column', + marginTop: '32px', }, }, [ h('.section-title.flex-row.flex-center', [ diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 3b1118271..2ebdba24a 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -23,20 +23,50 @@ function mapStateToProps (state) { } } -// identities, accounts, selected, menuItemStyles, actions, keyrings - function mapDispatchToProps (dispatch) { return { toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), + showAccountDetail: address => { + dispatch(actions.showAccountDetail(address)) + dispatch(actions.toggleAccountMenu()) + }, + lockMetamask: () => { + dispatch(actions.lockMetamask()) + dispatch(actions.toggleAccountMenu()) + }, + showConfigPage: () => { + console.log('hihihih') + dispatch(actions.showConfigPage()) + dispatch(actions.toggleAccountMenu()) + }, + showNewAccountModal: () => { + dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) + dispatch(actions.toggleAccountMenu()) + }, + showImportPage: () => { + dispatch(actions.showImportPage()) + dispatch(actions.toggleAccountMenu()) + }, } } AccountMenu.prototype.render = function () { - const { isAccountMenuOpen, toggleAccountMenu } = this.props - + const { + isAccountMenuOpen, + toggleAccountMenu, + showNewAccountModal, + showImportPage, + lockMetamask, + showConfigPage, + } = this.props + + console.log(showConfigPage) return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [ h(CloseArea, { onClick: toggleAccountMenu }), - h(Item, { className: 'account-menu__header' }, [ + h(Item, { + className: 'account-menu__header', + onClick: lockMetamask, + }, [ 'My Accounts', h('button.account-menu__logout-button', 'Log out'), ]), @@ -44,23 +74,22 @@ AccountMenu.prototype.render = function () { h('div.account-menu__accounts', this.renderAccounts()), h(Divider), h(Item, { - onClick: true, + onClick: showNewAccountModal, icon: h('img', { src: 'images/plus-btn-white.svg' }), text: 'Create Account', }), h(Item, { - onClick: true, + onClick: showImportPage, 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, + onClick: showConfigPage, icon: h('img', { src: 'images/settings.svg' }), text: 'Settings', }), @@ -68,7 +97,13 @@ AccountMenu.prototype.render = function () { } AccountMenu.prototype.renderAccounts = function () { - const { identities, accounts, selected, actions, keyrings } = this.props + const { + identities, + accounts, + selected, + keyrings, + showAccountDetail, + } = this.props return Object.keys(identities).map((key, index) => { const identity = identities[key] @@ -84,12 +119,8 @@ AccountMenu.prototype.renderAccounts = function () { }) return h( - 'div.account-menu__account', - { - onClick: () => { - this.props.actions.showAccountDetail(identity.address) - }, - }, + 'div.account-menu__account.menu__item--clickable', + { onClick: () => showAccountDetail(identity.address) }, [ h('div.account-menu__check-mark', [ isSelected ? h('i.fa.fa-check') : null, @@ -104,44 +135,11 @@ AccountMenu.prototype.renderAccounts = function () { ), h('div.account-menu__account-info', [ - - this.indicateIfLoose(keyring), - - h('div.account-menu__name', { - style: { - fontSize: '18px', - maxWidth: '145px', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, identity.name || ''), - + h('div.account-menu__name', identity.name || ''), h('div.account-menu__balance', formattedBalance), ]), - h('div.account-menu__action', { - onClick: () => { - actions.showEditAccountModal(identity) - }, - }, 'Edit'), - -// ======= -// }, -// ), -// this.indicateIfLoose(keyring), -// h('span', { -// style: { -// marginLeft: '20px', -// fontSize: '24px', -// maxWidth: '145px', -// whiteSpace: 'nowrap', -// overflow: 'hidden', -// textOverflow: 'ellipsis', -// }, -// }, identity.name || ''), -// h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), -// >>>>>>> master:ui/app/components/account-dropdowns.js + this.indicateIfLoose(keyring), ], ) }) diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js index 323103f0b..f6d8a139e 100644 --- a/ui/app/components/dropdowns/components/menu.js +++ b/ui/app/components/dropdowns/components/menu.js @@ -28,8 +28,8 @@ Item.prototype.render = function () { 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 ] + ? h('div', { className: itemClassName, onClick }, children) + : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ] .filter(d => Boolean(d)) ) } diff --git a/ui/app/config.js b/ui/app/config.js index 0fe232c07..282a28301 100644 --- a/ui/app/config.js +++ b/ui/app/config.js @@ -30,7 +30,7 @@ ConfigScreen.prototype.render = function () { var warning = state.warning return ( - h('.flex-column.flex-grow', [ + h('.flex-column.flex-grow', { style: { marginTop: '32px' } }, [ // subtitle and nav h('.section-title.flex-row.flex-center', [ diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 5ed42f627..857903ce1 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -39,6 +39,7 @@ font-size: 12px; line-height: 23px; padding: 0 24px; + font-weight: 200; } img { @@ -50,8 +51,68 @@ display: flex; flex-flow: column nowrap; overflow-y: auto; - height: 272px; + max-height: 240px; position: relative; z-index: 200; + + &::-webkit-scrollbar { + display: none; + } + + @media screen and (max-width: 575px) { + max-height: 215px; + } + + .keyring-label { + margin-top: 5px; + } + } + + &__account { + display: flex; + flex-flow: row nowrap; + padding: 16px 14px; + flex: 0 0 auto; + + @media screen and (max-width: 575px) { + padding: 12px 14px; + } + } + + &__account-info { + flex: 1 0 auto; + display: flex; + flex-flow: column nowrap; + padding-top: 4px; + } + + &__check-mark { + width: 14px; + flex: 0 0 auto; + } + + .identicon { + margin: 0 12px 0 0; + flex: 0 0 auto; + } + + &__name { + color: $white; + font-size: 18px; + font-weight: 200; + line-height: 16px; + } + + &__balance { + color: $dusty-gray; + font-size: 14px; + line-height: 19px; + } + + &__action { + font-size: 16px; + line-height: 18px; + font-weight: 200; + cursor: pointer; } } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 15c752923..d4f0fe5ac 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -37,7 +37,7 @@ overflow-y: auto; top: 0; box-shadow: none; - height: calc(100vh - 41px - 100px); + height: calc(100vh - 58px - 100px); border-top-left-radius: 0; border-top-right-radius: 0; } diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 512cbd995..ef84dc3f4 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -58,6 +58,10 @@ text-transform: uppercase; font-weight: 400; color: #22232c; // $shark + + @media screen and (max-width: 575px) { + display: none; + } } h2.page-subtitle { diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 0f83146a8..c98ee70d9 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -13,6 +13,10 @@ position: relative; z-index: 200; + @media screen and (max-width: 575px) { + padding: 14px; + } + &--clickable { cursor: pointer; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index bf699ac57..bb8c4eea8 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -2,6 +2,7 @@ border: 1px solid $shark; border-radius: 82px; padding: 6px; + flex: 0 0 auto; &.ethereum-network { border-color: rgb(3, 135, 137); diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index 4a55303b9..ca9fd0d9c 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -231,17 +231,15 @@ hr.horizontal-line { .keyring-label { z-index: 1; - font-size: 11px; - background: rgba(255, 0, 0, .8); - bottom: -47px; - color: $white; + font-size: 8px; + line-height: 8px; + background: rgba(255, 255, 255, 0.4); + color: #fff; border-radius: 10px; - height: 20px; - min-width: 20px; - position: absolute; - top: 0px; - right: 5px; padding: 4px; + width: 41px; + text-align: center; + height: 15px; } .ether-balance {