From ba50411bb2247d783667142cc5e7efff1bf839de Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 21:54:42 -0700 Subject: Position account icon, name, and caret --- ui/app/components/account-dropdowns.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) (limited to 'ui/app/components/account-dropdowns.js') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index b23600e9b..3129e0226 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -218,16 +218,16 @@ class AccountDropdowns extends Component { }, [ enableAccountsSelector && h( - // 'i.fa.fa-angle-down', - 'div.cursor-pointer.color-orange.accounts-selector', + 'i.fa.fa-angle-down', + // 'div.cursor-pointer.color-orange.accounts-selector', { style: { - // fontSize: '1.8em', - background: 'url(images/switch_acc.svg) white center center no-repeat', - height: '25px', - width: '25px', - transform: 'scale(0.75)', - marginRight: '3px', + // fontSize: '135%', + // background: 'url(images/switch_acc.svg) white center center no-repeat', + // height: '25px', + // width: '25px', + // transform: 'scale(0.75)', + // marginRight: '3px', }, onClick: (event) => { event.stopPropagation() @@ -243,8 +243,7 @@ class AccountDropdowns extends Component { 'i.fa.fa-ellipsis-h', { style: { - marginRight: '0.5em', - fontSize: '1.8em', + fontSize: '135%', }, onClick: (event) => { event.stopPropagation() -- cgit v1.2.3 From 779be75370e10ea9b248686790127200badc3f65 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 9 Aug 2017 21:40:21 -0700 Subject: [WIP] Position account potions dropdown correctly and hook up to action creators --- ui/app/components/account-dropdowns.js | 61 +++++++++++++++++++++++++--------- 1 file changed, 46 insertions(+), 15 deletions(-) (limited to 'ui/app/components/account-dropdowns.js') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 3129e0226..3f1b0ee53 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -22,7 +22,7 @@ class AccountDropdowns extends Component { } renderAccounts () { - const { identities, selected } = this.props + const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props return Object.keys(identities).map((key, index) => { const identity = identities[key] @@ -35,10 +35,13 @@ class AccountDropdowns extends Component { onClick: () => { this.props.actions.showAccountDetail(identity.address) }, - style: { - marginTop: index === 0 ? '5px' : '', - fontSize: '24px', - }, + style: Object.assign( + { + marginTop: index === 0 ? '5px' : '', + fontSize: '24px', + }, + menuItemStyles, + ), }, [ h( @@ -59,8 +62,8 @@ class AccountDropdowns extends Component { } renderAccountSelector () { - const { actions } = this.props - const { accountSelectorActive } = this.state + const { actions, dropdownWrapperStyle } = this.props + const { accountSelectorActive, menuItemStyles } = this.state return h( Dropdown, @@ -93,6 +96,10 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => actions.addNewAccount(), + style: Object.assign( + {}, + menuItemStyles, + ), }, [ h( @@ -112,6 +119,10 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => actions.showImportPage(), + style: Object.assign( + {}, + menuItemStyles, + ), }, [ h( @@ -137,16 +148,20 @@ class AccountDropdowns extends Component { } renderAccountOptions () { - const { actions } = this.props - const { optionsMenuActive } = this.state + const { actions, dropdownWrapperStyle } = this.props + const { optionsMenuActive, menuItemStyles } = this.state return h( Dropdown, { - style: { - marginLeft: '-215px', - minWidth: '180px', - }, + style: Object.assign( + { + marginLeft: '-10px', + position: 'absolute', + width: '29vh', // affects both mobile and laptop views + }, + dropdownWrapperStyle, + ), isOpen: optionsMenuActive, onClickOutside: () => { const { classList } = event.target @@ -166,6 +181,10 @@ class AccountDropdowns extends Component { const url = genAccountLink(selected, network) global.platform.openWindow({ url }) }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'View account on Etherscan', ), @@ -178,6 +197,10 @@ class AccountDropdowns extends Component { var identity = identities[selected] actions.showQrView(selected, identity ? identity.name : '') }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'Show QR Code', ), @@ -190,6 +213,10 @@ class AccountDropdowns extends Component { const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) copyToClipboard(checkSumAddress) }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'Copy Address to clipboard', ), @@ -200,6 +227,10 @@ class AccountDropdowns extends Component { onClick: () => { actions.requestAccountExport() }, + style: Object.assign( + {}, + menuItemStyles, + ), }, 'Export Private Key', ), @@ -208,7 +239,7 @@ class AccountDropdowns extends Component { } render () { - const { style, enableAccountsSelector, enableAccountOptions } = this.props + const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props const { optionsMenuActive, accountSelectorActive } = this.state return h( @@ -267,7 +298,7 @@ AccountDropdowns.defaultProps = { AccountDropdowns.propTypes = { identities: PropTypes.objectOf(PropTypes.object), - selected: PropTypes.string, + selected: PropTypes.string, // TODO: refactor to be more explicit: selectedAddress } const mapDispatchToProps = (dispatch) => { -- cgit v1.2.3 From 88665ba150c74955ef11a1b3fbc0f158a1c321de Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 08:31:49 +0200 Subject: Extract dropdown component into components/dropdowns, hook up to app --- ui/app/components/account-dropdowns.js | 319 --------------------------------- 1 file changed, 319 deletions(-) delete mode 100644 ui/app/components/account-dropdowns.js (limited to 'ui/app/components/account-dropdowns.js') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js deleted file mode 100644 index 3f1b0ee53..000000000 --- a/ui/app/components/account-dropdowns.js +++ /dev/null @@ -1,319 +0,0 @@ -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 = { - accountSelectorActive: false, - optionsMenuActive: false, - } - this.accountSelectorToggleClassName = 'accounts-selector' - this.optionsMenuToggleClassName = 'fa-ellipsis-h' - } - - renderAccounts () { - const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props - - return Object.keys(identities).map((key, index) => { - const identity = identities[key] - const isSelected = identity.address === selected - - return h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - this.props.actions.showAccountDetail(identity.address) - }, - style: Object.assign( - { - marginTop: index === 0 ? '5px' : '', - fontSize: '24px', - }, - menuItemStyles, - ), - }, - [ - h( - Identicon, - { - address: identity.address, - diameter: 32, - style: { - marginLeft: '10px', - }, - }, - ), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), - ] - ) - }) - } - - renderAccountSelector () { - const { actions, dropdownWrapperStyle } = this.props - const { accountSelectorActive, menuItemStyles } = this.state - - return h( - Dropdown, - { - useCssTransition: true, // Hardcoded because account selector is temporarily in app-header - style: { - marginLeft: '-238px', - marginTop: '38px', - minWidth: '180px', - overflowY: 'auto', - maxHeight: '300px', - width: '300px', - }, - innerStyle: { - padding: '8px 25px', - }, - isOpen: accountSelectorActive, - onClickOutside: (event) => { - const { classList } = event.target - const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName) - if (accountSelectorActive && isNotToggleElement) { - this.setState({ accountSelectorActive: false }) - } - }, - }, - [ - ...this.renderAccounts(), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.addNewAccount(), - style: Object.assign( - {}, - menuItemStyles, - ), - }, - [ - h( - Identicon, - { - style: { - marginLeft: '10px', - }, - diameter: 32, - }, - ), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'), - ], - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.showImportPage(), - style: Object.assign( - {}, - menuItemStyles, - ), - }, - [ - h( - Identicon, - { - style: { - marginLeft: '10px', - }, - diameter: 32, - }, - ), - h('span', { - style: { - marginLeft: '20px', - fontSize: '24px', - marginBottom: '5px', - }, - }, 'Import Account'), - ] - ), - ] - ) - } - - renderAccountOptions () { - const { actions, dropdownWrapperStyle } = this.props - const { optionsMenuActive, menuItemStyles } = this.state - - return h( - Dropdown, - { - style: Object.assign( - { - marginLeft: '-10px', - position: 'absolute', - width: '29vh', // affects both mobile and laptop views - }, - dropdownWrapperStyle, - ), - isOpen: optionsMenuActive, - onClickOutside: () => { - const { classList } = event.target - const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName) - if (optionsMenuActive && isNotToggleElement) { - this.setState({ optionsMenuActive: false }) - } - }, - }, - [ - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - const { selected, network } = this.props - const url = genAccountLink(selected, network) - global.platform.openWindow({ url }) - }, - style: Object.assign( - {}, - menuItemStyles, - ), - }, - 'View account on Etherscan', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - const { selected, identities } = this.props - var identity = identities[selected] - actions.showQrView(selected, identity ? identity.name : '') - }, - style: Object.assign( - {}, - menuItemStyles, - ), - }, - 'Show QR Code', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - const { selected } = this.props - const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) - copyToClipboard(checkSumAddress) - }, - style: Object.assign( - {}, - menuItemStyles, - ), - }, - 'Copy Address to clipboard', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - actions.requestAccountExport() - }, - style: Object.assign( - {}, - menuItemStyles, - ), - }, - 'Export Private Key', - ), - ] - ) - } - - render () { - const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props - const { optionsMenuActive, accountSelectorActive } = this.state - - return h( - 'span', - { - style: style, - }, - [ - enableAccountsSelector && h( - 'i.fa.fa-angle-down', - // 'div.cursor-pointer.color-orange.accounts-selector', - { - style: { - // fontSize: '135%', - // background: 'url(images/switch_acc.svg) white center center no-repeat', - // height: '25px', - // width: '25px', - // transform: 'scale(0.75)', - // marginRight: '3px', - }, - onClick: (event) => { - event.stopPropagation() - this.setState({ - accountSelectorActive: !accountSelectorActive, - optionsMenuActive: false, - }) - }, - }, - this.renderAccountSelector(), - ), - enableAccountOptions && h( - 'i.fa.fa-ellipsis-h', - { - style: { - fontSize: '135%', - }, - onClick: (event) => { - event.stopPropagation() - this.setState({ - accountSelectorActive: false, - optionsMenuActive: !optionsMenuActive, - }) - }, - }, - this.renderAccountOptions() - ), - ] - ) - } -} - -AccountDropdowns.defaultProps = { - enableAccountsSelector: false, - enableAccountOptions: false, -} - -AccountDropdowns.propTypes = { - identities: PropTypes.objectOf(PropTypes.object), - selected: PropTypes.string, // TODO: refactor to be more explicit: selectedAddress -} - -const mapDispatchToProps = (dispatch) => { - return { - actions: { - showConfigPage: () => dispatch(actions.showConfigPage()), - requestAccountExport: () => dispatch(actions.requestExportAccount()), - showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), - addNewAccount: () => dispatch(actions.addNewAccount()), - showImportPage: () => dispatch(actions.showImportPage()), - showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), - }, - } -} - -module.exports = { - AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), -} -- cgit v1.2.3 From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 6 Feb 2018 22:03:37 -0800 Subject: Remove accessing PropTypes from main React package --- ui/app/components/account-dropdowns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/account-dropdowns.js') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 0c34a5154..f69a6ca68 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -1,5 +1,5 @@ const Component = require('react').Component -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') const h = require('react-hyperscript') const actions = require('../actions') const genAccountLink = require('etherscan-link').createAccountLink -- cgit v1.2.3