feat: new grid fixes

public/app/features/dashboard/dashgrid/dashgrid.ts

@@ -53,10 +53,8 @@ export class GridCtrl {
       panel.y = item.y;
       panel.width = item.width;
       panel.height = item.height;
-      console.log('update panel', panel.id, panel.height);
     }
     this.$rootScope.$broadcast('render');
-    console.log('broadcast render');
   }
 
   bindItem(element) {
@@ -77,7 +75,6 @@ export function dashGrid($timeout) {
     },
     link: function(scope, elem, attrs, ctrl) {
       $timeout(function() {
-        console.log(elem.html());
         ctrl.init();
       });
     }
@@ -85,7 +82,7 @@ export function dashGrid($timeout) {
 }
 
 /** @ngInject **/
-export function dashGridItem($timeout) {
+export function dashGridItem($timeout, $rootScope) {
   return {
     restrict: "E",
     scope: {
@@ -104,6 +101,21 @@ export function dashGridItem($timeout) {
         'data-gs-height': panel.height,
       });
 
+      $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
+        if (panel.id !== payload.panelId) {
+          return;
+        }
+        element.removeClass('panel-fullscreen');
+      }, scope);
+
+      $rootScope.onAppEvent('panel-fullscreen-enter', (evt, payload) => {
+        if (panel.id !== payload.panelId) {
+          return;
+        }
+        element.addClass('panel-fullscreen');
+      }, scope);
+
+
       //var item = element.data('_gridstack_node');
       //console.log('link item', item);
       //gridCtrl.bindItem(element);

public/app/features/panel/panel_ctrl.ts

@@ -169,21 +169,15 @@ export class PanelCtrl {
   }
 
   calculatePanelHeight() {
-    // if (this.fullscreen) {
-    //   var docHeight = $(window).height();
-    //   var editHeight = Math.floor(docHeight * 0.4);
-    //   var fullscreenHeight = Math.floor(docHeight * 0.8);
-    //   this.containerHeight = this.editMode ? editHeight : fullscreenHeight;
-    // } else {
-    //   this.containerHeight = this.panel.height || this.row.height;
-    //   if (_.isString(this.containerHeight)) {
-    //     this.containerHeight = parseInt(this.containerHeight.replace('px', ''), 10);
-    //   }
-    // }
-    if (this.panel.id === 4) {
-      console.log(this.panel.id, this.panel.height);
-    }
+    if (this.fullscreen) {
+       var docHeight = $(window).height();
+       var editHeight = Math.floor(docHeight * 0.4);
+       var fullscreenHeight = Math.floor(docHeight * 0.8);
+       this.containerHeight = this.editMode ? editHeight : fullscreenHeight;
+    } else {
       this.containerHeight = this.panel.height * CELL_HEIGHT + ((this.panel.height-1) * CELL_VMARGIN);
+    }
+
     this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
   }
 

public/app/features/panel/panel_directive.ts

@@ -20,7 +20,7 @@ var panelTemplate = `
         <i class="fa fa-spinner fa-spin"></i>
       </span>
 
-      <panel-header class="panel-title-container drag-handle" panel-ctrl="ctrl"></panel-header>
+      <panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
     </div>
 
     <div class="panel-content">
@@ -134,14 +134,6 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         }
       });
 
-      var lastFullscreen;
-      $rootScope.onAppEvent('panel-change-view', function(evt, payload) {
-        if (lastFullscreen !== ctrl.fullscreen) {
-          elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false);
-          lastFullscreen = ctrl.fullscreen;
-        }
-      }, scope);
-
       function updatePanelCornerInfo() {
         var cornerMode = ctrl.getInfoMode();
         cornerInfoElem[0].className = 'panel-info-corner panel-info-corner--' + cornerMode;

public/app/features/panel/panel_header.ts

@@ -5,9 +5,9 @@ import angular from 'angular';
 import {coreModule} from 'app/core/core';
 
 var template = `
-<span class="panel-title drag-handle">
+<span class="panel-title">
   <span class="icon-gf panel-alert-icon"></span>
-  <span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
+  <span class="panel-title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
   <span class="panel-menu-container dropdown">
     <span class="fa fa-caret-down panel-menu-toggle" data-toggle="dropdown"></span>
     <ul class="dropdown-menu dropdown-menu--menu panel-menu" role="menu">
@@ -92,6 +92,12 @@ function panelHeader($compile) {
       elem.click(function(evt) {
         const targetClass = evt.target.className;
 
+        console.log(elem.closest('.ui-draggable-dragging'));
+        // ignore click if we are dragging
+        if (elem.closest('.ui-draggable-dragging').length > 0) {
+          return;
+        }
+
         // remove existing scope
         if (menuScope) {
           menuScope.$destroy();
@@ -99,11 +105,10 @@ function panelHeader($compile) {
 
         menuScope = scope.$new();
         let menuHtml = createMenuTemplate(scope.ctrl);
-        console.log(menuHtml);
         menuElem.html(menuHtml);
         $compile(menuElem)(menuScope);
 
-        if (targetClass === 'panel-title-text drag-handle' || targetClass === 'panel-title drag-handle') {
+        if (targetClass === 'panel-title-text' || targetClass === 'panel-title') {
           evt.stopPropagation();
           elem.find('[data-toggle=dropdown]').dropdown('toggle');
         }

public/sass/components/_gridstack.scss

@@ -15,7 +15,8 @@
 }
 
 .grid-stack .grid-stack-placeholder > .placeholder-content {
-  border: 1px dashed lightgray;
+  background: $input-label-bg;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8);
   margin: 0;
   position: absolute;
   top: 0;
@@ -41,8 +42,6 @@
   right: 7px;
   bottom: 0;
   width: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .grid-stack > .grid-stack-item > .ui-resizable-handle {
@@ -89,38 +88,6 @@
   transform: rotate(-45deg);
 }
 
-.grid-stack > .grid-stack-item > .ui-resizable-nw {
-  cursor: nw-resize;
-  width: 16px;
-  height: 16px;
-  left: 10px;
-  top: 0;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-n {
-  cursor: n-resize;
-  height: 10px;
-  top: 0;
-  left: 25px;
-  right: 25px;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-ne {
-  cursor: ne-resize;
-  width: 16px;
-  height: 16px;
-  right: 10px;
-  top: 0;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-e {
-  cursor: e-resize;
-  width: 10px;
-  right: 10px;
-  top: 15px;
-  bottom: 15px;
-}
-
 .grid-stack > .grid-stack-item > .ui-resizable-se {
   cursor: se-resize;
   width: 16px;
@@ -129,30 +96,6 @@
   bottom: 0;
 }
 
-.grid-stack > .grid-stack-item > .ui-resizable-s {
-  cursor: s-resize;
-  height: 10px;
-  left: 25px;
-  bottom: 0;
-  right: 25px;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-sw {
-  cursor: sw-resize;
-  width: 16px;
-  height: 16px;
-  left: 10px;
-  bottom: 0;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-w {
-  cursor: w-resize;
-  width: 10px;
-  left: 10px;
-  top: 15px;
-  bottom: 15px;
-}
-
 .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
   display: none !important;
 }

public/sass/pages/_dashboard.scss

@@ -35,7 +35,6 @@ div.flot-text {
 
 .panel-margin {
   margin: 0 0.4rem 0.8rem 0.4rem;
-  //display: block;
 }
 
 .panel-container {
@@ -234,6 +233,15 @@ div.flot-text {
   .panel-drop-zone {
     display: none !important;
   }
+
+  .grid-stack > .grid-stack-item  {
+    position: unset;
+    display: none;
+  }
+
+  .panel-fullscreen {
+    display: block !important;
+  }
 }
 
 .panel-time-info {
@@ -243,7 +251,7 @@ div.flot-text {
   color: $blue;
   font-size: 85%;
   position: absolute;
-  top: 0;
+  top: 4px;
   right: 0;
 }