m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Merge pull request #1841 from sdtsui/fix/dropdown-toggle

Browse Source 
[Part-1] Fix/dropdown toggle
This commit is contained in:
Kevin Serrano 2017-08-01 10:59:20 -07:00 committed by GitHub
commit 947f13d58c
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/app/app.js
View File

@ -198,7 +198,17 @@ App.prototype.renderNetworkDropdown = function () {
return h(Dropdown, {
isOpen,
onClickOutside: (event) => {
this.setState({ isNetworkMenuOpen: !isOpen })
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: {
@ -308,7 +318,11 @@ App.prototype.renderDropdown = function () {
isOpen: isOpen,
zIndex: 11,
onClickOutside: (event) => {
this.setState({ isMainMenuOpen: !isOpen })
const { classList } = event.target
const isNotToggleElement = !classList.contains('sandwich-expando')
if (isNotToggleElement) {
this.setState({ isMainMenuOpen: false })
}
},
style: {
position: 'absolute',

18
ui/app/components/account-dropdowns.js
View File

@ -17,6 +17,8 @@ class AccountDropdowns extends Component {
accountSelectorActive: false,
optionsMenuActive: false,
}
this.accountSelectorToggleClassName = 'fa-angle-down';
this.optionsMenuToggleClassName = 'fa-ellipsis-h';
}
renderAccounts () {
@ -63,7 +65,13 @@ class AccountDropdowns extends Component {
maxHeight: '300px',
},
isOpen: accountSelectorActive,
onClickOutside: () => { this.setState({ accountSelectorActive: false }) },
onClickOutside: (event) => {
const { classList } = event.target
const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
if (accountSelectorActive && isNotToggleElement) {
this.setState({ accountSelectorActive: false })
}
},
},
[
...this.renderAccounts(),
@ -115,7 +123,13 @@ class AccountDropdowns extends Component {
minWidth: '180px',
},
isOpen: optionsMenuActive,
onClickOutside: () => { this.setState({ optionsMenuActive: false }) },
onClickOutside: () => {
const { classList } = event.target
const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
if (optionsMenuActive && isNotToggleElement) {
this.setState({ optionsMenuActive: false })
}
},
},
[
h(