From 4653ad70e9ac8b106a9db801ee2460696ac55214 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Thu, 5 Jan 2017 12:11:51 -0800
Subject: [PATCH] Revert "use z-index utils for nav and onclickoutside (#4079)"
This reverts commit 0c869f1af15bbb1f1e29c42a84ae96821a535c5d.
---
.../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, 18 insertions(+), 14 deletions(-)
diff --git a/frontend/src/metabase/components/OnClickOutsideWrapper.jsx b/frontend/src/metabase/components/OnClickOutsideWrapper.jsx
index 5c5ccdd4a5b..7a972d73ec8 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 { findDOMNode } from "react-dom";
+import ReactDOM from "react-dom";
// keep track of the order popovers were opened so we only close the last one when clicked outside
const popoverStack = [];
@@ -21,10 +21,9 @@ 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
- findDOMNode(this).parentNode.classList.add('zF');
+ // 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
if (this.props.dismissOnEscape) {
document.addEventListener("keydown", this._handleKeyPress, false);
@@ -39,7 +38,6 @@ 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
@@ -52,7 +50,7 @@ export default class OnClickOutsideWrapper extends Component {
}
_handleClick = (e) => {
- if (!findDOMNode(this).contains(e.target)) {
+ if (!ReactDOM.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 3ba7b2590a6..ba111df1010 100644
--- a/frontend/src/metabase/css/components/modal.css
+++ b/frontend/src/metabase/css/components/modal.css
@@ -1,3 +1,7 @@
+.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 d99f32ca19f..4e301f00975 100644
--- a/frontend/src/metabase/css/home.css
+++ b/frontend/src/metabase/css/home.css
@@ -1,3 +1,7 @@
+.Nav {
+ z-index: 3;
+}
+
.CheckBg {
background-image: url('/app/components/icons/assets/header_rect.svg');
background-repeat: repeat;
@@ -51,7 +55,9 @@
.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 db2831cca83..61170f1a24c 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("CheckBg CheckBg-offset z4 relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
+ <nav className={cx("Nav CheckBg CheckBg-offset 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,11 +115,7 @@ export default class Navbar extends Component {
</li>
<li className="pl3">
<DashboardsDropdown {...this.props}>
- <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}
- >
+ <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/")})}>
<span className="NavDropdown-button-layer">
Dashboards
<Icon className="ml1" name={'chevrondown'} size={8}></Icon>
--
GitLab