From e96a53385f48da021730b0cc351a223abcc712e3 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:18:47 -0700 Subject: accounts - rename account list item so it doesnt overlap --- ui/app/accounts/account-list-item.js | 81 ++++++++++++++++++++++++++++++++++++ ui/app/accounts/account-panel.js | 80 ----------------------------------- ui/app/accounts/index.js | 4 +- 3 files changed, 83 insertions(+), 82 deletions(-) create mode 100644 ui/app/accounts/account-list-item.js delete mode 100644 ui/app/accounts/account-panel.js diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js new file mode 100644 index 000000000..b42de182e --- /dev/null +++ b/ui/app/accounts/account-list-item.js @@ -0,0 +1,81 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const ethUtil = require('ethereumjs-util') + +const EtherBalance = require('../components/eth-balance') +const copyToClipboard = require('copy-to-clipboard') +const Identicon = require('../components/identicon') + +module.exports = NewComponent + +inherits(NewComponent, Component) +function NewComponent () { + Component.call(this) +} + +NewComponent.prototype.render = function () { + const identity = this.props.identity + var isSelected = this.props.selectedAddress === identity.address + var account = this.props.accounts[identity.address] + const selectedClass = isSelected ? '.selected' : '' + + return ( + h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { + key: `account-panel-${identity.address}`, + style: { + flex: '1 0 auto', + }, + onClick: (event) => this.props.onShowDetail(identity.address, event), + }, [ + + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + this.pendingOrNot(), + h(Identicon, { + address: identity.address, + imageify: true, + }), + ]), + + // account address, balance + h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', { + style: { + width: '200px', + }, + }, [ + h('span', identity.name), + h('span.font-small', { + style: { + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, ethUtil.toChecksumAddress(identity.address)), + h(EtherBalance, { + value: account.balance, + }), + ]), + + // copy button + h('.identity-copy.flex-column', { + style: { + margin: '0 20px', + }, + }, [ + h('img.cursor-pointer.color-orange', { + src: 'images/copy.svg', + onClick: (event) => { + event.stopPropagation() + event.preventDefault() + copyToClipboard(ethUtil.toChecksumAddress(identity.address)) + }, + }), + ]), + ]) + ) +} + +NewComponent.prototype.pendingOrNot = function () { + const pending = this.props.pending + if (pending.length === 0) return null + return h('.pending-dot', pending.length) +} diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-panel.js deleted file mode 100644 index af3d0d347..000000000 --- a/ui/app/accounts/account-panel.js +++ /dev/null @@ -1,80 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const ethUtil = require('ethereumjs-util') - -const EtherBalance = require('../components/eth-balance') -const copyToClipboard = require('copy-to-clipboard') -const Identicon = require('../components/identicon') - -module.exports = NewComponent - -inherits(NewComponent, Component) -function NewComponent () { - Component.call(this) -} - -NewComponent.prototype.render = function () { - const identity = this.props.identity - var isSelected = this.props.selectedAddress === identity.address - var account = this.props.accounts[identity.address] - const selectedClass = isSelected ? '.selected' : '' - - return ( - h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { - key: `account-panel-${identity.address}`, - style: { - flex: '1 0 auto', - }, - onClick: (event) => this.props.onShowDetail(identity.address, event), - }, [ - - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - this.pendingOrNot(), - h(Identicon, { - address: identity.address, - }), - ]), - - // account address, balance - h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', { - style: { - width: '200px', - }, - }, [ - h('span', identity.name), - h('span.font-small', { - style: { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, ethUtil.toChecksumAddress(identity.address)), - h(EtherBalance, { - value: account.balance, - }), - ]), - - // copy button - h('.identity-copy.flex-column', { - style: { - margin: '0 20px', - }, - }, [ - h('img.cursor-pointer.color-orange', { - src: 'images/copy.svg', - onClick: (event) => { - event.stopPropagation() - event.preventDefault() - copyToClipboard(ethUtil.toChecksumAddress(identity.address)) - }, - }), - ]), - ]) - ) -} - -NewComponent.prototype.pendingOrNot = function () { - const pending = this.props.pending - if (pending.length === 0) return null - return h('.pending-dot', pending.length) -} diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index 775df400b..f7ae5c53e 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -5,7 +5,7 @@ const connect = require('react-redux').connect const actions = require('../actions') const valuesFor = require('../util').valuesFor const findDOMNode = require('react-dom').findDOMNode -const AccountPanel = require('./account-panel') +const AccountListItem = require('./account-list-item') module.exports = connect(mapStateToProps)(AccountsScreen) @@ -74,7 +74,7 @@ AccountsScreen.prototype.render = function () { } }) - return h(AccountPanel, { + return h(AccountListItem, { key: `acct-panel-${identity.address}`, identity, selectedAddress: this.props.selectedAddress, -- cgit