Skip to content
Snippets Groups Projects
Commit 2f35f07f authored by Tom Robinson's avatar Tom Robinson
Browse files

Fix dashboard menu closing when clicking outside. Resolves #3338

parent 329af5c5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/nav/components/ProfileLink.jsx
+ 44
− 44
View file @ 2f35f07f
......@@ -62,18 +62,18 @@ export default class ProfileLink extends Component {
});
return (
<OnClickOutsideWrapper handleDismissal={this.closeDropdown}>
<div className={dropDownClasses}>
<a data-metabase-event={"Navbar;Profile Dropdown;Toggle"} className="NavDropdown-button NavItem flex align-center p2 transition-background" onClick={this.toggleDropdown}>
<div className="NavDropdown-button-layer">
<div className="flex align-center">
<UserAvatar user={user} style={{backgroundColor: 'transparent'}}/>
<Icon name="chevrondown" className="Dropdown-chevron ml1" size={8} />
</div>
<div className={dropDownClasses}>
<a data-metabase-event={"Navbar;Profile Dropdown;Toggle"} className="NavDropdown-button NavItem flex align-center p2 transition-background" onClick={this.toggleDropdown}>
<div className="NavDropdown-button-layer">
<div className="flex align-center">
<UserAvatar user={user} style={{backgroundColor: 'transparent'}}/>
<Icon name="chevrondown" className="Dropdown-chevron ml1" size={8} />
</div>
</a>
</div>
</a>
{ dropdownOpen ?
{ dropdownOpen ?
<OnClickOutsideWrapper handleDismissal={this.closeDropdown}>
<div className="NavDropdown-content right">
<ul className="NavDropdown-content-layer">
<li>
......@@ -129,42 +129,42 @@ export default class ProfileLink extends Component {
</li>
</ul>
</div>
: null }
{ modalOpen === "about" ?
<Modal className="Modal Modal--small" onClose={this.closeModal}>
<div className="px4 pt4 pb2 text-centered relative">
<span className="absolute top right p4 text-normal text-grey-3 cursor-pointer" onClick={this.closeModal}>
<Icon name={'close'} size={16} />
</span>
<div className="text-brand pb2">
<LogoIcon width={48} height={48} />
</div>
<h2 style={{fontSize: "1.75em"}} className="text-dark">Thanks for using Metabase!</h2>
<div className="pt2">
<h3 className="text-dark mb1">You're on version {tag}</h3>
<p className="text-grey-3 text-bold">Built on {date}</p>
{ !/^v\d+\.\d+\.\d+$/.test(tag) &&
<div>
{ _.map(versionExtra, (value, key) =>
<p key={key} className="text-grey-3 text-bold">{capitalize(key)}: {value}</p>
) }
</div>
}
</div>
</OnClickOutsideWrapper>
: null }
{ modalOpen === "about" ?
<Modal className="Modal Modal--small" onClose={this.closeModal}>
<div className="px4 pt4 pb2 text-centered relative">
<span className="absolute top right p4 text-normal text-grey-3 cursor-pointer" onClick={this.closeModal}>
<Icon name={'close'} size={16} />
</span>
<div className="text-brand pb2">
<LogoIcon width={48} height={48} />
</div>
<div style={{borderWidth: "2px"}} className="p2 h5 text-centered text-grey-3 border-top">
<span className="block"><span className="text-bold">Metabase</span> is a Trademark of Metabase, Inc</span>
<span>and is built with care in San Francisco, CA</span>
<h2 style={{fontSize: "1.75em"}} className="text-dark">Thanks for using Metabase!</h2>
<div className="pt2">
<h3 className="text-dark mb1">You're on version {tag}</h3>
<p className="text-grey-3 text-bold">Built on {date}</p>
{ !/^v\d+\.\d+\.\d+$/.test(tag) &&
<div>
{ _.map(versionExtra, (value, key) =>
<p key={key} className="text-grey-3 text-bold">{capitalize(key)}: {value}</p>
) }
</div>
}
</div>
</Modal>
: modalOpen === "logs" ?
<Modal className="Modal Modal--wide" onClose={this.closeModal}>
<Logs onClose={this.closeModal} />
</Modal>
: null }
</div>
</OnClickOutsideWrapper>
</div>
<div style={{borderWidth: "2px"}} className="p2 h5 text-centered text-grey-3 border-top">
<span className="block"><span className="text-bold">Metabase</span> is a Trademark of Metabase, Inc</span>
<span>and is built with care in San Francisco, CA</span>
</div>
</Modal>
: modalOpen === "logs" ?
<Modal className="Modal Modal--wide" onClose={this.closeModal}>
<Logs onClose={this.closeModal} />
</Modal>
: null }
</div>
);
}
}
frontend/src/metabase/nav/containers/DashboardsDropdown.jsx
+ 9
− 10
View file @ 2f35f07f
......@@ -114,14 +114,13 @@ export default class DashboardsDropdown extends Component {
return (
<div>
{ modalOpen ? this.renderCreateDashboardModal() : null }
<div className={cx('NavDropdown inline-block cursor-pointer', { 'open': dropdownOpen })}>
<span onClick={this.toggleDropdown}>
{children}
</span>
<OnClickOutsideWrapper handleDismissal={this.closeDropdown}>
<div className={cx('NavDropdown inline-block cursor-pointer', { 'open': dropdownOpen })}>
<span onClick={this.toggleDropdown}>
{children}
</span>
{ dropdownOpen ?
{ dropdownOpen ?
<OnClickOutsideWrapper handleDismissal={this.closeDropdown}>
<div className="NavDropdown-content DashboardList NavDropdown-content--dashboards">
{ dashboards.length === 0 ?
<div className="NavDropdown-content-layer text-white text-centered">
......@@ -154,9 +153,9 @@ export default class DashboardsDropdown extends Component {
</ul>
}
</div>
: null }
</div>
</OnClickOutsideWrapper>
</OnClickOutsideWrapper>
: null }
</div>
</div>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment