1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Token menu ui.

This commit is contained in:
Dan 2017-09-29 07:40:50 -02:30 committed by Chi Kei Chan
parent ff64fe98dd
commit 47ebcbb2ed
3 changed files with 103 additions and 0 deletions

View File

@ -0,0 +1,38 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
module.exports = TokenMenuDropdown
inherits(TokenMenuDropdown, Component)
function TokenMenuDropdown () {
Component.call(this)
this.onClose = this.onClose.bind(this)
}
TokenMenuDropdown.prototype.onClose = function (e) {
e.stopPropagation()
this.props.onClose()
}
TokenMenuDropdown.prototype.render = function () {
return h('div.token-menu-dropdown', {}, [
h('div.token-menu-dropdown__close-area', {
onClick: this.onClose,
}),
h('div.token-menu-dropdown__container', {}, [
h('div.token-menu-dropdown__options', {}, [
h('div.token-menu-dropdown__option', {
onClick: (e) => {
e.stopPropagation()
console.log('div.token-menu-dropdown__option!')
},
}, 'Hide Token')
]),
]),
])
}

View File

@ -8,6 +8,8 @@ const selectors = require('../selectors')
const actions = require('../actions') const actions = require('../actions')
const { conversionUtil } = require('../conversion-util') const { conversionUtil } = require('../conversion-util')
const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
network: state.metamask.network, network: state.metamask.network,
@ -32,6 +34,10 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
inherits(TokenCell, Component) inherits(TokenCell, Component)
function TokenCell () { function TokenCell () {
Component.call(this) Component.call(this)
this.state = {
tokenMenuOpen: false,
}
} }
TokenCell.prototype.componentWillMount = function () { TokenCell.prototype.componentWillMount = function () {
@ -44,6 +50,7 @@ TokenCell.prototype.componentWillMount = function () {
} }
TokenCell.prototype.render = function () { TokenCell.prototype.render = function () {
const { tokenMenuOpen } = this.state
const props = this.props const props = this.props
const { const {
address, address,
@ -104,6 +111,17 @@ TokenCell.prototype.render = function () {
}, formattedUSD), }, formattedUSD),
]), ]),
h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
onClick: (e) => {
e.stopPropagation()
this.setState({ tokenMenuOpen: true })
},
}),
tokenMenuOpen && h(TokenMenuDropdown, {
onClose: () => this.setState({ tokenMenuOpen: false }),
}),
/* /*
h('button', { h('button', {
onClick: this.send.bind(this, address), onClick: this.send.bind(this, address),

View File

@ -9,6 +9,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
cursor: pointer; cursor: pointer;
transition: linear 200ms; transition: linear 200ms;
background-color: rgba($wallet-balance-bg, 0); background-color: rgba($wallet-balance-bg, 0);
position: relative;
&__token-balance { &__token-balance {
font-size: 130%; font-size: 130%;
@ -44,4 +45,50 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
margin-right: 4%; margin-right: 4%;
} }
} }
&__ellipsis {
position: absolute;
top: 20px;
right: 24px;
}
} }
.token-menu-dropdown {
height: 55px;
width: 191px;
border-radius: 4px;
background-color: rgba(0,0,0,0.82);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
position: fixed;
margin-top: 20px;
margin-left: 105px;
&__close-area {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
}
&__container {
padding: 16px 34px 32px;
z-index: 1050;
position: relative;
}
&__options {
display: flex;
flex-direction: column;
justify-content: center;
}
&__option {
color: $white;
font-family: "DIN OT";
font-size: 16px;
line-height: 21px;
text-align: center;
}
}