Chi Kei Chan
7 years ago
parent
57179d2b05
commit
81f62a7443
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3.2 KiB |
@ -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', |
||||
}), |
||||
]) |
||||
} |
||||
|
||||
|
||||
@ -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 } |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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