m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Removes the dropdown menu and colocates old styles with account-menu (#9185)

Browse Source 
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:
Brad Decker 2020-08-18 09:09:56 -05:00 committed by GitHub
parent 7bc2de006f
commit 2e565d02b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
ui/app/components/app/account-menu/account-menu.component.js
View File

@ -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>
)
}
}

61
ui/app/components/app/account-menu/index.scss
View File

@ -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;

83
ui/app/components/app/dropdowns/components/menu.js
View File

@ -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,
}

69
ui/app/components/app/dropdowns/tests/menu.test.js
View File

@ -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)
})
})
})

1
ui/app/css/itcss/components/index.scss
View File

@ -11,7 +11,6 @@
@import './loading-overlay';
// Tx List and Sections
@import './menu';
@import './gas-slider';
@import './simple-dropdown';
@import './request-encryption-public-key';

63
ui/app/css/itcss/components/menu.scss
View File

@ -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;
}
}