mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Removes the dropdown menu and colocates old styles with account-menu (#9185)
The only place that these .menu styles were being used was the account-menu by way of components/app/dropdowns/menu. Because account-menu is the only place that used these styles I moved them to exist with the account-menu
This commit is contained in:
parent
7bc2de006f
commit
2e565d02b2
@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
|
||||
import { debounce } from 'lodash'
|
||||
import Fuse from 'fuse.js'
|
||||
import InputAdornment from '@material-ui/core/InputAdornment'
|
||||
|
||||
import { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu'
|
||||
import classnames from 'classnames'
|
||||
import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
|
||||
import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
|
||||
import Identicon from '../../ui/identicon'
|
||||
@ -22,6 +21,42 @@ import {
|
||||
import TextField from '../../ui/text-field'
|
||||
import SearchIcon from '../../ui/search-icon'
|
||||
|
||||
export function AccountMenuItem (props) {
|
||||
const {
|
||||
icon,
|
||||
children,
|
||||
text,
|
||||
subText,
|
||||
className,
|
||||
onClick,
|
||||
} = props
|
||||
|
||||
const itemClassName = classnames('account-menu__item', className, {
|
||||
'account-menu__item--clickable': Boolean(onClick),
|
||||
})
|
||||
return children
|
||||
? <div className={itemClassName} onClick={onClick}>{children}</div>
|
||||
: (
|
||||
<div
|
||||
className={itemClassName}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon ? <div className="account-menu__item__icon">{icon}</div> : null}
|
||||
{text ? <div className="account-menu__item__text">{text}</div> : null}
|
||||
{subText ? <div className="account-menu__item__subtext">{subText}</div> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
AccountMenuItem.propTypes = {
|
||||
icon: PropTypes.node,
|
||||
children: PropTypes.node,
|
||||
text: PropTypes.node,
|
||||
subText: PropTypes.node,
|
||||
onClick: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
}
|
||||
|
||||
export default class AccountMenu extends Component {
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
@ -106,7 +141,7 @@ export default class AccountMenu extends Component {
|
||||
fullWidth
|
||||
theme="material-white-padded"
|
||||
/>,
|
||||
<Divider key="search-divider" />,
|
||||
<div className="account-menu__divider" key="search-divider" />,
|
||||
]
|
||||
}
|
||||
|
||||
@ -277,13 +312,16 @@ export default class AccountMenu extends Component {
|
||||
history,
|
||||
} = this.props
|
||||
|
||||
if (!isAccountMenuOpen) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu
|
||||
<div
|
||||
className="account-menu"
|
||||
isShowing={isAccountMenuOpen}
|
||||
>
|
||||
<CloseArea onClick={toggleAccountMenu} />
|
||||
<Item className="account-menu__header">
|
||||
<div className="account-menu__close-area" onClick={toggleAccountMenu} />
|
||||
<AccountMenuItem className="account-menu__header">
|
||||
{ t('myAccounts') }
|
||||
<button
|
||||
className="account-menu__lock-button"
|
||||
@ -294,8 +332,8 @@ export default class AccountMenu extends Component {
|
||||
>
|
||||
{ t('lock') }
|
||||
</button>
|
||||
</Item>
|
||||
<Divider />
|
||||
</AccountMenuItem>
|
||||
<div className="account-menu__divider" />
|
||||
<div className="account-menu__accounts-container">
|
||||
{shouldShowAccountsSearch ? this.renderAccountsSearch() : null}
|
||||
<div
|
||||
@ -309,8 +347,8 @@ export default class AccountMenu extends Component {
|
||||
</div>
|
||||
{ this.renderScrollButton() }
|
||||
</div>
|
||||
<Divider />
|
||||
<Item
|
||||
<div className="account-menu__divider" />
|
||||
<AccountMenuItem
|
||||
onClick={() => {
|
||||
toggleAccountMenu()
|
||||
metricsEvent({
|
||||
@ -330,7 +368,7 @@ export default class AccountMenu extends Component {
|
||||
)}
|
||||
text={t('createAccount')}
|
||||
/>
|
||||
<Item
|
||||
<AccountMenuItem
|
||||
onClick={() => {
|
||||
toggleAccountMenu()
|
||||
metricsEvent({
|
||||
@ -350,7 +388,7 @@ export default class AccountMenu extends Component {
|
||||
)}
|
||||
text={t('importAccount')}
|
||||
/>
|
||||
<Item
|
||||
<AccountMenuItem
|
||||
onClick={() => {
|
||||
toggleAccountMenu()
|
||||
metricsEvent({
|
||||
@ -374,8 +412,8 @@ export default class AccountMenu extends Component {
|
||||
)}
|
||||
text={t('connectHardwareWallet')}
|
||||
/>
|
||||
<Divider />
|
||||
<Item
|
||||
<div className="account-menu__divider" />
|
||||
<AccountMenuItem
|
||||
onClick={() => {
|
||||
toggleAccountMenu()
|
||||
history.push(ABOUT_US_ROUTE)
|
||||
@ -385,7 +423,7 @@ export default class AccountMenu extends Component {
|
||||
}
|
||||
text={t('infoHelp')}
|
||||
/>
|
||||
<Item
|
||||
<AccountMenuItem
|
||||
onClick={() => {
|
||||
toggleAccountMenu()
|
||||
history.push(SETTINGS_ROUTE)
|
||||
@ -405,7 +443,7 @@ export default class AccountMenu extends Component {
|
||||
)}
|
||||
text={t('settings')}
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -3,6 +3,11 @@
|
||||
z-index: 100;
|
||||
top: 58px;
|
||||
width: 320px;
|
||||
border-radius: 4px;
|
||||
background: rgba($black, 0.8);
|
||||
box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
|
||||
min-width: 150px;
|
||||
color: $white;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
right: calc(((100vw - 100%) / 2) + 8px);
|
||||
@ -20,6 +25,62 @@
|
||||
right: calc((100vw - 65vw) / 2);
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 201;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
&--clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($white, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&__subtext {
|
||||
font-size: 12px;
|
||||
padding: 5px 0 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $scorpion;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&__close-area {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-left: 1rem;
|
||||
cursor: pointer;
|
||||
|
@ -1,83 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
|
||||
/**
|
||||
* Menu component
|
||||
* @returns {Component|null}
|
||||
*/
|
||||
export function Menu (props) {
|
||||
const { className, children, isShowing } = props
|
||||
return isShowing
|
||||
? <div className={classnames('menu', className)}>{children}</div>
|
||||
: null
|
||||
}
|
||||
|
||||
Menu.defaultProps = {
|
||||
className: '',
|
||||
isShowing: false,
|
||||
children: null,
|
||||
}
|
||||
|
||||
Menu.propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
isShowing: PropTypes.bool,
|
||||
}
|
||||
|
||||
export function Item (props) {
|
||||
const {
|
||||
icon,
|
||||
children,
|
||||
text,
|
||||
subText,
|
||||
className,
|
||||
onClick,
|
||||
} = props
|
||||
|
||||
const itemClassName = classnames('menu__item', className, {
|
||||
'menu__item--clickable': Boolean(onClick),
|
||||
})
|
||||
return children
|
||||
? <div className={itemClassName} onClick={onClick}>{children}</div>
|
||||
: (
|
||||
<div
|
||||
className={itemClassName}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon ? <div className="menu__item__icon">{icon}</div> : null}
|
||||
{text ? <div className="menu__item__text">{text}</div> : null}
|
||||
{subText ? <div className="menu__item__subtext">{subText}</div> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Item.defaultProps = {
|
||||
children: null,
|
||||
icon: null,
|
||||
text: null,
|
||||
subText: null,
|
||||
className: '',
|
||||
onClick: null,
|
||||
}
|
||||
|
||||
Item.propTypes = {
|
||||
icon: PropTypes.node,
|
||||
children: PropTypes.node,
|
||||
text: PropTypes.node,
|
||||
subText: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
}
|
||||
|
||||
export function Divider () {
|
||||
return <div className="menu__divider" />
|
||||
}
|
||||
|
||||
export function CloseArea ({ onClick }) {
|
||||
return <div className="menu__close-area" onClick={onClick} />
|
||||
}
|
||||
|
||||
CloseArea.propTypes = {
|
||||
onClick: PropTypes.func.isRequired,
|
||||
}
|
@ -1,69 +0,0 @@
|
||||
import React from 'react'
|
||||
import assert from 'assert'
|
||||
import sinon from 'sinon'
|
||||
import { shallow } from 'enzyme'
|
||||
import { Menu, Item, Divider, CloseArea } from '../components/menu'
|
||||
|
||||
describe('Dropdown Menu Components', function () {
|
||||
describe('Menu', function () {
|
||||
it('adds prop className to menu', function () {
|
||||
const wrapper = shallow(
|
||||
<Menu className="Test Class" isShowing />,
|
||||
)
|
||||
assert.equal(wrapper.find('.menu').prop('className'), 'menu Test Class')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Item', function () {
|
||||
let wrapper
|
||||
const onClickSpy = sinon.spy()
|
||||
|
||||
beforeEach(function () {
|
||||
wrapper = shallow(
|
||||
<Item
|
||||
icon="test icon"
|
||||
text="test text"
|
||||
className="test foo1"
|
||||
onClick={onClickSpy}
|
||||
/>,
|
||||
)
|
||||
})
|
||||
|
||||
it('add className based on props', function () {
|
||||
assert.equal(wrapper.find('.menu__item').prop('className'), 'menu__item test foo1 menu__item--clickable')
|
||||
})
|
||||
|
||||
it('simulates onClick called', function () {
|
||||
wrapper.find('.menu__item').prop('onClick')()
|
||||
assert.equal(onClickSpy.callCount, 1)
|
||||
})
|
||||
|
||||
it('adds icon based on icon props', function () {
|
||||
assert.equal(wrapper.find('.menu__item__icon').text(), 'test icon')
|
||||
})
|
||||
|
||||
it('adds html text based on text props', function () {
|
||||
assert.equal(wrapper.find('.menu__item__text').text(), 'test text')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Divider', function () {
|
||||
it('renders menu divider', function () {
|
||||
const wrapper = shallow(<Divider />)
|
||||
assert.equal(wrapper.find('.menu__divider').length, 1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('CloseArea', function () {
|
||||
it('simulates click', function () {
|
||||
const onClickSpy = sinon.spy()
|
||||
const wrapper = shallow((
|
||||
<CloseArea
|
||||
onClick={onClickSpy}
|
||||
/>
|
||||
))
|
||||
wrapper.prop('onClick')()
|
||||
assert.ok(onClickSpy.calledOnce)
|
||||
})
|
||||
})
|
||||
})
|
@ -11,7 +11,6 @@
|
||||
@import './loading-overlay';
|
||||
|
||||
// Tx List and Sections
|
||||
@import './menu';
|
||||
@import './gas-slider';
|
||||
@import './simple-dropdown';
|
||||
@import './request-encryption-public-key';
|
||||
|
@ -1,63 +0,0 @@
|
||||
.menu {
|
||||
border-radius: 4px;
|
||||
background: rgba($black, 0.8);
|
||||
box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
|
||||
min-width: 150px;
|
||||
color: $white;
|
||||
|
||||
&__item {
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 201;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
&--clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($white, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&__subtext {
|
||||
font-size: 12px;
|
||||
padding: 5px 0 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $scorpion;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&__close-area {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user