From 0c869f1af15bbb1f1e29c42a84ae96821a535c5d Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kdoh@users.noreply.github.com>
Date: Thu, 5 Jan 2017 11:55:37 -0800
Subject: [PATCH] use z-index utils for nav and onclickoutside (#4079)
---
.../metabase/components/OnClickOutsideWrapper.jsx | 12 +++++++-----
frontend/src/metabase/css/components/modal.css | 4 ----
frontend/src/metabase/css/home.css | 8 +-------
frontend/src/metabase/nav/containers/Navbar.jsx | 8 ++++++--
4 files changed, 14 insertions(+), 18 deletions(-)
diff --git a/frontend/src/metabase/components/OnClickOutsideWrapper.jsx b/frontend/src/metabase/components/OnClickOutsideWrapper.jsx
index 7a972d73ec8..5c5ccdd4a5b 100644
--- a/frontend/src/metabase/components/OnClickOutsideWrapper.jsx
+++ b/frontend/src/metabase/components/OnClickOutsideWrapper.jsx
@@ -1,5 +1,5 @@
import React, { Component, PropTypes } from "react";
-import ReactDOM from "react-dom";
+import { findDOMNode } from "react-dom";
// keep track of the order popovers were opened so we only close the last one when clicked outside
const popoverStack = [];
@@ -21,9 +21,10 @@ export default class OnClickOutsideWrapper extends Component {
this._timeout = setTimeout(() => {
popoverStack.push(this);
- // HACK: set the z-index of the parent element to ensure it"s always on top
- // NOTE: this actually doesn"t seem to be working correctly for popovers since PopoverBody creates a stacking context
- ReactDOM.findDOMNode(this).parentNode.style.zIndex = popoverStack.length + 2; // HACK: add 2 to ensure it"s in front of main and nav elements
+ // HACK: set the z-index of the parent element to ensure it's always on top
+ // NOTE: this actually doesn"t seem to be working correctly for
+ // popovers since PopoverBody creates a stacking context
+ findDOMNode(this).parentNode.classList.add('zF');
if (this.props.dismissOnEscape) {
document.addEventListener("keydown", this._handleKeyPress, false);
@@ -38,6 +39,7 @@ export default class OnClickOutsideWrapper extends Component {
document.removeEventListener("keydown", this._handleKeyPress, false);
window.removeEventListener("click", this._handleClick, true);
clearTimeout(this._timeout);
+ findDOMNode(this).parentNode.classList.remove('zF');
// remove from the stack after a delay, if it is removed through some other
// means this will happen too early causing parent modal to close
@@ -50,7 +52,7 @@ export default class OnClickOutsideWrapper extends Component {
}
_handleClick = (e) => {
- if (!ReactDOM.findDOMNode(this).contains(e.target)) {
+ if (!findDOMNode(this).contains(e.target)) {
setTimeout(this._handleDismissal, 0);
}
}
diff --git a/frontend/src/metabase/css/components/modal.css b/frontend/src/metabase/css/components/modal.css
index ba111df1010..3ba7b2590a6 100644
--- a/frontend/src/metabase/css/components/modal.css
+++ b/frontend/src/metabase/css/components/modal.css
@@ -1,7 +1,3 @@
-.ModalContainer {
- z-index: 3;
-}
-
.Modal {
margin: auto;
width: 640px;
diff --git a/frontend/src/metabase/css/home.css b/frontend/src/metabase/css/home.css
index 4e301f00975..d99f32ca19f 100644
--- a/frontend/src/metabase/css/home.css
+++ b/frontend/src/metabase/css/home.css
@@ -1,7 +1,3 @@
-.Nav {
- z-index: 3;
-}
-
.CheckBg {
background-image: url('/app/components/icons/assets/header_rect.svg');
background-repeat: repeat;
@@ -55,9 +51,7 @@
.NavDropdown {
position: relative;
}
-.NavDropdown.open {
- z-index: 100;
-}
+
.NavDropdown .NavDropdown-content {
display: none;
}
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index 61170f1a24c..db2831cca83 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -106,7 +106,7 @@ export default class Navbar extends Component {
renderMainNav() {
return (
- <nav className={cx("Nav CheckBg CheckBg-offset relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
+ <nav className={cx("CheckBg CheckBg-offset z4 relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
<ul className="pl4 pr1 flex align-center">
<li>
<Link to="/" data-metabase-event={"Navbar;Logo"} className="NavItem cursor-pointer text-white flex align-center my1 transition-background">
@@ -115,7 +115,11 @@ export default class Navbar extends Component {
</li>
<li className="pl3">
<DashboardsDropdown {...this.props}>
- <a data-metabase-event={"Navbar;Dashboard Dropdown;Toggle"} style={this.styles.navButton} className={cx("NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center transition-background", {"NavItem--selected": this.isActive("/dash/")})}>
+ <a
+ className={cx("NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center transition-background", {"NavItem--selected": this.isActive("/dash/")})}
+ data-metabase-event={"Navbar;Dashboard Dropdown;Toggle"}
+ style={this.styles.navButton}
+ >
<span className="NavDropdown-button-layer">
Dashboards
<Icon className="ml1" name={'chevrondown'} size={8}></Icon>
--
GitLab