mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
Adding Account Dropdown V2
This commit is contained in:
Chi Kei Chan
parent
57179d2b05
commit
81f62a7443
BIN
app/images/.DS_Store
vendored
BIN
app/images/.DS_Store
vendored
Binary file not shown.
18
app/images/import-account.svg
Normal file
18
app/images/import-account.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>import-account</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="MetaMascara-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="account-dropdown-top-bar-IXD" transform="translate(-25.000000, -718.000000)">
|
||||
<g id="Group-6" transform="translate(4.000000, 646.000000)">
|
||||
<g id="import-account" transform="translate(21.000000, 72.000000)">
|
||||
<rect id="Rectangle-49" fill="#FFFFFF" x="0" y="13.1721326" width="14.4893459" height="1.08397642"></rect>
|
||||
<rect id="Rectangle" fill="#FFFFFF" x="6.5860663" y="0" width="1.08397642" height="10.5377061"></rect>
|
||||
<polyline id="Path-12" stroke="#FFFFFF" points="2.63442652 6.5860663 7.24467293 10.5377061 11.8549193 6.5860663"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
17
app/images/plus-btn-white.svg
Normal file
17
app/images/plus-btn-white.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>plus-btn-white</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="MetaMascara-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="account-dropdown-top-bar-IXD" transform="translate(-24.000000, -669.000000)" fill="#FFFFFF">
|
||||
<g id="Group-6" transform="translate(4.000000, 646.000000)">
|
||||
<g id="plus-btn-white" transform="translate(20.000000, 23.000000)">
|
||||
<rect id="Rectangle-48" x="7.38461538" y="0" width="1.23076923" height="16"></rect>
|
||||
<rect id="Rectangle-48" transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) " x="7.38461538" y="0" width="1.23076923" height="16"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,24 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24.088px" height="24px" viewBox="0 0 24.088 24" enable-background="new 0 0 24.088 24" xml:space="preserve">
|
||||
<path d="M21.525,10.147c-0.41-0.059-0.847-0.428-0.974-0.82l-0.608-1.481c-0.191-0.365-0.146-0.935,0.1-1.264l0.99-1.318
|
||||
c0.246-0.33,0.227-0.854-0.047-1.162l-1.084-1.086c-0.31-0.272-0.832-0.293-1.164-0.045l-1.316,0.988
|
||||
c-0.33,0.248-0.898,0.293-1.264,0.101l-1.48-0.609c-0.395-0.126-0.764-0.562-0.82-0.971l-0.233-1.629
|
||||
c-0.058-0.409-0.44-0.778-0.851-0.822c0,0-0.254-0.026-0.77-0.026c-0.514,0-0.77,0.026-0.77,0.026
|
||||
c-0.41,0.044-0.793,0.413-0.852,0.822L10.15,2.48c-0.059,0.409-0.428,0.845-0.82,0.971L7.85,4.06
|
||||
C7.484,4.251,6.916,4.207,6.586,3.959L5.268,2.97c-0.33-0.248-0.854-0.228-1.162,0.045L3.021,4.101
|
||||
C2.749,4.41,2.727,4.933,2.975,5.263l0.988,1.318c0.249,0.33,0.293,0.899,0.102,1.264l-0.61,1.482
|
||||
c-0.125,0.393-0.562,0.762-0.972,0.82l-1.629,0.231c-0.408,0.059-0.776,0.442-0.82,0.853c0,0-0.026,0.255-0.026,0.77
|
||||
c0,0.516,0.026,0.77,0.026,0.77c0.044,0.412,0.412,0.793,0.82,0.853l1.629,0.231c0.408,0.06,0.847,0.429,0.972,0.82l0.61,1.48
|
||||
c0.191,0.365,0.146,0.936-0.102,1.264l-0.988,1.318c-0.248,0.33-0.308,0.779-0.132,0.994c0.175,0.217,0.677,0.752,0.679,0.754
|
||||
c0,0.002,0.17,0.156,0.375,0.344c0.203,0.188,1.041,0.449,1.371,0.203l1.317-0.99c0.33-0.246,0.897-0.293,1.265-0.1l1.479,0.608
|
||||
c0.394,0.125,0.763,0.562,0.819,0.972l0.233,1.629c0.058,0.408,0.44,0.779,0.853,0.822c0,0,0.254,0.026,0.769,0.026
|
||||
s0.771-0.026,0.771-0.026c0.408-0.043,0.793-0.414,0.85-0.822l0.234-1.629c0.057-0.408,0.426-0.847,0.819-0.972l1.479-0.61
|
||||
c0.365-0.191,0.935-0.146,1.265,0.102l1.317,0.99c0.332,0.246,0.854,0.227,1.164-0.047l1.082-1.084
|
||||
c0.273-0.312,0.293-0.834,0.047-1.164l-0.989-1.318c-0.246-0.328-0.291-0.898-0.101-1.264l0.609-1.48
|
||||
c0.127-0.393,0.562-0.762,0.973-0.82l1.627-0.231c0.41-0.06,0.779-0.44,0.822-0.853c0,0,0.027-0.254,0.027-0.77
|
||||
c0-0.515-0.027-0.77-0.027-0.77c-0.043-0.41-0.412-0.794-0.822-0.853L21.525,10.147z M12.004,15.001c-1.657,0-3-1.344-3-3
|
||||
c0-1.657,1.343-3,3-3s3,1.344,3,3S13.66,15.001,12.004,15.001z"/>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>settings</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="20 10 20 19.9998 0 19.9998 0 10 0 0.0002 20 0.0002"></polygon>
|
||||
</defs>
|
||||
<g id="MetaMascara-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="account-dropdown-top-bar-IXD" transform="translate(-25.000000, -826.000000)">
|
||||
<g id="Group-6" transform="translate(4.000000, 646.000000)">
|
||||
<g id="settings" transform="translate(21.000000, 180.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-2"></g>
|
||||
<path d="M10,13.6602 C7.979,13.6602 6.34,12.0212 6.34,10.0002 C6.34,7.9782 7.979,6.3402 10,6.3402 C12.021,6.3402 13.66,7.9782 13.66,10.0002 C13.66,12.0212 12.021,13.6602 10,13.6602 L10,13.6602 Z M19.157,11.8112 C19.53,11.8112 19.878,11.5092 19.929,11.1392 C19.929,11.1392 20,10.6182 20,10.0002 C20,9.3822 19.929,8.8622 19.929,8.8622 C19.878,8.4922 19.53,8.1892 19.157,8.1892 L17.228,8.1892 C16.854,8.1892 16.466,7.9512 16.365,7.6602 C16.265,7.3682 16.127,6.4352 16.391,6.1712 L17.755,4.8072 C18.019,4.5432 18.039,4.0922 17.8,3.8052 L16.195,2.2002 C15.908,1.9602 15.458,1.9812 15.193,2.2452 L13.829,3.6092 C13.565,3.8732 13.125,3.9802 12.852,3.8462 C12.578,3.7122 11.812,3.1462 11.812,2.7732 L11.812,0.8432 C11.812,0.4702 11.509,0.1222 11.139,0.0722 C11.139,0.0722 10.619,0.0002 10,0.0002 C9.382,0.0002 8.862,0.0722 8.862,0.0722 C8.492,0.1222 8.189,0.4702 8.189,0.8432 L8.189,2.7732 C8.189,3.1462 7.951,3.5352 7.66,3.6352 C7.369,3.7352 6.435,3.8732 6.171,3.6092 L4.807,2.2452 C4.542,1.9812 4.092,1.9612 3.805,2.2002 L2.2,3.8052 C1.96,4.0922 1.981,4.5432 2.245,4.8072 L3.609,6.1712 C3.873,6.4352 3.98,6.8752 3.846,7.1482 C3.711,7.4222 3.146,8.1892 2.773,8.1892 L0.843,8.1892 C0.47,8.1892 0.123,8.4922 0.072,8.8622 C0.072,8.8622 0,9.3822 0,10.0002 C0,10.6182 0.072,11.1392 0.072,11.1392 C0.123,11.5092 0.47,11.8112 0.843,11.8112 L2.773,11.8112 C3.146,11.8112 3.535,12.0502 3.635,12.3412 C3.735,12.6322 3.874,13.5642 3.609,13.8292 L2.246,15.1932 C1.981,15.4572 1.961,15.9082 2.2,16.1952 L3.805,17.8002 C4.092,18.0392 4.542,18.0192 4.807,17.7552 L6.171,16.3902 C6.435,16.1272 6.875,16.0202 7.148,16.1542 C7.422,16.2882 8.189,16.8532 8.189,17.2272 L8.189,19.1572 C8.189,19.5302 8.492,19.8782 8.862,19.9292 C8.862,19.9292 9.382,20.0002 10,20.0002 C10.619,20.0002 11.139,19.9292 11.139,19.9292 C11.509,19.8772 11.812,19.5302 11.812,19.1572 L11.812,17.2272 C11.812,16.8532 12.05,16.4662 12.341,16.3652 C12.632,16.2642 13.565,16.1272 13.829,16.3902 L15.193,17.7552 C15.458,18.0182 15.908,18.0392 16.195,17.8002 L17.8,16.1952 C18.039,15.9082 18.02,15.4582 17.755,15.1932 L16.391,13.8292 C16.127,13.5652 16.021,13.1252 16.154,12.8512 C16.288,12.5782 16.854,11.8112 17.228,11.8112 L19.157,11.8112 Z" id="Fill-1" fill="#B3B3B3" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3.2 KiB |
@ -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
|
||||
|
||||
56
ui/app/components/account-menu/index.js
Normal file
56
ui/app/components/account-menu/index.js
Normal file
@ -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',
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
44
ui/app/components/dropdowns/components/menu.js
Normal file
44
ui/app/components/dropdowns/components/menu.js
Normal file
@ -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 }
|
||||
44
ui/app/css/itcss/components/account-menu.scss
Normal file
44
ui/app/css/itcss/components/account-menu.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -84,4 +84,8 @@ h2.page-subtitle {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
.identicon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,3 +31,7 @@
|
||||
@import './add-token.scss';
|
||||
|
||||
@import './currency-display.scss';
|
||||
|
||||
@import './account-menu.scss';
|
||||
|
||||
@import './menu.scss';
|
||||
|
||||
43
ui/app/css/itcss/components/menu.scss
Normal file
43
ui/app/css/itcss/components/menu.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user