From fce7bf3a1ca3c3b1b84173355965d8dc511effdc Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 18 Jul 2017 05:25:16 -0700 Subject: Remove accounts screen --- ui/responsive/app/components/account-dropdowns.js | 217 ++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 ui/responsive/app/components/account-dropdowns.js (limited to 'ui/responsive/app/components/account-dropdowns.js') diff --git a/ui/responsive/app/components/account-dropdowns.js b/ui/responsive/app/components/account-dropdowns.js new file mode 100644 index 000000000..cbb97b2cb --- /dev/null +++ b/ui/responsive/app/components/account-dropdowns.js @@ -0,0 +1,217 @@ +const Component = require('react').Component +const PropTypes = require('react').PropTypes +const h = require('react-hyperscript') +const actions = require('../actions') +const genAccountLink = require('../../lib/account-link.js') +const connect = require('react-redux').connect +const Dropdown = require('./dropdown').Dropdown +const DropdownMenuItem = require('./dropdown').DropdownMenuItem +const Identicon = require('./identicon') +const ethUtil = require('ethereumjs-util') +const copyToClipboard = require('copy-to-clipboard') + +class AccountDropdowns extends Component { + constructor (props) { + super(props) + this.state = { + overflowMenuActive: false, + switchingMenuActive: false, + } + } + + getAccounts () { + const { identities, selected } = this.props + + return Object.keys(identities).map((key) => { + const identity = identities[key] + const isSelected = identity.address === selected + + return h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + this.props.actions.showAccountDetail(identity.address) + }, + }, + [ + h( + Identicon, + { + address: identity.address, + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, identity.name || ''), + h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null), + ] + ) + }) + } + + render () { + const { style, actions } = this.props + const { switchingMenuActive, overflowMenuActive } = this.state + + return h( + 'span', + { + style: style, + }, + [ + h( + 'i.fa.fa-angle-down', + { + style: {}, + onClick: (event) => { + event.stopPropagation() + this.setState({ + switchingMenuActive: !switchingMenuActive, + overflowMenuActive: false, + }) + }, + }, + [ + h( + Dropdown, + { + style: { + marginLeft: '-140px', + minWidth: '180px', + }, + isOpen: switchingMenuActive, + onClickOutside: () => { this.setState({ switchingMenuActive: false}) }, + }, + [ + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showConfigPage(), + }, + 'Account Settings', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected, network } = this.props + const url = genAccountLink(selected, network) + global.platform.openWindow({ url }) + }, + }, + 'View account on Etherscan', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected } = this.props + const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) + copyToClipboard(checkSumAddress) + }, + }, + 'Copy Address to clipboard', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + actions.requestAccountExport() + }, + }, + 'Export Private Key', + ), + ] + ), + ], + ), + h( + 'i.fa.fa-ellipsis-h', + { + style: { 'marginLeft': '10px'}, + onClick: (event) => { + event.stopPropagation() + this.setState({ + overflowMenuActive: !overflowMenuActive, + switchingMenuActive: false, + }) + }, + }, + [ + h( + Dropdown, + { + style: { + marginLeft: '-155px', + minWidth: '180px', + }, + isOpen: overflowMenuActive, + onClickOutside: () => { this.setState({ overflowMenuActive: false}) }, + }, + [ + ...this.getAccounts(), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.addNewAccount(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Create Account'), + ], + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showImportPage(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Import Account'), + ] + ), + ] + ), + ] + ), + ] + ) + } +} + +AccountDropdowns.propTypes = { + identities: PropTypes.objectOf(PropTypes.object), + selected: PropTypes.string, +} + +const mapDispatchToProps = (dispatch, ownProps) => { + return { + actions: { + showConfigPage: () => dispatch(actions.showConfigPage()), + requestAccountExport: () => dispatch(actions.requestExportAccount()), + showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), + addNewAccount: () => dispatch(actions.addNewAccount()), + showImportPage: () => dispatch(actions.showImportPage()), + }, + } +} + +module.exports = { + AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), +} -- cgit v1.2.3 From f329c232a23e849a178381e92f3042d1d97303f2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 18 Jul 2017 05:26:31 -0700 Subject: Hook up new dropdown components --- ui/responsive/app/components/account-dropdowns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/responsive/app/components/account-dropdowns.js') diff --git a/ui/responsive/app/components/account-dropdowns.js b/ui/responsive/app/components/account-dropdowns.js index cbb97b2cb..f77d2fe9c 100644 --- a/ui/responsive/app/components/account-dropdowns.js +++ b/ui/responsive/app/components/account-dropdowns.js @@ -200,7 +200,7 @@ AccountDropdowns.propTypes = { selected: PropTypes.string, } -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch) => { return { actions: { showConfigPage: () => dispatch(actions.showConfigPage()), -- cgit v1.2.3 From 9e8e445695585f47e9cc3f63b2ec8313b4fc4eb8 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 18 Jul 2017 09:29:52 -0700 Subject: Reorder Account Selector and Account Options --- ui/responsive/app/components/account-dropdowns.js | 238 +++++++++++----------- 1 file changed, 124 insertions(+), 114 deletions(-) (limited to 'ui/responsive/app/components/account-dropdowns.js') diff --git a/ui/responsive/app/components/account-dropdowns.js b/ui/responsive/app/components/account-dropdowns.js index f77d2fe9c..d1d319477 100644 --- a/ui/responsive/app/components/account-dropdowns.js +++ b/ui/responsive/app/components/account-dropdowns.js @@ -14,12 +14,12 @@ class AccountDropdowns extends Component { constructor (props) { super(props) this.state = { - overflowMenuActive: false, - switchingMenuActive: false, + accountSelectorActive: false, + optionsMenuActive: false, } } - getAccounts () { + renderAccounts () { const { identities, selected } = this.props return Object.keys(identities).map((key) => { @@ -49,9 +49,122 @@ class AccountDropdowns extends Component { }) } + renderAccountSelector () { + const { actions } = this.props + const { accountSelectorActive } = this.state + + return h( + Dropdown, + { + style: { + marginLeft: '-125px', + minWidth: '180px', + }, + isOpen: accountSelectorActive, + onClickOutside: () => { this.setState({ accountSelectorActive: false }) }, + }, + [ + ...this.renderAccounts(), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.addNewAccount(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Create Account'), + ], + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showImportPage(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Import Account'), + ] + ), + ] + ) + } + + renderAccountOptions () { + const { actions } = this.props + const { optionsMenuActive } = this.state + + return h( + Dropdown, + { + style: { + marginLeft: '-162px', + minWidth: '180px', + }, + isOpen: optionsMenuActive, + onClickOutside: () => { this.setState({ optionsMenuActive: false }) }, + }, + [ + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showConfigPage(), + }, + 'Account Settings', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected, network } = this.props + const url = genAccountLink(selected, network) + global.platform.openWindow({ url }) + }, + }, + 'View account on Etherscan', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected } = this.props + const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) + copyToClipboard(checkSumAddress) + }, + }, + 'Copy Address to clipboard', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + actions.requestAccountExport() + }, + }, + 'Export Private Key', + ), + ] + ) + } + render () { - const { style, actions } = this.props - const { switchingMenuActive, overflowMenuActive } = this.state + const { style } = this.props + const { optionsMenuActive, accountSelectorActive } = this.state return h( 'span', @@ -66,68 +179,12 @@ class AccountDropdowns extends Component { onClick: (event) => { event.stopPropagation() this.setState({ - switchingMenuActive: !switchingMenuActive, - overflowMenuActive: false, + accountSelectorActive: !accountSelectorActive, + optionsMenuActive: false, }) }, }, - [ - h( - Dropdown, - { - style: { - marginLeft: '-140px', - minWidth: '180px', - }, - isOpen: switchingMenuActive, - onClickOutside: () => { this.setState({ switchingMenuActive: false}) }, - }, - [ - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.showConfigPage(), - }, - 'Account Settings', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - const { selected, network } = this.props - const url = genAccountLink(selected, network) - global.platform.openWindow({ url }) - }, - }, - 'View account on Etherscan', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - const { selected } = this.props - const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) - copyToClipboard(checkSumAddress) - }, - }, - 'Copy Address to clipboard', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - actions.requestAccountExport() - }, - }, - 'Export Private Key', - ), - ] - ), - ], + this.renderAccountSelector(), ), h( 'i.fa.fa-ellipsis-h', @@ -136,59 +193,12 @@ class AccountDropdowns extends Component { onClick: (event) => { event.stopPropagation() this.setState({ - overflowMenuActive: !overflowMenuActive, - switchingMenuActive: false, + accountSelectorActive: false, + optionsMenuActive: !optionsMenuActive, }) }, }, - [ - h( - Dropdown, - { - style: { - marginLeft: '-155px', - minWidth: '180px', - }, - isOpen: overflowMenuActive, - onClickOutside: () => { this.setState({ overflowMenuActive: false}) }, - }, - [ - ...this.getAccounts(), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.addNewAccount(), - }, - [ - h( - Identicon, - { - diameter: 16, - }, - ), - h('span', { style: { marginLeft: '10px' } }, 'Create Account'), - ], - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.showImportPage(), - }, - [ - h( - Identicon, - { - diameter: 16, - }, - ), - h('span', { style: { marginLeft: '10px' } }, 'Import Account'), - ] - ), - ] - ), - ] + this.renderAccountOptions() ), ] ) -- cgit v1.2.3