From 0b4469b8423b09ce1d67dd426f5753596dbc8c56 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 20 Dec 2018 12:26:11 -0800 Subject: Add scrolling button to account list --- app/images/icons/down-arrow.svg | 4 + ui/app/app.js | 2 +- .../account-menu/account-menu.component.js | 301 +++++++++++++++++++++ .../account-menu/account-menu.container.js | 62 +++++ ui/app/components/account-menu/index.js | 250 +---------------- ui/app/components/account-menu/index.scss | 177 ++++++++++++ ui/app/components/index.scss | 4 +- ui/app/css/itcss/components/account-menu.scss | 153 ----------- ui/app/css/itcss/components/index.scss | 2 - 9 files changed, 549 insertions(+), 406 deletions(-) create mode 100644 app/images/icons/down-arrow.svg create mode 100644 ui/app/components/account-menu/account-menu.component.js create mode 100644 ui/app/components/account-menu/account-menu.container.js create mode 100644 ui/app/components/account-menu/index.scss delete mode 100644 ui/app/css/itcss/components/account-menu.scss diff --git a/app/images/icons/down-arrow.svg b/app/images/icons/down-arrow.svg new file mode 100644 index 000000000..6cfb4a38b --- /dev/null +++ b/app/images/icons/down-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/app.js b/ui/app/app.js index 14b199b8e..f320ced0a 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -34,7 +34,7 @@ const NoticeScreen = require('./components/pages/notice') const Loading = require('./components/loading-screen') const LoadingNetwork = require('./components/loading-network-screen').default const NetworkDropdown = require('./components/dropdowns/network-dropdown') -const AccountMenu = require('./components/account-menu') +import AccountMenu from './components/account-menu' // Global Modals const Modal = require('./components/modals/index').Modal diff --git a/ui/app/components/account-menu/account-menu.component.js b/ui/app/components/account-menu/account-menu.component.js new file mode 100644 index 000000000..b2fec647a --- /dev/null +++ b/ui/app/components/account-menu/account-menu.component.js @@ -0,0 +1,301 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import debounce from 'lodash.debounce' +import { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu' +import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' +import { getEnvironmentType } from '../../../../app/scripts/lib/util' +import Tooltip from '../tooltip' +import Identicon from '../identicon' +import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display' +import { PRIMARY } from '../../constants/common' +import { + SETTINGS_ROUTE, + INFO_ROUTE, + NEW_ACCOUNT_ROUTE, + IMPORT_ACCOUNT_ROUTE, + CONNECT_HARDWARE_ROUTE, + DEFAULT_ROUTE, +} from '../../routes' + +export default class AccountMenu extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + accounts: PropTypes.object, + history: PropTypes.object, + identities: PropTypes.object, + isAccountMenuOpen: PropTypes.bool, + keyrings: PropTypes.array, + lockMetamask: PropTypes.func, + selectedAddress: PropTypes.string, + showAccountDetail: PropTypes.func, + showRemoveAccountConfirmationModal: PropTypes.func, + toggleAccountMenu: PropTypes.func, + } + + state = { + atAccountListBottom: false, + } + + componentDidUpdate (prevProps) { + const { prevIsAccountMenuOpen } = prevProps + const { isAccountMenuOpen } = this.props + + if (!prevIsAccountMenuOpen && isAccountMenuOpen) { + this.setAtAccountListBottom() + } + } + + renderAccounts () { + const { + identities, + accounts, + selectedAddress, + keyrings, + showAccountDetail, + } = this.props + + const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), []) + + return accountOrder.filter(address => !!identities[address]).map(address => { + const identity = identities[address] + const isSelected = identity.address === selectedAddress + + const balanceValue = accounts[address] ? accounts[address].balance : '' + const simpleAddress = identity.address.substring(2).toLowerCase() + + const keyring = keyrings.find(kr => { + return kr.accounts.includes(simpleAddress) || kr.accounts.includes(identity.address) + }) + + return ( +
showAccountDetail(identity.address)} + key={identity.address} + > +
+ { isSelected &&
} +
+ +
+
+ { identity.name || '' } +
+ +
+ { this.renderKeyringType(keyring) } + { this.renderRemoveAccount(keyring, identity) } +
+ ) + }) + } + + renderRemoveAccount (keyring, identity) { + const { t } = this.context + // Any account that's not from the HD wallet Keyring can be removed + const { type } = keyring + const isRemovable = type !== 'HD Key Tree' + + return isRemovable && ( + + this.removeAccount(e, identity)} + /> + + ) + } + + removeAccount (e, identity) { + e.preventDefault() + e.stopPropagation() + const { showRemoveAccountConfirmationModal } = this.props + showRemoveAccountConfirmationModal(identity) + } + + renderKeyringType (keyring) { + const { t } = this.context + + // Sometimes keyrings aren't loaded yet + if (!keyring) { + return null + } + + const { type } = keyring + let label + + switch (type) { + case 'Trezor Hardware': + case 'Ledger Hardware': + label = t('hardware') + break + case 'Simple Key Pair': + label = t('imported') + break + } + + return label && ( +
+ { label } +
+ ) + } + + setAtAccountListBottom = () => { + const target = document.querySelector('.account-menu__accounts') + const { scrollTop, offsetHeight, scrollHeight } = target + const atAccountListBottom = scrollTop + offsetHeight >= scrollHeight + this.setState({ atAccountListBottom }) + } + + onScroll = debounce(this.setAtAccountListBottom, 25) + + handleScrollDown = e => { + e.stopPropagation() + const target = document.querySelector('.account-menu__accounts') + const { scrollHeight } = target + target.scroll({ left: 0, top: scrollHeight, behavior: 'smooth' }) + this.setAtAccountListBottom() + } + + renderScrollButton () { + const { accounts } = this.props + const { atAccountListBottom } = this.state + + return !atAccountListBottom && Object.keys(accounts).length > 3 && ( +
+ +
+ ) + } + + render () { + const { t } = this.context + const { + isAccountMenuOpen, + toggleAccountMenu, + lockMetamask, + history, + } = this.props + + return ( + + + + { t('myAccounts') } + + + +
+
+ { this.renderAccounts() } +
+ { this.renderScrollButton() } +
+ + { + toggleAccountMenu() + history.push(NEW_ACCOUNT_ROUTE) + }} + icon={ + + } + text={t('createAccount')} + /> + { + toggleAccountMenu() + history.push(IMPORT_ACCOUNT_ROUTE) + }} + icon={ + + } + text={t('importAccount')} + /> + { + toggleAccountMenu() + + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { + global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE) + } else { + history.push(CONNECT_HARDWARE_ROUTE) + } + }} + icon={ + + } + text={t('connectHardwareWallet')} + /> + + { + toggleAccountMenu() + history.push(INFO_ROUTE) + }} + icon={ + + } + text={t('infoHelp')} + /> + { + toggleAccountMenu() + history.push(SETTINGS_ROUTE) + }} + icon={ + + } + text={t('settings')} + /> + + ) + } +} diff --git a/ui/app/components/account-menu/account-menu.container.js b/ui/app/components/account-menu/account-menu.container.js new file mode 100644 index 000000000..93246ec72 --- /dev/null +++ b/ui/app/components/account-menu/account-menu.container.js @@ -0,0 +1,62 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import { withRouter } from 'react-router-dom' +import { + toggleAccountMenu, + showAccountDetail, + hideSidebar, + lockMetamask, + hideWarning, + showConfigPage, + showInfoPage, + showModal, +} from '../../actions' +import { getMetaMaskAccounts } from '../../selectors' +import AccountMenu from './account-menu.component' + +function mapStateToProps (state) { + const { metamask: { selectedAddress, isAccountMenuOpen, keyrings, identities } } = state + + return { + selectedAddress, + isAccountMenuOpen, + keyrings, + identities, + accounts: getMetaMaskAccounts(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + toggleAccountMenu: () => dispatch(toggleAccountMenu()), + showAccountDetail: address => { + dispatch(showAccountDetail(address)) + dispatch(hideSidebar()) + dispatch(toggleAccountMenu()) + }, + lockMetamask: () => { + dispatch(lockMetamask()) + dispatch(hideWarning()) + dispatch(hideSidebar()) + dispatch(toggleAccountMenu()) + }, + showConfigPage: () => { + dispatch(showConfigPage()) + dispatch(hideSidebar()) + dispatch(toggleAccountMenu()) + }, + showInfoPage: () => { + dispatch(showInfoPage()) + dispatch(hideSidebar()) + dispatch(toggleAccountMenu()) + }, + showRemoveAccountConfirmationModal: identity => { + return dispatch(showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity })) + }, + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(AccountMenu) diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index e88389096..b2b4e4c6f 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -1,249 +1 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const connect = require('react-redux').connect -const { compose } = require('recompose') -const { withRouter } = require('react-router-dom') -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const actions = require('../../actions') -const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu') -const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums') -const { getEnvironmentType } = require('../../../../app/scripts/lib/util') -const Tooltip = require('../tooltip') -import Identicon from '../identicon' -import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display' -import { PRIMARY } from '../../constants/common' -import { getMetaMaskAccounts } from '../../selectors' - -const { - SETTINGS_ROUTE, - INFO_ROUTE, - NEW_ACCOUNT_ROUTE, - IMPORT_ACCOUNT_ROUTE, - CONNECT_HARDWARE_ROUTE, - DEFAULT_ROUTE, -} = require('../../routes') - -module.exports = compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(AccountMenu) - -AccountMenu.contextTypes = { - t: PropTypes.func, -} - -inherits(AccountMenu, Component) -function AccountMenu () { Component.call(this) } - -function mapStateToProps (state) { - return { - selectedAddress: state.metamask.selectedAddress, - isAccountMenuOpen: state.metamask.isAccountMenuOpen, - keyrings: state.metamask.keyrings, - identities: state.metamask.identities, - accounts: getMetaMaskAccounts(state), - } -} - -function mapDispatchToProps (dispatch) { - return { - toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), - showAccountDetail: address => { - dispatch(actions.showAccountDetail(address)) - dispatch(actions.hideSidebar()) - dispatch(actions.toggleAccountMenu()) - }, - lockMetamask: () => { - dispatch(actions.lockMetamask()) - dispatch(actions.hideWarning()) - dispatch(actions.hideSidebar()) - dispatch(actions.toggleAccountMenu()) - }, - showConfigPage: () => { - dispatch(actions.showConfigPage()) - dispatch(actions.hideSidebar()) - dispatch(actions.toggleAccountMenu()) - }, - showInfoPage: () => { - dispatch(actions.showInfoPage()) - dispatch(actions.hideSidebar()) - dispatch(actions.toggleAccountMenu()) - }, - showRemoveAccountConfirmationModal: (identity) => { - return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity })) - }, - } -} - -AccountMenu.prototype.render = function () { - const { - isAccountMenuOpen, - toggleAccountMenu, - lockMetamask, - history, - } = this.props - - return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [ - h(CloseArea, { onClick: toggleAccountMenu }), - h(Item, { - className: 'account-menu__header', - }, [ - this.context.t('myAccounts'), - h('button.account-menu__logout-button', { - onClick: () => { - lockMetamask() - history.push(DEFAULT_ROUTE) - }, - }, this.context.t('logout')), - ]), - h(Divider), - h('div.account-menu__accounts', this.renderAccounts()), - h(Divider), - h(Item, { - onClick: () => { - toggleAccountMenu() - history.push(NEW_ACCOUNT_ROUTE) - }, - icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }), - text: this.context.t('createAccount'), - }), - h(Item, { - onClick: () => { - toggleAccountMenu() - history.push(IMPORT_ACCOUNT_ROUTE) - }, - icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }), - text: this.context.t('importAccount'), - }), - h(Item, { - onClick: () => { - toggleAccountMenu() - if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { - global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE) - } else { - history.push(CONNECT_HARDWARE_ROUTE) - } - }, - icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }), - text: this.context.t('connectHardwareWallet'), - }), - h(Divider), - h(Item, { - onClick: () => { - toggleAccountMenu() - history.push(INFO_ROUTE) - }, - icon: h('img', { src: 'images/mm-info-icon.svg' }), - text: this.context.t('infoHelp'), - }), - h(Item, { - onClick: () => { - toggleAccountMenu() - history.push(SETTINGS_ROUTE) - }, - icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }), - text: this.context.t('settings'), - }), - ]) -} - -AccountMenu.prototype.renderAccounts = function () { - const { - identities, - accounts, - selectedAddress, - keyrings, - showAccountDetail, - } = this.props - - const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), []) - return accountOrder.filter(address => !!identities[address]).map((address) => { - - const identity = identities[address] - const isSelected = identity.address === selectedAddress - - const balanceValue = accounts[address] ? accounts[address].balance : '' - const simpleAddress = identity.address.substring(2).toLowerCase() - - const keyring = keyrings.find((kr) => { - return kr.accounts.includes(simpleAddress) || - kr.accounts.includes(identity.address) - }) - - return h( - 'div.account-menu__account.menu__item--clickable', - { onClick: () => showAccountDetail(identity.address) }, - [ - h('div.account-menu__check-mark', [ - isSelected ? h('div.account-menu__check-mark-icon') : null, - ]), - - h( - Identicon, - { - address: identity.address, - diameter: 24, - }, - ), - - h('div.account-menu__account-info', [ - h('div.account-menu__name', identity.name || ''), - h(UserPreferencedCurrencyDisplay, { - className: 'account-menu__balance', - value: balanceValue, - type: PRIMARY, - }), - ]), - - this.renderKeyringType(keyring), - this.renderRemoveAccount(keyring, identity), - ], - ) - }) -} - -AccountMenu.prototype.renderRemoveAccount = function (keyring, identity) { - // Any account that's not from the HD wallet Keyring can be removed - const type = keyring.type - const isRemovable = type !== 'HD Key Tree' - if (isRemovable) { - return h(Tooltip, { - title: this.context.t('removeAccount'), - position: 'bottom', - }, [ - h('a.remove-account-icon', { - onClick: (e) => this.removeAccount(e, identity), - }, ''), - ]) - } - return null -} - -AccountMenu.prototype.removeAccount = function (e, identity) { - e.preventDefault() - e.stopPropagation() - const { showRemoveAccountConfirmationModal } = this.props - showRemoveAccountConfirmationModal(identity) -} - -AccountMenu.prototype.renderKeyringType = function (keyring) { - try { // Sometimes keyrings aren't loaded yet: - const type = keyring.type - let label - switch (type) { - case 'Trezor Hardware': - case 'Ledger Hardware': - label = this.context.t('hardware') - break - case 'Simple Key Pair': - label = this.context.t('imported') - break - default: - label = '' - } - - return label !== '' ? h('.keyring-label.allcaps', label) : null - - } catch (e) { return } -} +export { default } from './account-menu.container' diff --git a/ui/app/components/account-menu/index.scss b/ui/app/components/account-menu/index.scss new file mode 100644 index 000000000..9a61bf887 --- /dev/null +++ b/ui/app/components/account-menu/index.scss @@ -0,0 +1,177 @@ +.account-menu { + position: fixed; + z-index: 100; + top: 58px; + width: 310px; + + @media screen and (max-width: 575px) { + right: calc(((100vw - 100%) / 2) + 8px); + } + + @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); + } + + &__icon { + margin-left: 20px; + cursor: pointer; + + &--disabled { + cursor: initial; + } + } + + &__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; + } + + &__item-icon { + width: 16px; + height: 16px; + } + + &__accounts { + display: flex; + flex-flow: column nowrap; + overflow-y: auto; + max-height: 256px; + position: relative; + z-index: 200; + + &::-webkit-scrollbar { + display: none; + } + + @media screen and (max-width: 575px) { + max-height: 228px; + } + + .keyring-label { + margin-top: 5px; + background-color: $dusty-gray; + color: $black; + font-weight: normal; + letter-spacing: .5px; + } + } + + &__account { + display: flex; + flex-flow: row nowrap; + padding: 16px 14px; + flex: 0 0 auto; + + @media screen and (max-width: 575px) { + padding: 12px 14px; + } + + .remove-account-icon { + width: 15px; + margin-left: 10px; + height: 15px; + } + + &:hover { + .remove-account-icon::after { + content: '\00D7'; + font-size: 25px; + color: $white; + cursor: pointer; + position: absolute; + margin-top: -5px; + } + } + } + + &__account-info { + flex: 1 0 auto; + display: flex; + flex-flow: column nowrap; + } + + &__check-mark { + width: 14px; + margin-right: 12px; + flex: 0 0 auto; + } + + &__check-mark-icon { + background-image: url("images/check-white.svg"); + height: 18px; + width: 18px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + margin: 3px 0; + } + + .identicon { + margin: 0 12px 0 0; + flex: 0 0 auto; + } + + &__name { + color: $white; + font-size: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 200px; + } + + &__balance { + color: $dusty-gray; + font-size: 14px; + } + + &__action { + font-size: 16px; + line-height: 18px; + cursor: pointer; + } + + &__accounts-container { + position: relative; + } + + &__scroll-button { + position: absolute; + bottom: 12px; + right: 12px; + height: 28px; + width: 28px; + border-radius: 14px; + background: #3f3f3f; + z-index: 201; + cursor: pointer; + opacity: .8; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + opacity: 1; + } + } +} diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss index 78c1216f7..f1ecbbc3d 100644 --- a/ui/app/components/index.scss +++ b/ui/app/components/index.scss @@ -1,7 +1,9 @@ -@import './app-header/index'; +@import './account-menu/index'; @import './add-token-button/index'; +@import './app-header/index'; + @import './button-group/index'; @import './card/index'; diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss deleted file mode 100644 index b14753e23..000000000 --- a/ui/app/css/itcss/components/account-menu.scss +++ /dev/null @@ -1,153 +0,0 @@ -.account-menu { - position: fixed; - z-index: 100; - top: 58px; - width: 310px; - - @media screen and (max-width: 575px) { - right: calc(((100vw - 100%) / 2) + 8px); - } - - @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); - } - - &__icon { - margin-left: 20px; - cursor: pointer; - - &--disabled { - cursor: initial; - } - } - - &__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; - } - - &__item-icon { - width: 16px; - height: 16px; - } - - &__accounts { - display: flex; - flex-flow: column nowrap; - overflow-y: auto; - 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; - background-color: $dusty-gray; - color: $black; - font-weight: normal; - letter-spacing: .5px; - } - } - - &__account { - display: flex; - flex-flow: row nowrap; - padding: 16px 14px; - flex: 0 0 auto; - - @media screen and (max-width: 575px) { - padding: 12px 14px; - } - - .remove-account-icon { - width: 15px; - margin-left: 10px; - height: 15px; - } - - &:hover { - .remove-account-icon::after { - content: '\00D7'; - font-size: 25px; - color: $white; - cursor: pointer; - position: absolute; - margin-top: -5px; - } - } - } - - &__account-info { - flex: 1 0 auto; - display: flex; - flex-flow: column nowrap; - } - - &__check-mark { - width: 14px; - margin-right: 12px; - flex: 0 0 auto; - } - - &__check-mark-icon { - background-image: url("images/check-white.svg"); - height: 18px; - width: 18px; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - margin: 3px 0; - } - - .identicon { - margin: 0 12px 0 0; - flex: 0 0 auto; - } - - &__name { - color: $white; - font-size: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: 200px; - } - - &__balance { - color: $dusty-gray; - font-size: 14px; - } - - &__action { - font-size: 16px; - line-height: 18px; - cursor: pointer; - } -} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 63aa62eb3..b11b76f35 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -30,8 +30,6 @@ @import './currency-display.scss'; -@import './account-menu.scss'; - @import './menu.scss'; @import './gas-slider.scss'; -- cgit