From e39c600a45a4cf28b5429231dd6c57442d467075 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 10:49:41 -0700 Subject: [WIP] Extract network dropdown out of main app render function --- ui/app/components/dropdowns/index.js | 16 ++ ui/app/components/dropdowns/network.js | 259 +++++++++++++++++++++++++++++++++ 2 files changed, 275 insertions(+) create mode 100644 ui/app/components/dropdowns/index.js create mode 100644 ui/app/components/dropdowns/network.js (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js new file mode 100644 index 000000000..b52dd8802 --- /dev/null +++ b/ui/app/components/dropdowns/index.js @@ -0,0 +1,16 @@ +// Reusable Dropdown Components +// const Dropdown = require('./dropdown') //TODO: Refactor into separate components +// const AccountDropdowns = require('./account-dropdowns') + +// App-Specific Instances +// const AccountSelectionDropdown = require('./account-selection-dropdown') +// const AccountOptionsDropdown = require('./account-options-dropdown') +const NetworkDropdown = require('./network-dropdown') + +module.exports = { + // AccountSelectionDropdown, + // AccountOptionsDropdown, + NetworkDropdown, + // Dropdown, + // AccountDropdowns, +} \ No newline at end of file diff --git a/ui/app/components/dropdowns/network.js b/ui/app/components/dropdowns/network.js new file mode 100644 index 000000000..2b693803b --- /dev/null +++ b/ui/app/components/dropdowns/network.js @@ -0,0 +1,259 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') + +// connect, dispatch actions... + // onClick: () => props.dispatch(actions.setProviderType('mainnet')), + // onClick: () => props.dispatch(actions.setDefaultRpcTarget()), + // onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)), + // onClick: () => this.props.dispatch(actions.showConfigPage()), + +function mapStateToProps (state) { + return { + active: state.appState.modalOpen + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + + +inherits(NetworkDropdown, Component) +function NetworkDropdown () { + Component.call(this) +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) + +// renderNetworkDropdown +// renderCustomOption +// renderCommonRpc +// TODO: specify default props and proptypes +NetworkDropdown.prototype.render = function () { + const props = this.props + const { provider: { type: providerType, rpcTarget: activeNetwork } } = props + const rpcList = props.frequentRpcList + const state = this.state || {} + const isOpen = state.isNetworkMenuOpen + + return h(Dropdown, { + useCssTransition: true, + isOpen, + onClickOutside: (event) => { + const { classList } = event.target + const isNotToggleElement = [ + classList.contains('menu-icon'), + classList.contains('network-name'), + classList.contains('network-indicator'), + ].filter(bool => bool).length === 0 + // classes from three constituent nodes of the toggle element + + if (isNotToggleElement) { + this.setState({ isNetworkMenuOpen: false }) + } + }, + zIndex: 11, + style: { + position: 'absolute', + right: '2px', + top: '38px', + }, + innerStyle: { + padding: '2px 16px 2px 0px', + }, + }, [ + + h( + DropdownMenuItem, + { + key: 'main', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('mainnet')), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.diamond'), + 'Main Ethereum Network', + providerType === 'mainnet' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'ropsten', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('ropsten')), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.red-dot'), + 'Ropsten Test Network', + providerType === 'ropsten' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'kovan', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('kovan')), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.hollow-diamond'), + 'Kovan Test Network', + providerType === 'kovan' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'rinkeby', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('rinkeby')), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.golden-square'), + 'Rinkeby Test Network', + providerType === 'rinkeby' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'default', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setDefaultRpcTarget()), + style: { + fontSize: '18px', + }, + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Localhost 8545', + activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, + ] + ), + + this.renderCustomOption(props.provider), + this.renderCommonRpc(rpcList, props.provider), + + h( + DropdownMenuItem, + { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => this.props.dispatch(actions.showConfigPage()), + style: { + fontSize: '18px', + }, + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Custom RPC', + activeNetwork === 'custom' ? h('.check', '✓') : null, + ] + ), + + ]) +} + + +NetworkDropdown.prototype.getNetworkName = function () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = 'Main Ethereum Network' + } else if (providerName === 'ropsten') { + name = 'Ropsten Test Network' + } else if (providerName === 'kovan') { + name = 'Kovan Test Network' + } else if (providerName === 'rinkeby') { + name = 'Rinkeby Test Network' + } else { + name = 'Unknown Private Network' + } + + return name +} + +NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { + const props = this.props + const rpcTarget = provider.rpcTarget + + return rpcList.map((rpc) => { + if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { + return null + } else { + return h( + DropdownMenuItem, + { + key: `common${rpc}`, + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + onClick: () => props.dispatch(actions.setRpcTarget(rpc)), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + rpc, + rpcTarget === rpc ? h('.check', '✓') : null, + ] + ) + } + }) +} + +NetworkDropdown.prototype.renderCustomOption = function (provider) { + const { rpcTarget, type } = provider + const props = this.props + + if (type !== 'rpc') return null + + // Concatenate long URLs + let label = rpcTarget + if (rpcTarget.length > 31) { + label = label.substr(0, 34) + '...' + } + + switch (rpcTarget) { + + case 'http://localhost:8545': + return null + + default: + return h( + DropdownMenuItem, + { + key: rpcTarget, + onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)), + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + label, + h('.check', '✓'), + ] + ) + } +} -- cgit From 4cd33453dc14ae9e6a797c16cccb52598904941a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 22:15:21 +0200 Subject: [WIP] Extract network dropdown into own component --- ui/app/components/dropdowns/index.js | 2 +- ui/app/components/dropdowns/network-dropdown.js | 276 ++++++++++++++++++++++++ ui/app/components/dropdowns/network.js | 259 ---------------------- 3 files changed, 277 insertions(+), 260 deletions(-) create mode 100644 ui/app/components/dropdowns/network-dropdown.js delete mode 100644 ui/app/components/dropdowns/network.js (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js index b52dd8802..6723a2048 100644 --- a/ui/app/components/dropdowns/index.js +++ b/ui/app/components/dropdowns/index.js @@ -5,7 +5,7 @@ // App-Specific Instances // const AccountSelectionDropdown = require('./account-selection-dropdown') // const AccountOptionsDropdown = require('./account-options-dropdown') -const NetworkDropdown = require('./network-dropdown') +const NetworkDropdown = require('./network-dropdown').default module.exports = { // AccountSelectionDropdown, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js new file mode 100644 index 000000000..42ab53c60 --- /dev/null +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -0,0 +1,276 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') +const Dropdown = require('../dropdown').Dropdown +const DropdownMenuItem = require('../dropdown').DropdownMenuItem + +function mapStateToProps (state) { + return { + provider: state.metamask.provider, + frequentRpcList: state.metamask.frequentRpcList || [], + networkDropdownOpen: state.appState.networkDropdownOpen, + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + setProviderType: (type) => { + dispatch(actions.setProviderType(type)) + }, + setDefaultRpcTarget: () => { + dispatch(actions.setDefaultRpcTarget(type)) + }, + setRpcTarget: (target) => { + dispatch(actions.setRpcTarget(target)) + }, + showConfigPage: () => { + dispatch(actions.showConfigPage()) + }, + showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())}, + hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())}, + } +} + + +inherits(NetworkDropdown, Component) +function NetworkDropdown () { + Component.call(this) +} + +// renderNetworkDropdown +// renderCustomOption +// renderCommonRpc +// TODO: specify default props and proptypes +NetworkDropdown.prototype.render = function () { + console.log("RENDER") + const props = this.props + const { provider: { type: providerType, rpcTarget: activeNetwork } } = props + const rpcList = props.frequentRpcList + const state = this.state || {} + console.log("this.state", state) + const isOpen = this.props.networkDropdownOpen + + console.log("isOpen", isOpen) + + return h(Dropdown, { + useCssTransition: true, + isOpen, + onClickOutside: (event) => { + const { classList } = event.target + const isNotToggleElement = [ + classList.contains('menu-icon'), + classList.contains('network-name'), + classList.contains('network-indicator'), + ].filter(bool => bool).length === 0 + // classes from three constituent nodes of the toggle element + + if (isNotToggleElement) { + this.props.hideNetworkDropdown() + } + }, + zIndex: 11, + style: { + position: 'absolute', + right: '2px', + top: '38px', + }, + innerStyle: { + padding: '2px 16px 2px 0px', + }, + }, [ + + h( + DropdownMenuItem, + { + key: 'main', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => props.setProviderType('mainnet'), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.diamond'), + 'Main Ethereum Network', + providerType === 'mainnet' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'ropsten', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => props.setProviderType('ropsten'), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.red-dot'), + 'Ropsten Test Network', + providerType === 'ropsten' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'kovan', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => props.setProviderType('kovan'), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.hollow-diamond'), + 'Kovan Test Network', + providerType === 'kovan' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'rinkeby', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => propssetProviderType('rinkeby'), + style: { + fontSize: '18px', + }, + }, + [ + h('.menu-icon.golden-square'), + 'Rinkeby Test Network', + providerType === 'rinkeby' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + key: 'default', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => props.setDefaultRpcTarget(), + style: { + fontSize: '18px', + }, + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Localhost 8545', + activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, + ] + ), + + this.renderCustomOption(props.provider), + this.renderCommonRpc(rpcList, props.provider), + + h( + DropdownMenuItem, + { + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => this.props.showConfigPage(), + style: { + fontSize: '18px', + }, + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Custom RPC', + activeNetwork === 'custom' ? h('.check', '✓') : null, + ] + ), + + ]) +} + + +NetworkDropdown.prototype.getNetworkName = function () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = 'Main Ethereum Network' + } else if (providerName === 'ropsten') { + name = 'Ropsten Test Network' + } else if (providerName === 'kovan') { + name = 'Kovan Test Network' + } else if (providerName === 'rinkeby') { + name = 'Rinkeby Test Network' + } else { + name = 'Unknown Private Network' + } + + return name +} + +NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { + const props = this.props + const rpcTarget = provider.rpcTarget + + return rpcList.map((rpc) => { + if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { + return null + } else { + return h( + DropdownMenuItem, + { + key: `common${rpc}`, + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => props.setRpcTarget(rpc), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + rpc, + rpcTarget === rpc ? h('.check', '✓') : null, + ] + ) + } + }) +} + +NetworkDropdown.prototype.renderCustomOption = function (provider) { + const { rpcTarget, type } = provider + const props = this.props + + if (type !== 'rpc') return null + + // Concatenate long URLs + let label = rpcTarget + if (rpcTarget.length > 31) { + label = label.substr(0, 34) + '...' + } + + switch (rpcTarget) { + + case 'http://localhost:8545': + return null + + default: + return h( + DropdownMenuItem, + { + key: rpcTarget, + onClick: () => props.setRpcTarget(rpcTarget), + closeMenu: () => this.props.hideNetworkDropdown(), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + label, + h('.check', '✓'), + ] + ) + } +} + +const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) +module.exports = comp diff --git a/ui/app/components/dropdowns/network.js b/ui/app/components/dropdowns/network.js deleted file mode 100644 index 2b693803b..000000000 --- a/ui/app/components/dropdowns/network.js +++ /dev/null @@ -1,259 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') - -// connect, dispatch actions... - // onClick: () => props.dispatch(actions.setProviderType('mainnet')), - // onClick: () => props.dispatch(actions.setDefaultRpcTarget()), - // onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)), - // onClick: () => this.props.dispatch(actions.showConfigPage()), - -function mapStateToProps (state) { - return { - active: state.appState.modalOpen - } -} - -function mapDispatchToProps (dispatch) { - return { - hideModal: () => { - dispatch(actions.hideModal()) - }, - } -} - - -inherits(NetworkDropdown, Component) -function NetworkDropdown () { - Component.call(this) -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) - -// renderNetworkDropdown -// renderCustomOption -// renderCommonRpc -// TODO: specify default props and proptypes -NetworkDropdown.prototype.render = function () { - const props = this.props - const { provider: { type: providerType, rpcTarget: activeNetwork } } = props - const rpcList = props.frequentRpcList - const state = this.state || {} - const isOpen = state.isNetworkMenuOpen - - return h(Dropdown, { - useCssTransition: true, - isOpen, - onClickOutside: (event) => { - const { classList } = event.target - const isNotToggleElement = [ - classList.contains('menu-icon'), - classList.contains('network-name'), - classList.contains('network-indicator'), - ].filter(bool => bool).length === 0 - // classes from three constituent nodes of the toggle element - - if (isNotToggleElement) { - this.setState({ isNetworkMenuOpen: false }) - } - }, - zIndex: 11, - style: { - position: 'absolute', - right: '2px', - top: '38px', - }, - innerStyle: { - padding: '2px 16px 2px 0px', - }, - }, [ - - h( - DropdownMenuItem, - { - key: 'main', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('mainnet')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.diamond'), - 'Main Ethereum Network', - providerType === 'mainnet' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'ropsten', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('ropsten')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.red-dot'), - 'Ropsten Test Network', - providerType === 'ropsten' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'kovan', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('kovan')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.hollow-diamond'), - 'Kovan Test Network', - providerType === 'kovan' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'rinkeby', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('rinkeby')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.golden-square'), - 'Rinkeby Test Network', - providerType === 'rinkeby' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'default', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setDefaultRpcTarget()), - style: { - fontSize: '18px', - }, - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Localhost 8545', - activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, - ] - ), - - this.renderCustomOption(props.provider), - this.renderCommonRpc(rpcList, props.provider), - - h( - DropdownMenuItem, - { - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => this.props.dispatch(actions.showConfigPage()), - style: { - fontSize: '18px', - }, - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Custom RPC', - activeNetwork === 'custom' ? h('.check', '✓') : null, - ] - ), - - ]) -} - - -NetworkDropdown.prototype.getNetworkName = function () { - const { provider } = this.props - const providerName = provider.type - - let name - - if (providerName === 'mainnet') { - name = 'Main Ethereum Network' - } else if (providerName === 'ropsten') { - name = 'Ropsten Test Network' - } else if (providerName === 'kovan') { - name = 'Kovan Test Network' - } else if (providerName === 'rinkeby') { - name = 'Rinkeby Test Network' - } else { - name = 'Unknown Private Network' - } - - return name -} - -NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { - const props = this.props - const rpcTarget = provider.rpcTarget - - return rpcList.map((rpc) => { - if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { - return null - } else { - return h( - DropdownMenuItem, - { - key: `common${rpc}`, - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - onClick: () => props.dispatch(actions.setRpcTarget(rpc)), - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - rpc, - rpcTarget === rpc ? h('.check', '✓') : null, - ] - ) - } - }) -} - -NetworkDropdown.prototype.renderCustomOption = function (provider) { - const { rpcTarget, type } = provider - const props = this.props - - if (type !== 'rpc') return null - - // Concatenate long URLs - let label = rpcTarget - if (rpcTarget.length > 31) { - label = label.substr(0, 34) + '...' - } - - switch (rpcTarget) { - - case 'http://localhost:8545': - return null - - default: - return h( - DropdownMenuItem, - { - key: rpcTarget, - onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)), - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - label, - h('.check', '✓'), - ] - ) - } -} -- cgit From d01a6633423e9b20f3ca8e73cd39655362190f64 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 22:18:08 +0200 Subject: Remove unused code - network dropdown components in app --- ui/app/components/dropdowns/network-dropdown.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 42ab53c60..eb41f6f9b 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -42,21 +42,16 @@ function NetworkDropdown () { Component.call(this) } -// renderNetworkDropdown -// renderCustomOption -// renderCommonRpc +module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) + // TODO: specify default props and proptypes NetworkDropdown.prototype.render = function () { - console.log("RENDER") const props = this.props const { provider: { type: providerType, rpcTarget: activeNetwork } } = props const rpcList = props.frequentRpcList const state = this.state || {} - console.log("this.state", state) const isOpen = this.props.networkDropdownOpen - console.log("isOpen", isOpen) - return h(Dropdown, { useCssTransition: true, isOpen, @@ -271,6 +266,3 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) { ) } } - -const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) -module.exports = comp -- cgit 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 --- .../dropdowns/account-options-dropdown.js | 28 ++ .../dropdowns/account-selection-dropdown.js | 28 ++ .../dropdowns/components/account-dropdowns.js | 318 +++++++++++++++++++++ ui/app/components/dropdowns/components/dropdown.js | 95 ++++++ ui/app/components/dropdowns/index.js | 18 +- 5 files changed, 479 insertions(+), 8 deletions(-) create mode 100644 ui/app/components/dropdowns/account-options-dropdown.js create mode 100644 ui/app/components/dropdowns/account-selection-dropdown.js create mode 100644 ui/app/components/dropdowns/components/account-dropdowns.js create mode 100644 ui/app/components/dropdowns/components/dropdown.js (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js new file mode 100644 index 000000000..7d7188ec4 --- /dev/null +++ b/ui/app/components/dropdowns/account-options-dropdown.js @@ -0,0 +1,28 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const AccountDropdowns = require('./components/account-dropdowns') + +inherits(AccountOptionsDropdown, Component) +function AccountOptionsDropdown () { + Component.call(this) +} + +module.exports = AccountOptionsDropdown + +// TODO: specify default props and proptypes +// TODO: hook up to state, connect to redux to clean up API +AccountOptionsDropdown.prototype.render = function () { + const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props + + return h(AccountDropdowns, { + enableAccountOptions: true, + enableAccountsSelector: false, + selected: selectedAddress, + network, + identities, + style: !!style ? style : {}, + dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {}, + menuItemStyles: !!menuItemStyles ? menuItemStyles : {}, + }, []) +} diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js new file mode 100644 index 000000000..ccb73bde7 --- /dev/null +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -0,0 +1,28 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const AccountDropdowns = require('./components/account-dropdowns') + +inherits(AccountSelectionDropdown, Component) +function AccountSelectionDropdown () { + Component.call(this) +} + +module.exports = AccountSelectionDropdown + +// TODO: specify default props and proptypes +// TODO: hook up to state, connect to redux to clean up API +AccountSelectionDropdown.prototype.render = function () { + const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props + + return h(AccountDropdowns, { + enableAccountOptions: false, + enableAccountsSelector: true, + selected: selectedAddress, + network, + identities, + style: !!style ? style : {}, + dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {}, + menuItemStyles: !!menuItemStyles ? menuItemStyles : {}, + }, []) +} diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js new file mode 100644 index 000000000..ee41829c9 --- /dev/null +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -0,0 +1,318 @@ +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 = connect(null, mapDispatchToProps)(AccountDropdowns) + diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js new file mode 100644 index 000000000..1f35f0c70 --- /dev/null +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -0,0 +1,95 @@ +const Component = require('react').Component +const PropTypes = require('react').PropTypes +const h = require('react-hyperscript') +const MenuDroppo = require('../../menu-droppo') +const extend = require('xtend') + +const noop = () => {} + +class Dropdown extends Component { + render () { + const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props + + const innerStyleDefaults = extend({ + borderRadius: '4px', + padding: '8px 16px', + background: 'rgba(0, 0, 0, 0.8)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, innerStyle) + + return h( + MenuDroppo, + { + useCssTransition, + isOpen, + zIndex: 30, + onClickOutside, + style, + innerStyle: innerStyleDefaults, + }, + [ + h( + 'style', + ` + li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } + li.dropdown-menu-item { color: rgb(185, 185, 185); } + ` + ), + ...children, + ] + ) + } +} + +Dropdown.defaultProps = { + isOpen: false, + onClick: noop, + useCssTransition: false, +} + +Dropdown.propTypes = { + isOpen: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, + style: PropTypes.object.isRequired, +} + +class DropdownMenuItem extends Component { + render () { + const { onClick, closeMenu, children, style } = this.props + + return h( + 'li.dropdown-menu-item', + { + onClick: () => { + onClick() + closeMenu() + }, + style: Object.assign({ + listStyle: 'none', + padding: '8px 0px', + fontSize: '18px', + fontStyle: 'normal', + fontFamily: 'Montserrat Regular', + cursor: 'pointer', + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + color: 'white', + }, style), + }, + children + ) + } +} + +DropdownMenuItem.propTypes = { + closeMenu: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, +} + +module.exports = { + Dropdown, + DropdownMenuItem, +} diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js index 6723a2048..d21c795f5 100644 --- a/ui/app/components/dropdowns/index.js +++ b/ui/app/components/dropdowns/index.js @@ -1,16 +1,18 @@ // Reusable Dropdown Components -// const Dropdown = require('./dropdown') //TODO: Refactor into separate components -// const AccountDropdowns = require('./account-dropdowns') +//TODO: Refactor into separate components +const Dropdown = require('./components/dropdown').Dropdown +const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem +const AccountDropdowns = require('./components/account-dropdowns') // App-Specific Instances -// const AccountSelectionDropdown = require('./account-selection-dropdown') -// const AccountOptionsDropdown = require('./account-options-dropdown') +const AccountSelectionDropdown = require('./account-selection-dropdown') +const AccountOptionsDropdown = require('./account-options-dropdown') const NetworkDropdown = require('./network-dropdown').default module.exports = { - // AccountSelectionDropdown, - // AccountOptionsDropdown, + AccountSelectionDropdown, + AccountOptionsDropdown, NetworkDropdown, - // Dropdown, - // AccountDropdowns, + Dropdown, + AccountDropdowns, } \ No newline at end of file -- cgit From 5f775315bd3e9a724d9697d2604196bbe8d7436c Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 08:40:16 +0200 Subject: Reconfigure AccoutSelector dropdown to use new fa-caret-down instead of old icon --- ui/app/components/dropdowns/components/account-dropdowns.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index ee41829c9..69bef3f1b 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -17,7 +17,9 @@ class AccountDropdowns extends Component { accountSelectorActive: false, optionsMenuActive: false, } - this.accountSelectorToggleClassName = 'accounts-selector' + // Used for orangeaccount selector icon + // this.accountSelectorToggleClassName = 'accounts-selector' + this.accountSelectorToggleClassName = 'fa-angle-down' this.optionsMenuToggleClassName = 'fa-ellipsis-h' } -- cgit From 1743ccbdb5df504eab8e3c46c18172b176578be1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 08:50:49 +0200 Subject: Center account selection dropdown and specify useCssTransition prop --- ui/app/components/dropdowns/components/account-dropdowns.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 69bef3f1b..11d109d73 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -64,16 +64,16 @@ class AccountDropdowns extends Component { } renderAccountSelector () { - const { actions, dropdownWrapperStyle } = this.props + const { actions, dropdownWrapperStyle, useCssTransition } = this.props const { accountSelectorActive, menuItemStyles } = this.state return h( Dropdown, { - useCssTransition: true, // Hardcoded because account selector is temporarily in app-header + useCssTransition, style: { - marginLeft: '-238px', - marginTop: '38px', + marginLeft: '-185px', + marginTop: '50px', minWidth: '180px', overflowY: 'auto', maxHeight: '300px', @@ -150,12 +150,13 @@ class AccountDropdowns extends Component { } renderAccountOptions () { - const { actions, dropdownWrapperStyle } = this.props + const { actions, dropdownWrapperStyle, useCssTransition } = this.props const { optionsMenuActive, menuItemStyles } = this.state return h( Dropdown, { + useCssTransition, style: Object.assign( { marginLeft: '-10px', -- cgit From 2eadf72fb772b5b6bd32f04c9d439cc0f1ab0453 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 10:31:27 +0200 Subject: Lint and cleanup all scss --- ui/app/components/dropdowns/network-dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index eb41f6f9b..6228513c9 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -3,8 +3,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') -const Dropdown = require('../dropdown').Dropdown -const DropdownMenuItem = require('../dropdown').DropdownMenuItem +const Dropdown = require('./components/dropdown').Dropdown +const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem function mapStateToProps (state) { return { -- cgit From 7d02c90510f119959ea04e374863ddfe13cc288b Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 18:09:09 -0700 Subject: Add 'Add Token' dropdown menu item to account options dropdown --- .../components/dropdowns/components/account-dropdowns.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index b59f9bbf4..aaeb5d9bf 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -246,6 +246,21 @@ class AccountDropdowns extends Component { }, 'Export Private Key', ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + // Add Token Scren + }, + style: Object.assign( + {}, + menuItemStyles, + ), + }, + 'Add Token', + ), + ] ) } -- cgit From e550d360842074a59832e41ce211fae7f38085cc Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 18:10:06 -0700 Subject: Add 'Account Details' dropdown menu item to account options dropdown --- .../components/dropdowns/components/account-dropdowns.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index aaeb5d9bf..6af90655b 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -184,6 +184,20 @@ class AccountDropdowns extends Component { }, }, [ + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + this.props.showAccountDetail() + }, + style: Object.assign( + {}, + menuItemStyles, + ), + }, + 'Account Details', + ), h( DropdownMenuItem, { -- cgit From 71b2dd290b2bbf3107d06d0616ec8858d21b44da Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 19:10:49 -0700 Subject: Enhance global modal to handle Buy, Edit, and Details Modals --- ui/app/components/dropdowns/components/account-dropdowns.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 6af90655b..9a9fbc0fc 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -189,7 +189,7 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => { - this.props.showAccountDetail() + this.props.actions.showAccountDetailModal() }, style: Object.assign( {}, @@ -348,6 +348,9 @@ const mapDispatchToProps = (dispatch) => { showConfigPage: () => dispatch(actions.showConfigPage()), requestAccountExport: () => dispatch(actions.requestExportAccount()), showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), + showAccountDetailModal: () => { + dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) + }, addNewAccount: () => dispatch(actions.addNewAccount()), showImportPage: () => dispatch(actions.showImportPage()), showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), -- cgit From 73a593b42e3a81b721cfa2f8913565a8b800f983 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 19:28:20 -0700 Subject: Hook up template for New Account Modal --- ui/app/components/dropdowns/components/account-dropdowns.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 9a9fbc0fc..3d32ca7fb 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -46,6 +46,7 @@ class AccountDropdowns extends Component { ), }, [ + // MOVE CHECKMARK UP h( Identicon, { @@ -67,6 +68,7 @@ class AccountDropdowns extends Component { }, }, identity.name || ''), h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), + // EDIT ] ) }) @@ -122,7 +124,12 @@ class AccountDropdowns extends Component { diameter: 32, }, ), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'), + h('span', { + style: { marginLeft: '20px', fontSize: '24px' }, + onClick: () => { + actions.showNewAccountModal() + }, + }, 'Create Account'), ], ), h( @@ -351,6 +358,9 @@ const mapDispatchToProps = (dispatch) => { showAccountDetailModal: () => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) }, + showNewAccountModal: () => { + dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) + }, addNewAccount: () => dispatch(actions.addNewAccount()), showImportPage: () => dispatch(actions.showImportPage()), showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), -- cgit From beedd5b11e6004b32aff9b45663dfdb4fb6e2d2e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 19:29:14 -0700 Subject: Remove old design - 'Show QR Code' dropdown menu item from account selection dropdown --- .../components/dropdowns/components/account-dropdowns.js | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 3d32ca7fb..691c41f30 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -221,22 +221,6 @@ class AccountDropdowns extends Component { }, '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, { -- cgit From 18ea874a801c5252adb00317647c828810c33634 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 19:39:37 -0700 Subject: Hook up edit account name modal --- .../dropdowns/components/account-dropdowns.js | 68 +++++++++++++--------- 1 file changed, 42 insertions(+), 26 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 691c41f30..f6606d8bb 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -24,7 +24,7 @@ class AccountDropdowns extends Component { } renderAccounts () { - const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props + const { identities, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props return Object.keys(identities).map((key, index) => { const identity = identities[key] @@ -46,29 +46,47 @@ class AccountDropdowns extends Component { ), }, [ - // MOVE CHECKMARK UP - h( - Identicon, - { - address: identity.address, - diameter: 32, + h('div.flex-row', {}, [ + + h('span', { style: { - marginLeft: '10px', + flex: '1 1 auto', + } + }, isSelected ? h('.check', '✓') : null), + + h( + Identicon, + { + address: identity.address, + diameter: 32, + style: { + flex: '1 1 auto', + }, }, - }, - ), - h('span', { - style: { - marginLeft: '20px', - fontSize: '24px', - maxWidth: '145px', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, identity.name || ''), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), - // EDIT + ), + + h('span', { + style: { + flex: '5 5 auto', + fontSize: '24px', + maxWidth: '145px', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, identity.name || ''), + + h('span', { + style: { + flex: '2 2 auto', + fontSize: '18px', + }, + onClick: () => { + actions.showNewAccountModal() + } + }, 'Edit'), + + ]) ] ) }) @@ -90,9 +108,7 @@ class AccountDropdowns extends Component { maxHeight: '300px', width: '300px', }, - innerStyle: { - padding: '8px 25px', - }, + innerStyle: {}, isOpen: accountSelectorActive, onClickOutside: (event) => { const { classList } = event.target @@ -343,7 +359,7 @@ const mapDispatchToProps = (dispatch) => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) }, showNewAccountModal: () => { - dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) + dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' })) }, addNewAccount: () => dispatch(actions.addNewAccount()), showImportPage: () => dispatch(actions.showImportPage()), -- cgit From 66829b7a05322320855b077c04f885908bd95efa Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 03:27:11 -0700 Subject: Implement new dropdown design, integrate account balances --- .../dropdowns/components/account-dropdowns.js | 84 +++++++++++++++------- 1 file changed, 60 insertions(+), 24 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index f6606d8bb..043789b6c 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem const Identicon = require('../../identicon') const ethUtil = require('ethereumjs-util') const copyToClipboard = require('copy-to-clipboard') +const { formatBalance } = require('../../../util') class AccountDropdowns extends Component { constructor (props) { @@ -24,12 +25,15 @@ class AccountDropdowns extends Component { } renderAccounts () { - const { identities, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props + const { identities, accounts, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props return Object.keys(identities).map((key, index) => { const identity = identities[key] const isSelected = identity.address === selected + const balanceValue = accounts[key].balance + const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...' + return h( DropdownMenuItem, { @@ -46,45 +50,77 @@ class AccountDropdowns extends Component { ), }, [ - h('div.flex-row', {}, [ + h('div.flex-row.flex-center', {}, [ h('span', { style: { - flex: '1 1 auto', + flex: '1 1 0', + minWidth: '20px', + minHeight: '30px', } - }, isSelected ? h('.check', '✓') : null), + }, [ + h('span', { + style: { + flex: '1 1 auto', + fontSize: '14px', + } + }, isSelected ? h('i.fa.fa-check') : null), + ]), h( Identicon, { address: identity.address, - diameter: 32, + diameter: 24, style: { flex: '1 1 auto', + marginLeft: '10px', }, }, ), - h('span', { + h('span.flex-column', { style: { - flex: '5 5 auto', - fontSize: '24px', - maxWidth: '145px', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, identity.name || ''), + flex: '10 10 auto', + width: '175px', + alignItems: 'flex-start', + justifyContent: 'center', + marginLeft: '10px', + } + }, [ + h('span.account-dropdown-name', { + style: { + fontSize: '18px', + maxWidth: '145px', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, identity.name || ''), + + h('span.account-dropdown-balance', { + style: { + fontSize: '14px', + }, + }, formattedBalance) + ]), h('span', { style: { - flex: '2 2 auto', - fontSize: '18px', + flex: '3 3 auto', }, - onClick: () => { - actions.showNewAccountModal() - } - }, 'Edit'), + }, [ + h('span.account-dropdown-edit-button', { + style: { + fontSize: '16px', + }, + onClick: () => { + actions.showNewAccountModal() + }, + }, [ + 'Edit', + ]) + ]), ]) ] @@ -93,7 +129,7 @@ class AccountDropdowns extends Component { } renderAccountSelector () { - const { actions, dropdownWrapperStyle, useCssTransition } = this.props + const { actions, dropdownWrapperStyle, useCssTransition, innerStyle } = this.props const { accountSelectorActive, menuItemStyles } = this.state return h( @@ -108,7 +144,7 @@ class AccountDropdowns extends Component { maxHeight: '300px', width: '300px', }, - innerStyle: {}, + innerStyle, isOpen: accountSelectorActive, onClickOutside: (event) => { const { classList } = event.target @@ -141,7 +177,7 @@ class AccountDropdowns extends Component { }, ), h('span', { - style: { marginLeft: '20px', fontSize: '24px' }, + style: { marginLeft: '20px', fontSize: '18px' }, onClick: () => { actions.showNewAccountModal() }, @@ -171,7 +207,7 @@ class AccountDropdowns extends Component { h('span', { style: { marginLeft: '20px', - fontSize: '24px', + fontSize: '18px', marginBottom: '5px', }, }, 'Import Account'), -- cgit From d82233b95c5c3c4297a2d18b981ec6188de003c1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 04:46:38 -0700 Subject: Hook up actions to EditAccountNameModal --- ui/app/components/dropdowns/components/account-dropdowns.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 043789b6c..2854ec95d 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -115,7 +115,7 @@ class AccountDropdowns extends Component { fontSize: '16px', }, onClick: () => { - actions.showNewAccountModal() + actions.showEditAccountModal(identity) }, }, [ 'Edit', @@ -394,8 +394,14 @@ const mapDispatchToProps = (dispatch) => { showAccountDetailModal: () => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) }, + showEditAccountModal: (identity) => { + dispatch(actions.showModal({ + name: 'EDIT_ACCOUNT_NAME', + identity, + })) + }, showNewAccountModal: () => { - dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' })) + dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) }, addNewAccount: () => dispatch(actions.addNewAccount()), showImportPage: () => dispatch(actions.showImportPage()), -- cgit From 9d69401041368ec5e3754f80d33fe69687c8e9cf Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 16:25:23 -0700 Subject: Hook up showAddToken to dropdown menu item in account options dropdown --- ui/app/components/dropdowns/components/account-dropdowns.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 2854ec95d..c340fdaed 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -308,7 +308,7 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => { - // Add Token Scren + actions.showAddTokenPage() }, style: Object.assign( {}, @@ -403,6 +403,9 @@ const mapDispatchToProps = (dispatch) => { showNewAccountModal: () => { dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) }, + showAddTokenPage: () => { + dispatch(actions.showAddTokenPage()) + }, addNewAccount: () => dispatch(actions.addNewAccount()), showImportPage: () => dispatch(actions.showImportPage()), showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), -- cgit From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 12:20:48 -0230 Subject: Lint fixes --- .../components/dropdowns/account-options-dropdown.js | 7 ++++--- .../components/dropdowns/account-selection-dropdown.js | 7 ++++--- .../dropdowns/components/account-dropdowns.js | 18 +++++++++--------- ui/app/components/dropdowns/index.js | 5 ++--- ui/app/components/dropdowns/network-dropdown.js | 8 ++++---- 5 files changed, 23 insertions(+), 22 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js index 7d7188ec4..50e793d87 100644 --- a/ui/app/components/dropdowns/account-options-dropdown.js +++ b/ui/app/components/dropdowns/account-options-dropdown.js @@ -12,6 +12,7 @@ module.exports = AccountOptionsDropdown // TODO: specify default props and proptypes // TODO: hook up to state, connect to redux to clean up API +// TODO: selectedAddress is not defined... should we use selected? AccountOptionsDropdown.prototype.render = function () { const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props @@ -21,8 +22,8 @@ AccountOptionsDropdown.prototype.render = function () { selected: selectedAddress, network, identities, - style: !!style ? style : {}, - dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {}, - menuItemStyles: !!menuItemStyles ? menuItemStyles : {}, + style: style || {}, + dropdownWrapperStyle: dropdownWrapperStyle || {}, + menuItemStyles: menuItemStyles || {}, }, []) } diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js index ccb73bde7..7a8502d18 100644 --- a/ui/app/components/dropdowns/account-selection-dropdown.js +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -12,6 +12,7 @@ module.exports = AccountSelectionDropdown // TODO: specify default props and proptypes // TODO: hook up to state, connect to redux to clean up API +// TODO: selectedAddress is not defined... should we use selected? AccountSelectionDropdown.prototype.render = function () { const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props @@ -21,8 +22,8 @@ AccountSelectionDropdown.prototype.render = function () { selected: selectedAddress, network, identities, - style: !!style ? style : {}, - dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {}, - menuItemStyles: !!menuItemStyles ? menuItemStyles : {}, + style: style || {}, + dropdownWrapperStyle: dropdownWrapperStyle || {}, + menuItemStyles: menuItemStyles || {}, }, []) } diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index c340fdaed..1e869251a 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -25,7 +25,7 @@ class AccountDropdowns extends Component { } renderAccounts () { - const { identities, accounts, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props + const { identities, accounts, selected, menuItemStyles, actions } = this.props return Object.keys(identities).map((key, index) => { const identity = identities[key] @@ -57,13 +57,13 @@ class AccountDropdowns extends Component { flex: '1 1 0', minWidth: '20px', minHeight: '30px', - } + }, }, [ h('span', { style: { flex: '1 1 auto', fontSize: '14px', - } + }, }, isSelected ? h('i.fa.fa-check') : null), ]), @@ -86,7 +86,7 @@ class AccountDropdowns extends Component { alignItems: 'flex-start', justifyContent: 'center', marginLeft: '10px', - } + }, }, [ h('span.account-dropdown-name', { style: { @@ -102,7 +102,7 @@ class AccountDropdowns extends Component { style: { fontSize: '14px', }, - }, formattedBalance) + }, formattedBalance), ]), h('span', { @@ -119,17 +119,17 @@ class AccountDropdowns extends Component { }, }, [ 'Edit', - ]) + ]), ]), - ]) + ]), ] ) }) } renderAccountSelector () { - const { actions, dropdownWrapperStyle, useCssTransition, innerStyle } = this.props + const { actions, useCssTransition, innerStyle } = this.props const { accountSelectorActive, menuItemStyles } = this.state return h( @@ -323,7 +323,7 @@ class AccountDropdowns extends Component { } render () { - const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props + const { style, enableAccountsSelector, enableAccountOptions } = this.props const { optionsMenuActive, accountSelectorActive } = this.state return h( diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js index d21c795f5..fa66f5000 100644 --- a/ui/app/components/dropdowns/index.js +++ b/ui/app/components/dropdowns/index.js @@ -1,7 +1,6 @@ // Reusable Dropdown Components -//TODO: Refactor into separate components +// TODO: Refactor into separate components const Dropdown = require('./components/dropdown').Dropdown -const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const AccountDropdowns = require('./components/account-dropdowns') // App-Specific Instances @@ -15,4 +14,4 @@ module.exports = { NetworkDropdown, Dropdown, AccountDropdowns, -} \ No newline at end of file +} diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 6228513c9..0c002b2f0 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -23,6 +23,7 @@ function mapDispatchToProps (dispatch) { dispatch(actions.setProviderType(type)) }, setDefaultRpcTarget: () => { + // TODO: type is not defined. Is it needed? dispatch(actions.setDefaultRpcTarget(type)) }, setRpcTarget: (target) => { @@ -31,8 +32,8 @@ function mapDispatchToProps (dispatch) { showConfigPage: () => { dispatch(actions.showConfigPage()) }, - showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())}, - hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())}, + showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) }, + hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) }, } } @@ -49,7 +50,6 @@ NetworkDropdown.prototype.render = function () { const props = this.props const { provider: { type: providerType, rpcTarget: activeNetwork } } = props const rpcList = props.frequentRpcList - const state = this.state || {} const isOpen = this.props.networkDropdownOpen return h(Dropdown, { @@ -135,7 +135,7 @@ NetworkDropdown.prototype.render = function () { { key: 'rinkeby', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => propssetProviderType('rinkeby'), + onClick: () => props.setProviderType('rinkeby'), style: { fontSize: '18px', }, -- cgit From b1fc290bed26ae0ea8d182340854c82cc1f3d12d Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Thu, 31 Aug 2017 04:08:11 -0700 Subject: Fix menu style --- .../dropdowns/account-selection-dropdown.js | 2 +- .../dropdowns/components/account-dropdowns.js | 38 ++++++++-- ui/app/components/dropdowns/network-dropdown.js | 83 ++++++++++++++-------- 3 files changed, 86 insertions(+), 37 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js index 7a8502d18..b1f4d68ce 100644 --- a/ui/app/components/dropdowns/account-selection-dropdown.js +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown // TODO: selectedAddress is not defined... should we use selected? AccountSelectionDropdown.prototype.render = function () { const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props - + console.log({style}) return h(AccountDropdowns, { enableAccountOptions: false, enableAccountsSelector: true, diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 1e869251a..be9245c0e 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -101,6 +101,8 @@ class AccountDropdowns extends Component { h('span.account-dropdown-balance', { style: { fontSize: '14px', + fontFamily: 'Avenir', + fontWeight: 500, }, }, formattedBalance), ]), @@ -177,7 +179,13 @@ class AccountDropdowns extends Component { }, ), h('span', { - style: { marginLeft: '20px', fontSize: '18px' }, + style: { + marginLeft: '20px', + fontSize: '18px', + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '23px', + }, onClick: () => { actions.showNewAccountModal() }, @@ -209,6 +217,9 @@ class AccountDropdowns extends Component { marginLeft: '20px', fontSize: '18px', marginBottom: '5px', + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '23px', }, }, 'Import Account'), ] @@ -251,7 +262,10 @@ class AccountDropdowns extends Component { this.props.actions.showAccountDetailModal() }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -267,7 +281,10 @@ class AccountDropdowns extends Component { global.platform.openWindow({ url }) }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -283,7 +300,10 @@ class AccountDropdowns extends Component { copyToClipboard(checkSumAddress) }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -297,7 +317,10 @@ class AccountDropdowns extends Component { actions.requestAccountExport() }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -311,7 +334,10 @@ class AccountDropdowns extends Component { actions.showAddTokenPage() }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 0c002b2f0..3f4ea6274 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -22,8 +22,7 @@ function mapDispatchToProps (dispatch) { setProviderType: (type) => { dispatch(actions.setProviderType(type)) }, - setDefaultRpcTarget: () => { - // TODO: type is not defined. Is it needed? + setDefaultRpcTarget: type => { dispatch(actions.setDefaultRpcTarget(type)) }, setRpcTarget: (target) => { @@ -51,6 +50,11 @@ NetworkDropdown.prototype.render = function () { const { provider: { type: providerType, rpcTarget: activeNetwork } } = props const rpcList = props.frequentRpcList const isOpen = this.props.networkDropdownOpen + const dropdownMenuItemStyle = { + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '20px', + }; return h(Dropdown, { useCssTransition: true, @@ -73,9 +77,10 @@ NetworkDropdown.prototype.render = function () { position: 'absolute', right: '2px', top: '38px', + minWidth: '309px', }, innerStyle: { - padding: '2px 16px 2px 0px', + padding: '10px 8px', }, }, [ @@ -85,14 +90,16 @@ NetworkDropdown.prototype.render = function () { key: 'main', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('mainnet'), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.diamond'), - 'Main Ethereum Network', - providerType === 'mainnet' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b' + }, + }, 'Main Ethereum Network'), ] ), @@ -102,14 +109,16 @@ NetworkDropdown.prototype.render = function () { key: 'ropsten', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('ropsten'), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.red-dot'), - 'Ropsten Test Network', - providerType === 'ropsten' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b' + }, + }, 'Ropsten Test Network'), ] ), @@ -119,14 +128,16 @@ NetworkDropdown.prototype.render = function () { key: 'kovan', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('kovan'), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.hollow-diamond'), - 'Kovan Test Network', - providerType === 'kovan' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b' + }, + }, 'Kovan Test Network'), ] ), @@ -136,14 +147,22 @@ NetworkDropdown.prototype.render = function () { key: 'rinkeby', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('rinkeby'), +<<<<<<< HEAD style: { fontSize: '18px', }, +======= + style: dropdownMenuItemStyle, +>>>>>>> Fix menu style }, [ + providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.golden-square'), - 'Rinkeby Test Network', - providerType === 'rinkeby' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b' + }, + }, 'Rinkeby Test Network'), ] ), @@ -153,14 +172,16 @@ NetworkDropdown.prototype.render = function () { key: 'default', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setDefaultRpcTarget(), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Localhost 8545', - activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b' + }, + }, 'Localhost 8545'), ] ), @@ -172,14 +193,16 @@ NetworkDropdown.prototype.render = function () { { closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => this.props.showConfigPage(), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Custom RPC', - activeNetwork === 'custom' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b' + }, + }, 'Custom RPC'), ] ), -- cgit From 9213789c44beaf4bf734bc6192dc646d706d5c44 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 4 Sep 2017 14:50:12 -0700 Subject: Fix merge conflict --- ui/app/components/dropdowns/network-dropdown.js | 6 ------ 1 file changed, 6 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 3f4ea6274..23af3f7e4 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -147,13 +147,7 @@ NetworkDropdown.prototype.render = function () { key: 'rinkeby', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('rinkeby'), -<<<<<<< HEAD - style: { - fontSize: '18px', - }, -======= style: dropdownMenuItemStyle, ->>>>>>> Fix menu style }, [ providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), -- cgit From 75c3009f839f94a19830673673f4b9ac25342633 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 4 Sep 2017 15:55:14 -0700 Subject: Fix header style; Address comments --- .../dropdowns/account-selection-dropdown.js | 2 +- .../dropdowns/components/account-dropdowns.js | 31 +++++++--------------- ui/app/components/dropdowns/components/dropdown.js | 11 +++++++- ui/app/components/dropdowns/network-dropdown.js | 28 +++++++++---------- 4 files changed, 34 insertions(+), 38 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js index b1f4d68ce..7a8502d18 100644 --- a/ui/app/components/dropdowns/account-selection-dropdown.js +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown // TODO: selectedAddress is not defined... should we use selected? AccountSelectionDropdown.prototype.render = function () { const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props - console.log({style}) + return h(AccountDropdowns, { enableAccountOptions: false, enableAccountsSelector: true, diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index be9245c0e..1961a61b5 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -181,7 +181,6 @@ class AccountDropdowns extends Component { h('span', { style: { marginLeft: '20px', - fontSize: '18px', fontFamily: 'DIN OT', fontSize: '16px', lineHeight: '23px', @@ -215,7 +214,6 @@ class AccountDropdowns extends Component { h('span', { style: { marginLeft: '20px', - fontSize: '18px', marginBottom: '5px', fontFamily: 'DIN OT', fontSize: '16px', @@ -231,6 +229,10 @@ class AccountDropdowns extends Component { renderAccountOptions () { const { actions, dropdownWrapperStyle, useCssTransition } = this.props const { optionsMenuActive, menuItemStyles } = this.state + const dropdownMenuItemStyle = { + fontFamily: 'DIN OT', + fontSize: 16, + } return h( Dropdown, @@ -262,10 +264,7 @@ class AccountDropdowns extends Component { this.props.actions.showAccountDetailModal() }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -281,10 +280,7 @@ class AccountDropdowns extends Component { global.platform.openWindow({ url }) }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -300,10 +296,7 @@ class AccountDropdowns extends Component { copyToClipboard(checkSumAddress) }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -317,10 +310,7 @@ class AccountDropdowns extends Component { actions.requestAccountExport() }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -334,10 +324,7 @@ class AccountDropdowns extends Component { actions.showAddTokenPage() }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index 1f35f0c70..c4b2c2550 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -8,7 +8,15 @@ const noop = () => {} class Dropdown extends Component { render () { - const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props + const { + containerClassName, + isOpen, + onClickOutside, + style, + innerStyle, + children, + useCssTransition, + } = this.props const innerStyleDefaults = extend({ borderRadius: '4px', @@ -20,6 +28,7 @@ class Dropdown extends Component { return h( MenuDroppo, { + containerClassName, useCssTransition, isOpen, zIndex: 30, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 23af3f7e4..fa0bb899e 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -54,7 +54,7 @@ NetworkDropdown.prototype.render = function () { fontFamily: 'DIN OT', fontSize: '16px', lineHeight: '20px', - }; + } return h(Dropdown, { useCssTransition: true, @@ -72,10 +72,10 @@ NetworkDropdown.prototype.render = function () { this.props.hideNetworkDropdown() } }, + containerClassName: 'network-droppo', zIndex: 11, style: { position: 'absolute', - right: '2px', top: '38px', minWidth: '309px', }, @@ -95,9 +95,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.diamond'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b' + color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', }, }, 'Main Ethereum Network'), ] @@ -114,9 +114,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.red-dot'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b' + color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', }, }, 'Ropsten Test Network'), ] @@ -133,9 +133,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.hollow-diamond'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b' + color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', }, }, 'Kovan Test Network'), ] @@ -152,9 +152,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.golden-square'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b' + color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', }, }, 'Rinkeby Test Network'), ] @@ -171,9 +171,9 @@ NetworkDropdown.prototype.render = function () { [ activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b' + color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', }, }, 'Localhost 8545'), ] @@ -192,9 +192,9 @@ NetworkDropdown.prototype.render = function () { [ activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b' + color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', }, }, 'Custom RPC'), ] -- cgit From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 00:45:06 -0700 Subject: Style send token screen --- ui/app/components/dropdowns/components/account-dropdowns.js | 11 ++++------- ui/app/components/dropdowns/components/dropdown.js | 6 +++++- 2 files changed, 9 insertions(+), 8 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 1961a61b5..48354ff94 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -232,6 +232,8 @@ class AccountDropdowns extends Component { const dropdownMenuItemStyle = { fontFamily: 'DIN OT', fontSize: 16, + lineHeight: '24px', + padding: '8px', } return h( @@ -347,15 +349,9 @@ class AccountDropdowns extends Component { [ 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', + cursor: 'pointer', }, onClick: (event) => { event.stopPropagation() @@ -372,6 +368,7 @@ class AccountDropdowns extends Component { { style: { fontSize: '135%', + cursor: 'pointer', }, onClick: (event) => { event.stopPropagation() diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index c4b2c2550..991c89cb8 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -40,7 +40,11 @@ class Dropdown extends Component { h( 'style', ` - li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } + li.dropdown-menu-item:hover { + color:rgb(225, 225, 225); + background-color: rgba(255, 255, 255, 0.05); + border-radius: 4px; + } li.dropdown-menu-item { color: rgb(185, 185, 185); } ` ), -- cgit From 6a3c59e409cf4467ca2c59a0303f2df85ffde73f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 20:07:48 -0230 Subject: Highlighted circle icons for the network menu. --- .../dropdowns/components/network-dropdown-icon.js | 32 ++++++++++++++++++++ ui/app/components/dropdowns/network-dropdown.js | 35 ++++++++++++++++++---- 2 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 ui/app/components/dropdowns/components/network-dropdown-icon.js (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js new file mode 100644 index 000000000..01cb95215 --- /dev/null +++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js @@ -0,0 +1,32 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') + + +inherits(NetworkDropdownIcon, Component) +module.exports = NetworkDropdownIcon + +function NetworkDropdownIcon () { + Component.call(this) +} + +NetworkDropdownIcon.prototype.render = function () { + const { + backgroundColor, + isSelected, + innerBorder, + nonSelectBackgroundColor + } = this.props + + return h('.menu-icon-circle-select', { + style: { + border: isSelected && '1px solid white', + background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none', + }, + }, h('.menu-icon-circle', { + style: { + background: isSelected ? backgroundColor : nonSelectBackgroundColor, + border: innerBorder ? innerBorder : 'none', + }, + })) +} diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index fa0bb899e..f1c6f8221 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const actions = require('../../actions') const Dropdown = require('./components/dropdown').Dropdown const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem +const NetworkDropdownIcon = require('./components/network-dropdown-icon') function mapStateToProps (state) { return { @@ -94,7 +95,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.diamond'), + h(NetworkDropdownIcon, { + backgroundColor: '#038789', // $blue-lagoon + nonSelectBackgroundColor: '#15afb2', + isSelected: providerType === 'mainnet', + }), h('span.network-name-item', { style: { color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', @@ -113,7 +118,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.red-dot'), + h(NetworkDropdownIcon, { + backgroundColor: '#e91550', // $crimson + nonSelectBackgroundColor: '#ec2c50', + isSelected: providerType === 'ropsten', + }), h('span.network-name-item', { style: { color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', @@ -132,7 +141,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.hollow-diamond'), + h(NetworkDropdownIcon, { + backgroundColor: '#690496', // $purple + nonSelectBackgroundColor: '#b039f3', + isSelected: providerType === 'kovan', + }), h('span.network-name-item', { style: { color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', @@ -151,7 +164,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.golden-square'), + h(NetworkDropdownIcon, { + backgroundColor: '#ebb33f', // $tulip-tree + nonSelectBackgroundColor: '#ecb23e', + isSelected: providerType === 'rinkeby', + }), h('span.network-name-item', { style: { color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', @@ -170,7 +187,10 @@ NetworkDropdown.prototype.render = function () { }, [ activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('i.fa.fa-question-circle.fa-lg.menu-icon'), + h(NetworkDropdownIcon, { + isSelected: activeNetwork === 'http://localhost:8545', + innerBorder: '1px solid #9b9b9b', + }), h('span.network-name-item', { style: { color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', @@ -191,7 +211,10 @@ NetworkDropdown.prototype.render = function () { }, [ activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'), - h('i.fa.fa-question-circle.fa-lg.menu-icon'), + h(NetworkDropdownIcon, { + isSelected: activeNetwork === 'custom', + innerBorder: '1px solid #9b9b9b', + }), h('span.network-name-item', { style: { color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', -- cgit From 99047e3ef4650ee982d6c7ed606cdaacd4965d64 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 20:26:54 -0230 Subject: Adds title, divider and descriptive text to network dropdown. --- ui/app/components/dropdowns/network-dropdown.js | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index f1c6f8221..f79c8b29a 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -85,6 +85,17 @@ NetworkDropdown.prototype.render = function () { }, }, [ + h('div.network-dropdown-header', {}, [ + h('div.network-dropdown-title', {}, 'Networks'), + + h('div.network-dropdown-divider'), + + h('div.network-dropdown-content', + {}, + 'The default network for Ether transactions is Main Net.' + ), + ]), + h( DropdownMenuItem, { -- cgit From 6beb1b33bb20a5bb2bf38b030a5838cf9edff413 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 20:27:29 -0230 Subject: Replace checkmark with font-awesome equivalent. --- ui/app/components/dropdowns/network-dropdown.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index f79c8b29a..1b6bd2385 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -105,7 +105,7 @@ NetworkDropdown.prototype.render = function () { style: dropdownMenuItemStyle, }, [ - providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), + providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#038789', // $blue-lagoon nonSelectBackgroundColor: '#15afb2', @@ -128,7 +128,7 @@ NetworkDropdown.prototype.render = function () { style: dropdownMenuItemStyle, }, [ - providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), + providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#e91550', // $crimson nonSelectBackgroundColor: '#ec2c50', @@ -151,7 +151,7 @@ NetworkDropdown.prototype.render = function () { style: dropdownMenuItemStyle, }, [ - providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), + providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#690496', // $purple nonSelectBackgroundColor: '#b039f3', @@ -174,7 +174,7 @@ NetworkDropdown.prototype.render = function () { style: dropdownMenuItemStyle, }, [ - providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), + providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#ebb33f', // $tulip-tree nonSelectBackgroundColor: '#ecb23e', @@ -197,7 +197,7 @@ NetworkDropdown.prototype.render = function () { style: dropdownMenuItemStyle, }, [ - activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), + activeNetwork === 'http://localhost:8545' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { isSelected: activeNetwork === 'http://localhost:8545', innerBorder: '1px solid #9b9b9b', @@ -221,7 +221,7 @@ NetworkDropdown.prototype.render = function () { style: dropdownMenuItemStyle, }, [ - activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'), + activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { isSelected: activeNetwork === 'custom', innerBorder: '1px solid #9b9b9b', -- cgit From 8342c20b58a0b90806a592992b6212ee6fa6f0ad Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 7 Sep 2017 21:17:07 -0230 Subject: Cleaner css for circle icon. --- .../dropdowns/components/network-dropdown-icon.js | 22 +++++++++------------- ui/app/components/dropdowns/network-dropdown.js | 4 ---- 2 files changed, 9 insertions(+), 17 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js index 01cb95215..7e94e0af5 100644 --- a/ui/app/components/dropdowns/components/network-dropdown-icon.js +++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js @@ -14,19 +14,15 @@ NetworkDropdownIcon.prototype.render = function () { const { backgroundColor, isSelected, - innerBorder, - nonSelectBackgroundColor + innerBorder = 'none', } = this.props - return h('.menu-icon-circle-select', { - style: { - border: isSelected && '1px solid white', - background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none', - }, - }, h('.menu-icon-circle', { - style: { - background: isSelected ? backgroundColor : nonSelectBackgroundColor, - border: innerBorder ? innerBorder : 'none', - }, - })) + return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {}, + h('div', { + style: { + background: backgroundColor, + border: innerBorder, + }, + }) + ) } diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 1b6bd2385..4c578fbeb 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -108,7 +108,6 @@ NetworkDropdown.prototype.render = function () { providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#038789', // $blue-lagoon - nonSelectBackgroundColor: '#15afb2', isSelected: providerType === 'mainnet', }), h('span.network-name-item', { @@ -131,7 +130,6 @@ NetworkDropdown.prototype.render = function () { providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#e91550', // $crimson - nonSelectBackgroundColor: '#ec2c50', isSelected: providerType === 'ropsten', }), h('span.network-name-item', { @@ -154,7 +152,6 @@ NetworkDropdown.prototype.render = function () { providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#690496', // $purple - nonSelectBackgroundColor: '#b039f3', isSelected: providerType === 'kovan', }), h('span.network-name-item', { @@ -177,7 +174,6 @@ NetworkDropdown.prototype.render = function () { providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#ebb33f', // $tulip-tree - nonSelectBackgroundColor: '#ecb23e', isSelected: providerType === 'rinkeby', }), h('span.network-name-item', { -- cgit From b0f1fba2e5fbde573b46a284285985e63f1a3618 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 15 Sep 2017 12:39:34 -0230 Subject: Ensures that new accounts are only created from the modal, and not when clicking 'Create New Account' --- ui/app/components/dropdowns/components/account-dropdowns.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 48354ff94..bb112dcca 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -162,11 +162,11 @@ class AccountDropdowns extends Component { DropdownMenuItem, { closeMenu: () => {}, - onClick: () => actions.addNewAccount(), style: Object.assign( {}, menuItemStyles, ), + onClick: () => actions.showNewAccountModal(), }, [ h( @@ -185,9 +185,6 @@ class AccountDropdowns extends Component { fontSize: '16px', lineHeight: '23px', }, - onClick: () => { - actions.showNewAccountModal() - }, }, 'Create Account'), ], ), -- cgit From 162a3827c7ba418ce8180d81c54ad09d9b9560b8 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 18 Sep 2017 11:34:07 -0700 Subject: Fix Merge Problems; update yarn lock --- ui/app/components/dropdowns/components/account-dropdowns.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index fe80af8b3..e2d3d6d64 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -453,5 +453,11 @@ const mapDispatchToProps = (dispatch) => { } } -module.exports = connect(null, mapDispatchToProps)(AccountDropdowns) +function mapStateToProps (state) { + return { + keyrings: state.metamask.keyrings, + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns) -- cgit From 0eeba3771c2396c12de3f254dbfaae957344411d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 05:35:27 -0230 Subject: Exports private key modal opens from dropdown. --- ui/app/components/dropdowns/components/account-dropdowns.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index e2d3d6d64..76f186a3f 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -337,9 +337,7 @@ class AccountDropdowns extends Component { DropdownMenuItem, { closeMenu: () => {}, - onClick: () => { - actions.requestAccountExport() - }, + onClick: () => this.props.actions.showExportPrivateKeyModal(), style: Object.assign( dropdownMenuItemStyle, menuItemStyles, @@ -429,7 +427,6 @@ const mapDispatchToProps = (dispatch) => { return { actions: { showConfigPage: () => dispatch(actions.showConfigPage()), - requestAccountExport: () => dispatch(actions.requestExportAccount()), showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), showAccountDetailModal: () => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) @@ -443,6 +440,9 @@ const mapDispatchToProps = (dispatch) => { showNewAccountModal: () => { dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) }, + showExportPrivateKeyModal: () => { + dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) + }, showAddTokenPage: () => { dispatch(actions.showAddTokenPage()) }, -- cgit From c2ccd6e90ed15245ed4e9e2965f2f5c9f293f115 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 27 Sep 2017 21:45:27 -0230 Subject: Makes styling fixes to account dropdown. --- .../dropdowns/components/account-dropdowns.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 76f186a3f..3e31412c6 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -51,6 +51,7 @@ class AccountDropdowns extends Component { { marginTop: index === 0 ? '5px' : '', fontSize: '24px', + width: '260px', }, menuItemStyles, ), @@ -92,6 +93,7 @@ class AccountDropdowns extends Component { alignItems: 'flex-start', justifyContent: 'center', marginLeft: '10px', + position: 'relative', }, }, [ this.indicateIfLoose(keyring), @@ -104,7 +106,6 @@ class AccountDropdowns extends Component { textOverflow: 'ellipsis', }, }, identity.name || ''), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), h('span.account-dropdown-balance', { style: { @@ -202,17 +203,19 @@ class AccountDropdowns extends Component { }, [ h( - Identicon, + 'div', { style: { - marginLeft: '10px', + marginLeft: '8px', + fontFamily: 'Montserrat UltraLight', + fontSize: '30px', }, - diameter: 32, }, + '+' ), h('span', { style: { - marginLeft: '20px', + marginLeft: '14px', fontFamily: 'DIN OT', fontSize: '16px', lineHeight: '23px', @@ -232,13 +235,13 @@ class AccountDropdowns extends Component { }, [ h( - Identicon, + 'div', { style: { marginLeft: '10px', }, - diameter: 32, }, + String.fromCharCode(10515) ), h('span', { style: { -- cgit From deee689426f0b6236093128b47be81faf56d6b75 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 27 Sep 2017 22:26:44 -0230 Subject: Use font-awesome icons for create and import account. --- .../components/dropdowns/components/account-dropdowns.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 3e31412c6..d53d2a81b 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -203,15 +203,12 @@ class AccountDropdowns extends Component { }, [ h( - 'div', + 'i.fa.fa-plus.fa-lg', { style: { marginLeft: '8px', - fontFamily: 'Montserrat UltraLight', - fontSize: '30px', }, - }, - '+' + } ), h('span', { style: { @@ -235,13 +232,12 @@ class AccountDropdowns extends Component { }, [ h( - 'div', + 'i.fa.fa-download.fa-lg', { style: { - marginLeft: '10px', + marginLeft: '8px', }, - }, - String.fromCharCode(10515) + } ), h('span', { style: { -- cgit From a4838b1c575f08f9a83457222737075bab374936 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 27 Sep 2017 22:11:46 -0230 Subject: Close mobile sidebar when selecting 'Add token' from account options dropdown. --- ui/app/components/dropdowns/components/account-dropdowns.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index d53d2a81b..fc60c6005 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -349,6 +349,7 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => { + actions.hideSidebar() actions.showAddTokenPage() }, style: Object.assign( @@ -425,6 +426,7 @@ AccountDropdowns.propTypes = { const mapDispatchToProps = (dispatch) => { return { actions: { + hideSidebar: () => dispatch(actions.hideSidebar()), showConfigPage: () => dispatch(actions.showConfigPage()), showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), showAccountDetailModal: () => { -- cgit From 47ebcbb2ed09a4cd4b062c5fa4cb6d259369149f Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 07:40:50 -0230 Subject: Token menu ui. --- ui/app/components/dropdowns/token-menu-dropdown.js | 38 ++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 ui/app/components/dropdowns/token-menu-dropdown.js (limited to 'ui/app/components/dropdowns') 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') + + ]), + ]), + ]) +} + -- cgit From d206f183f5a07787535acd196c506145f00a199e Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 16:33:29 -0230 Subject: Hide token confirmation modal ui --- ui/app/components/dropdowns/token-menu-dropdown.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index b948534c2..0f4bc2b87 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -1,8 +1,19 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') + +module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown) + +function mapDispatchToProps (dispatch) { + return { + showHideTokenConfirmationModal: (token) => { + dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token })) + } + } +} -module.exports = TokenMenuDropdown inherits(TokenMenuDropdown, Component) function TokenMenuDropdown () { @@ -17,6 +28,8 @@ TokenMenuDropdown.prototype.onClose = function (e) { } TokenMenuDropdown.prototype.render = function () { + const { showHideTokenConfirmationModal } = this.props + return h('div.token-menu-dropdown', {}, [ h('div.token-menu-dropdown__close-area', { onClick: this.onClose, @@ -27,7 +40,7 @@ TokenMenuDropdown.prototype.render = function () { h('div.token-menu-dropdown__option', { onClick: (e) => { e.stopPropagation() - console.log('div.token-menu-dropdown__option!') + showHideTokenConfirmationModal(this.props.token) }, }, 'Hide Token') @@ -35,4 +48,3 @@ TokenMenuDropdown.prototype.render = function () { ]), ]) } - -- cgit From ac4868170f4c61d13291389d01bf1002fe240ed4 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 3 Oct 2017 14:55:52 -0230 Subject: Enables remove token and ensures add/remove update the list without need for refresh. --- ui/app/components/dropdowns/token-menu-dropdown.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index 0f4bc2b87..7234a9b21 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -41,6 +41,7 @@ TokenMenuDropdown.prototype.render = function () { onClick: (e) => { e.stopPropagation() showHideTokenConfirmationModal(this.props.token) + this.props.onClose() }, }, 'Hide Token') -- cgit From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 12 Oct 2017 18:46:09 -0400 Subject: Various styling fixes --- ui/app/components/dropdowns/network-dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 4c578fbeb..567bf07a0 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -102,7 +102,7 @@ NetworkDropdown.prototype.render = function () { key: 'main', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('mainnet'), - style: dropdownMenuItemStyle, + style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, }, [ providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), -- cgit From 81f62a7443d47461b5f9b20f442392562458c79a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 13 Oct 2017 02:10:58 -0400 Subject: Adding Account Dropdown V2 --- ui/app/components/dropdowns/components/menu.js | 44 ++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 ui/app/components/dropdowns/components/menu.js (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js new file mode 100644 index 000000000..0cbe0f342 --- /dev/null +++ b/ui/app/components/dropdowns/components/menu.js @@ -0,0 +1,44 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') + +inherits(Menu, Component) +function Menu () { Component.call(this) } + +Menu.prototype.render = function () { + const { className = '', children, isShowing } = this.props + return isShowing + ? h('div', { className: `menu ${className}` }, children) + : h('noscript') +} + +inherits(Item, Component) +function Item () { Component.call(this) } + +Item.prototype.render = function () { + const { + icon, + children, + text, + className = '', + onClick, + } = this.props + const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}` + const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null + const textComponent = text ? h('div.menu__item__text', text) : null + + return children + ? h('div', { className: itemClassName }, children) + : h('div.menu__item', { className: itemClassName }, [ iconComponent, textComponent ] + .filter(d => Boolean(d)) + ) +} + +inherits(Divider, Component) +function Divider () { Component.call(this) } + +Divider.prototype.render = function () { + return h('div.menu__divider') +} + +module.exports = { Menu, Item, Divider } -- cgit From a84014eff8e008fff6db5ebba7323bb52a2d2d9f Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 13 Oct 2017 16:25:33 -0400 Subject: Fix Localhost 8545 option in network dropdown (#2357) --- ui/app/components/dropdowns/network-dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 567bf07a0..c64e7a1d1 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -189,7 +189,7 @@ NetworkDropdown.prototype.render = function () { { key: 'default', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setDefaultRpcTarget(), + onClick: () => props.setRpcTarget('http://localhost:8545'), style: dropdownMenuItemStyle, }, [ -- cgit From 7caa9142235cc0eca20d638a066d666d8cfaabee Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 16 Oct 2017 01:27:51 -0400 Subject: Fix Import Account link not hiding sidebar --- ui/app/components/dropdowns/components/account-dropdowns.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index fc60c6005..e2eed1e4b 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -164,7 +164,7 @@ class AccountDropdowns extends Component { } renderAccountSelector () { - const { actions, useCssTransition, innerStyle } = this.props + const { actions, useCssTransition, innerStyle, sidebarOpen } = this.props const { accountSelectorActive, menuItemStyles } = this.state return h( @@ -223,7 +223,11 @@ class AccountDropdowns extends Component { h( DropdownMenuItem, { - closeMenu: () => {}, + closeMenu: () => { + if (sidebarOpen) { + actions.hideSidebar() + } + }, onClick: () => actions.showImportPage(), style: Object.assign( {}, @@ -457,6 +461,7 @@ const mapDispatchToProps = (dispatch) => { function mapStateToProps (state) { return { keyrings: state.metamask.keyrings, + sidebarOpen: state.appState.sidebarOpen, } } -- cgit From 5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 16 Oct 2017 01:28:25 -0400 Subject: wip --- ui/app/components/dropdowns/components/menu.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js index 0cbe0f342..323103f0b 100644 --- a/ui/app/components/dropdowns/components/menu.js +++ b/ui/app/components/dropdowns/components/menu.js @@ -41,4 +41,11 @@ Divider.prototype.render = function () { return h('div.menu__divider') } -module.exports = { Menu, Item, Divider } +inherits(CloseArea, Component) +function CloseArea () { Component.call(this) } + +CloseArea.prototype.render = function () { + return h('div.menu__close-area', { onClick: this.props.onClick }) +} + +module.exports = { Menu, Item, Divider, CloseArea } -- cgit From 085551b7e6b7dab21c21b99a40c4f79c413799d5 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 17 Oct 2017 22:36:53 -0700 Subject: New Account modal --- ui/app/components/dropdowns/components/menu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js index 323103f0b..f6d8a139e 100644 --- a/ui/app/components/dropdowns/components/menu.js +++ b/ui/app/components/dropdowns/components/menu.js @@ -28,8 +28,8 @@ Item.prototype.render = function () { const textComponent = text ? h('div.menu__item__text', text) : null return children - ? h('div', { className: itemClassName }, children) - : h('div.menu__item', { className: itemClassName }, [ iconComponent, textComponent ] + ? h('div', { className: itemClassName, onClick }, children) + : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ] .filter(d => Boolean(d)) ) } -- cgit From 03685c64b8e45d893c86478869200933de043da8 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 17 Oct 2017 22:42:56 -0700 Subject: Network dropdown update --- ui/app/components/dropdowns/network-dropdown.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index c64e7a1d1..736019c39 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -55,6 +55,7 @@ NetworkDropdown.prototype.render = function () { fontFamily: 'DIN OT', fontSize: '16px', lineHeight: '20px', + padding: '12px 0', } return h(Dropdown, { @@ -81,7 +82,7 @@ NetworkDropdown.prototype.render = function () { minWidth: '309px', }, innerStyle: { - padding: '10px 8px', + padding: '18px 8px', }, }, [ -- cgit From 79be956be9f5297d6d601941e50d5ae4eca58560 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 19 Oct 2017 14:10:29 -0700 Subject: Fix network dropdown styles --- ui/app/components/dropdowns/network-dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 736019c39..20dfca590 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -78,7 +78,7 @@ NetworkDropdown.prototype.render = function () { zIndex: 11, style: { position: 'absolute', - top: '38px', + top: '58px', minWidth: '309px', }, innerStyle: { -- cgit From 2c032e0df44a2d589aae62d3fc532df82441580b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 22 Oct 2017 22:40:03 -0700 Subject: Update settings screen to new UI --- ui/app/components/dropdowns/simple-dropdown.js | 91 ++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 ui/app/components/dropdowns/simple-dropdown.js (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js new file mode 100644 index 000000000..8cea78518 --- /dev/null +++ b/ui/app/components/dropdowns/simple-dropdown.js @@ -0,0 +1,91 @@ +const { Component, PropTypes } = require('react') +const h = require('react-hyperscript') +const classnames = require('classnames') +const R = require('ramda') + +class SimpleDropdown extends Component { + constructor (props) { + super(props) + this.state = { + isOpen: false, + } + } + + getDisplayValue () { + const { selectedOption, options } = this.props + const matchesOption = option => option.value === selectedOption + const matchingOption = R.find(matchesOption)(options) + return matchingOption + ? matchingOption.displayValue || matchingOption.value + : selectedOption + } + + handleClose () { + this.setState({ isOpen: false }) + } + + toggleOpen () { + const { isOpen } = this.state + this.setState({ isOpen: !isOpen }) + } + + renderOptions () { + const { options, onSelect, selectedOption } = this.props + + return h('div', [ + h('div.simple-dropdown__close-area', { + onClick: event => { + event.stopPropagation() + this.handleClose() + }, + }), + h('div.simple-dropdown__options', [ + ...options.map(option => { + return h( + 'div.simple-dropdown__option', + { + className: classnames({ + 'simple-dropdown__option--selected': option.value === selectedOption, + }), + key: option.value, + onClick: () => { + if (option.value !== selectedOption) { + onSelect(option.value) + } + + this.handleClose() + }, + }, + option.displayValue || option.value, + ) + }), + ]), + ]) + } + + render () { + const { placeholder } = this.props + const { isOpen } = this.state + + return h( + 'div.simple-dropdown', + { + onClick: () => this.toggleOpen(), + }, + [ + h('div.simple-dropdown__selected', this.getDisplayValue() || placeholder || 'Select'), + h('i.fa.fa-caret-down.fa-lg.simple-dropdown__caret'), + isOpen && this.renderOptions(), + ] + ) + } +} + +SimpleDropdown.propTypes = { + options: PropTypes.array.isRequired, + placeholder: PropTypes.string, + onSelect: PropTypes.func, + selectedOption: PropTypes.string, +} + +module.exports = SimpleDropdown -- cgit From 78836b0ead0e1b2307a48868c109a5412effc78b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 13:31:58 -0230 Subject: Signature Request --- .../components/dropdowns/account-dropdown-mini.js | 78 ++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 ui/app/components/dropdowns/account-dropdown-mini.js (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js new file mode 100644 index 000000000..96057d2b4 --- /dev/null +++ b/ui/app/components/dropdowns/account-dropdown-mini.js @@ -0,0 +1,78 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('../identicon') +const AccountListItem = require('../send/account-list-item') + +module.exports = AccountDropdownMini + +inherits(AccountDropdownMini, Component) +function AccountDropdownMini () { + Component.call(this) +} + +AccountDropdownMini.prototype.getListItemIcon = function (currentAccount, selectedAccount) { + const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } }) + + return currentAccount.address === selectedAccount.address + ? listItemIcon + : null +} + +AccountDropdownMini.prototype.renderDropdown = function () { + const { + accounts, + selectedAccount, + closeDropdown, + onSelect, + } = this.props + + return h('div', {}, [ + + h('div.account-dropdown-mini__close-area', { + onClick: closeDropdown, + }), + + h('div.account-dropdown-mini__list', {}, [ + + ...accounts.map(account => h(AccountListItem, { + account, + displayBalance: false, + displayAddress: false, + handleClick: () => { + onSelect(account) + closeDropdown() + }, + icon: this.getListItemIcon(account, selectedAccount), + })) + + ]), + + ]) +} + +AccountDropdownMini.prototype.render = function () { + const { + accounts, + selectedAccount, + openDropdown, + closeDropdown, + dropdownOpen, + } = this.props + + return h('div.account-dropdown-mini', {}, [ + + h(AccountListItem, { + account: selectedAccount, + handleClick: openDropdown, + displayBalance: false, + displayAddress: false, + icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }) + }), + + dropdownOpen && this.renderDropdown(), + + ]) + +} + -- cgit From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/components/dropdowns/account-dropdown-mini.js | 3 --- ui/app/components/dropdowns/account-options-dropdown.js | 2 +- ui/app/components/dropdowns/account-selection-dropdown.js | 2 +- .../components/dropdowns/components/account-dropdowns.js | 15 +++++++++++++++ ui/app/components/dropdowns/components/dropdown.js | 1 + ui/app/components/dropdowns/simple-dropdown.js | 3 ++- 6 files changed, 20 insertions(+), 6 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js index 96057d2b4..f403c56b9 100644 --- a/ui/app/components/dropdowns/account-dropdown-mini.js +++ b/ui/app/components/dropdowns/account-dropdown-mini.js @@ -1,7 +1,6 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const Identicon = require('../identicon') const AccountListItem = require('../send/account-list-item') module.exports = AccountDropdownMini @@ -53,10 +52,8 @@ AccountDropdownMini.prototype.renderDropdown = function () { AccountDropdownMini.prototype.render = function () { const { - accounts, selectedAccount, openDropdown, - closeDropdown, dropdownOpen, } = this.props diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js index 50e793d87..f74c0a2d4 100644 --- a/ui/app/components/dropdowns/account-options-dropdown.js +++ b/ui/app/components/dropdowns/account-options-dropdown.js @@ -19,7 +19,7 @@ AccountOptionsDropdown.prototype.render = function () { return h(AccountDropdowns, { enableAccountOptions: true, enableAccountsSelector: false, - selected: selectedAddress, + selected, network, identities, style: style || {}, diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js index 7a8502d18..2f6452b15 100644 --- a/ui/app/components/dropdowns/account-selection-dropdown.js +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -19,7 +19,7 @@ AccountSelectionDropdown.prototype.render = function () { return h(AccountDropdowns, { enableAccountOptions: false, enableAccountsSelector: true, - selected: selectedAddress, + selected, network, identities, style: style || {}, diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index e2eed1e4b..58326b13c 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -425,6 +425,21 @@ AccountDropdowns.propTypes = { identities: PropTypes.objectOf(PropTypes.object), selected: PropTypes.string, keyrings: PropTypes.array, + accounts: PropTypes.object, + menuItemStyles: PropTypes.object, + actions: PropTypes.object, + // actions.showAccountDetail: , + useCssTransition: PropTypes.bool, + innerStyle: PropTypes.object, + sidebarOpen: PropTypes.bool, + dropdownWrapperStyle: PropTypes.string, + // actions.showAccountDetailModal: , + network: PropTypes.number, + // actions.showExportPrivateKeyModal: , + style: PropTypes.object, + enableAccountsSelector: PropTypes.bool, + enableAccountOption: PropTypes.bool, + enableAccountOptions: PropTypes.bool, } const mapDispatchToProps = (dispatch) => { diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index ca68e55f7..ddcb7998f 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -68,6 +68,7 @@ Dropdown.propTypes = { onClickOutside: PropTypes.func, innerStyle: PropTypes.object, useCssTransition: PropTypes.bool, + containerClassName: PropTypes.string, } class DropdownMenuItem extends Component { diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js index 8cea78518..7bb48e57b 100644 --- a/ui/app/components/dropdowns/simple-dropdown.js +++ b/ui/app/components/dropdowns/simple-dropdown.js @@ -1,4 +1,5 @@ -const { Component, PropTypes } = require('react') +const { Component } = require('react') +const PropTypes = require('react').PropTypes const h = require('react-hyperscript') const classnames = require('classnames') const R = require('ramda') -- cgit From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/components/dropdowns/account-dropdown-mini.js | 10 +++++----- ui/app/components/dropdowns/token-menu-dropdown.js | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js index f403c56b9..a3d41af90 100644 --- a/ui/app/components/dropdowns/account-dropdown-mini.js +++ b/ui/app/components/dropdowns/account-dropdown-mini.js @@ -37,13 +37,13 @@ AccountDropdownMini.prototype.renderDropdown = function () { ...accounts.map(account => h(AccountListItem, { account, displayBalance: false, - displayAddress: false, + displayAddress: false, handleClick: () => { onSelect(account) closeDropdown() - }, + }, icon: this.getListItemIcon(account, selectedAccount), - })) + })), ]), @@ -64,12 +64,12 @@ AccountDropdownMini.prototype.render = function () { handleClick: openDropdown, displayBalance: false, displayAddress: false, - icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }) + icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }), }), dropdownOpen && this.renderDropdown(), ]) - + } diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index 7234a9b21..dc7a985e3 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -10,7 +10,7 @@ function mapDispatchToProps (dispatch) { return { showHideTokenConfirmationModal: (token) => { dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token })) - } + }, } } @@ -36,14 +36,14 @@ TokenMenuDropdown.prototype.render = function () { }), h('div.token-menu-dropdown__container', {}, [ h('div.token-menu-dropdown__options', {}, [ - + h('div.token-menu-dropdown__option', { onClick: (e) => { e.stopPropagation() showHideTokenConfirmationModal(this.props.token) this.props.onClose() }, - }, 'Hide Token') + }, 'Hide Token'), ]), ]), -- cgit From 62f2aebe1d9c3efd6ace8785fc96bb43ae08afe8 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 9 Nov 2017 13:17:10 -0330 Subject: Network loading does not block network loading. --- ui/app/components/dropdowns/components/dropdown.js | 2 +- ui/app/components/dropdowns/network-dropdown.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index ddcb7998f..15d064be8 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -31,7 +31,7 @@ class Dropdown extends Component { containerClassName, useCssTransition, isOpen, - zIndex: 30, + zIndex: 55, onClickOutside, style, innerStyle: innerStyleDefaults, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 20dfca590..0908faf01 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -75,11 +75,12 @@ NetworkDropdown.prototype.render = function () { } }, containerClassName: 'network-droppo', - zIndex: 11, + zIndex: 55, style: { position: 'absolute', top: '58px', minWidth: '309px', + zIndex: '55px', }, innerStyle: { padding: '18px 8px', -- cgit From 7dba114feb428f7f2f78fee5611377b04bff5be6 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 1 Dec 2017 14:19:53 -0800 Subject: Update font weights to 300, remove animation from network dropdown, fix network dropdown not closing from certain click-areas --- ui/app/components/dropdowns/network-dropdown.js | 27 +++++++++++++++---------- 1 file changed, 16 insertions(+), 11 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 0908faf01..dfaa6b22c 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -6,6 +6,16 @@ const actions = require('../../actions') const Dropdown = require('./components/dropdown').Dropdown const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const NetworkDropdownIcon = require('./components/network-dropdown-icon') +const R = require('ramda') + +// classes from nodes of the toggle element. +const notToggleElementClassnames = [ + 'menu-icon', + 'network-name', + 'network-indicator', + 'network-caret', + 'network-component', +] function mapStateToProps (state) { return { @@ -32,8 +42,8 @@ function mapDispatchToProps (dispatch) { showConfigPage: () => { dispatch(actions.showConfigPage()) }, - showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) }, - hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) }, + showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), + hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), } } @@ -59,18 +69,13 @@ NetworkDropdown.prototype.render = function () { } return h(Dropdown, { - useCssTransition: true, isOpen, onClickOutside: (event) => { const { classList } = event.target - const isNotToggleElement = [ - classList.contains('menu-icon'), - classList.contains('network-name'), - classList.contains('network-indicator'), - ].filter(bool => bool).length === 0 - // classes from three constituent nodes of the toggle element - - if (isNotToggleElement) { + const isInClassList = className => classList.contains(className) + const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames) + + if (notToggleElementIndex === -1) { this.props.hideNetworkDropdown() } }, -- cgit From 980e1bfcf82361185f6d1b22abd9593ba166825e Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 10 Jan 2018 14:55:38 -0330 Subject: New add account page with create and import options. --- ui/app/components/dropdowns/components/account-dropdowns.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 58326b13c..f97ac0691 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -199,7 +199,7 @@ class AccountDropdowns extends Component { {}, menuItemStyles, ), - onClick: () => actions.showNewAccountModal(), + onClick: () => actions.showNewAccountPageCreateForm(), }, [ h( @@ -228,7 +228,7 @@ class AccountDropdowns extends Component { actions.hideSidebar() } }, - onClick: () => actions.showImportPage(), + onClick: () => actions.showNewAccountPageImportForm(), style: Object.assign( {}, menuItemStyles, @@ -457,9 +457,7 @@ const mapDispatchToProps = (dispatch) => { identity, })) }, - showNewAccountModal: () => { - dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) - }, + showNewAccountPageCreateForm: () => dispatch(actions.showNewAccountPage({ form: 'CREATE' })), showExportPrivateKeyModal: () => { dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) }, @@ -467,7 +465,7 @@ const mapDispatchToProps = (dispatch) => { dispatch(actions.showAddTokenPage()) }, addNewAccount: () => dispatch(actions.addNewAccount()), - showImportPage: () => dispatch(actions.showImportPage()), + showNewAccountPageImportForm: () => dispatch(actions.showNewAccountPage({ form: 'IMPORT' })), showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), }, } -- cgit 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/dropdowns/components/account-dropdowns.js | 2 +- ui/app/components/dropdowns/components/dropdown.js | 2 +- ui/app/components/dropdowns/simple-dropdown.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/dropdowns') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index f97ac0691..d3a549884 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/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('../../../../lib/account-link.js') diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index 15d064be8..0336dbb8b 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.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 MenuDroppo = require('../../menu-droppo') const extend = require('xtend') diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js index 7bb48e57b..bba088ed1 100644 --- a/ui/app/components/dropdowns/simple-dropdown.js +++ b/ui/app/components/dropdowns/simple-dropdown.js @@ -1,5 +1,5 @@ const { Component } = require('react') -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') const h = require('react-hyperscript') const classnames = require('classnames') const R = require('ramda') -- cgit