diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js new file mode 100644 index 000000000..b948534c2 --- /dev/null +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -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') + + ]), + ]), + ]) +} + diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index e87d2c859..df73577e9 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -8,6 +8,8 @@ const selectors = require('../selectors') const actions = require('../actions') const { conversionUtil } = require('../conversion-util') +const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js') + function mapStateToProps (state) { return { network: state.metamask.network, @@ -32,6 +34,10 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell) inherits(TokenCell, Component) function TokenCell () { Component.call(this) + + this.state = { + tokenMenuOpen: false, + } } TokenCell.prototype.componentWillMount = function () { @@ -44,6 +50,7 @@ TokenCell.prototype.componentWillMount = function () { } TokenCell.prototype.render = function () { + const { tokenMenuOpen } = this.state const props = this.props const { address, @@ -104,6 +111,17 @@ TokenCell.prototype.render = function () { }, 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', { onClick: this.send.bind(this, address), diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index e4d6d975b..8ae0eec66 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -9,6 +9,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( cursor: pointer; transition: linear 200ms; background-color: rgba($wallet-balance-bg, 0); + position: relative; &__token-balance { font-size: 130%; @@ -44,4 +45,50 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( 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; + } +} \ No newline at end of file