From 3de17ecda7285c20cd826ebd33b69ea254906f18 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Fri, 8 Dec 2017 10:21:00 +0300
Subject: [PATCH] dashboard grid: enable CSS transforms (#10125)

---
 .../dashboard/dashgrid/DashboardGrid.tsx      |  2 +-
 public/app/features/panel/panel_header.ts     | 26 +++++++++++++++++++
 public/sass/components/_dashboard_grid.scss   |  7 +++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 283bf0c74d3..bb06df15183 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -30,7 +30,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
       isResizable={true}
       measureBeforeMount={false}
       containerPadding={[0, 0]}
-      useCSSTransforms={false}
+      useCSSTransforms={true}
       margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
       cols={GRID_COLUMN_COUNT}
       rowHeight={GRID_CELL_HEIGHT}
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts
index 846202bc61d..eba8d24bdfd 100644
--- a/public/app/features/panel/panel_header.ts
+++ b/public/app/features/panel/panel_header.ts
@@ -1,5 +1,6 @@
 ///<reference path="../../headers/common.d.ts" />
 
+import $ from 'jquery';
 import {coreModule} from 'app/core/core';
 
 var template = `
@@ -106,13 +107,38 @@ function panelHeader($compile) {
         }
       });
 
+      elem.find('.panel-menu-toggle').click((evt) => {
+        console.log(evt);
+        togglePanelState();
+      });
+
       function togglePanelMenu(e) {
         if (!isDragged) {
           e.stopPropagation();
+          togglePanelState();
           elem.find('[data-toggle=dropdown]').dropdown('toggle');
         }
       }
 
+      /**
+       * Hack for adding special class 'dropdown-menu-open' to the panel.
+       * This class sets z-index for panel and prevents menu overlapping.
+       */
+      function togglePanelState() {
+        const menuOpenClass = 'dropdown-menu-open';
+        const panelGridClass = '.react-grid-item.panel';
+
+        let panelElem = elem.find('[data-toggle=dropdown]').parentsUntil('.panel').parent();
+        let menuElem = elem.find('[data-toggle=dropdown]').parent();
+        panelElem = panelElem && panelElem.length ? panelElem[0] : undefined;
+        if (panelElem) {
+          panelElem = $(panelElem);
+          $(panelGridClass).removeClass(menuOpenClass);
+          let state = !menuElem.hasClass('open');
+          panelElem.toggleClass(menuOpenClass, state);
+        }
+      }
+
       let mouseX, mouseY;
       elem.mousedown((e) => {
         mouseX = e.pageX;
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
index b7886a3a2dc..a2ec6f5ff4c 100644
--- a/public/sass/components/_dashboard_grid.scss
+++ b/public/sass/components/_dashboard_grid.scss
@@ -47,3 +47,10 @@
   }
 }
 
+// Hack for preventing panel menu overlapping.
+.react-grid-item.resizing.panel,
+.react-grid-item.panel.dropdown-menu-open,
+.react-grid-item.react-draggable-dragging.panel {
+  z-index: $zindex-dropdown;
+}
+