working on empty space / dropzone ghost panel

public/app/features/dashboard/model.ts

@@ -18,7 +18,6 @@ export class DashboardModel {
   style: any;
   timezone: any;
   editable: any;
-  hideControls: any;
   sharedCrosshair: any;
   rows: any;
   time: any;
@@ -51,7 +50,6 @@ export class DashboardModel {
     this.style = data.style || "dark";
     this.timezone = data.timezone || '';
     this.editable = data.editable !== false;
-    this.hideControls = data.hideControls || false;
     this.sharedCrosshair = data.sharedCrosshair || false;
     this.rows = data.rows || [];
     this.time = data.time || { from: 'now-6h', to: 'now' };
@@ -72,7 +70,6 @@ export class DashboardModel {
   }
 
   private initMeta(meta) {
-    console.log(meta);
     meta = meta || {};
 
     meta.canShare = meta.canShare !== false;
@@ -84,7 +81,6 @@ export class DashboardModel {
       meta.canEdit = false;
       meta.canDelete = false;
       meta.canSave = false;
-      this.hideControls = true;
     }
 
     this.meta = meta;

public/app/features/dashboard/row/row.html

@@ -59,9 +59,9 @@
   </div>
 
   <div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
-    <div class="panel-container" style="background: transparent">
-      <div style="text-align: center">
-        <em>Drop here</em>
+    <div class="panel-margin">
+      <div class="panel-container">
+        <div class="panel-drop-zone-text"></div>
       </div>
     </div>
   </div>

public/app/features/dashboard/row/row.ts

@@ -106,7 +106,7 @@ export function rowDirective($rootScope) {
     },
     link: function(scope, element) {
       scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height'], function() {
-        element.css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height});
+        element.find('.panels-wrapper').css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height});
       });
 
       $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
@@ -167,20 +167,61 @@ coreModule.directive('panelWidth', function($rootScope) {
 
 coreModule.directive('panelDropZone', function($timeout) {
   return function(scope, element) {
-    scope.$on("ANGULAR_DRAG_START", function() {
-      $timeout(function() {
-        var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
+    var row = scope.ctrl.row;
+    var indrag = false;
+    var textEl = element.find('.panel-drop-zone-text');
+
+    function showPanel(span, text) {
+      element.find('.panel-container').css('height', row.height);
+      element[0].style.width = ((span / 1.2) * 10) + '%';
+      textEl.text(text);
+      element.show();
+    }
+
+    function hidePanel() {
+      element.hide();
+      // element.removeClass('panel-drop-zone--empty');
+    }
 
-        if (dropZoneSpan > 0) {
-          element.find('.panel-container').css('height', scope.ctrl.row.height);
-          element[0].style.width = ((dropZoneSpan / 1.2) * 10) + '%';
-          element.show();
+    function updateState() {
+      if (scope.ctrl.dashboard.editMode) {
+        if (row.panels.length === 0 && indrag === false) {
+          return showPanel(12, 'Empty Space');
         }
-      });
+
+        var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
+        if (dropZoneSpan > 1) {
+          if (indrag)  {
+            return showPanel(dropZoneSpan, 'Drop Here');
+          } else {
+            return showPanel(dropZoneSpan, 'Empty Space');
+          }
+        }
+      }
+
+      if (indrag === true) {
+        return showPanel(dropZoneSpan, 'Drop Here');
+      }
+
+      hidePanel();
+    }
+
+    scope.$watchGroup(['ctrl.row.panels.length', 'ctrl.dashboard.editMode', 'ctrl.row.span'], updateState);
+
+    scope.$on("ANGULAR_DRAG_START", function() {
+      indrag = true;
+      updateState();
+      // $timeout(function() {
+      //   var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
+      //   if (dropZoneSpan > 0) {
+      //     showPanel(dropZoneSpan, 'Panel Drop Zone');
+      //   }
+      // });
     });
 
     scope.$on("ANGULAR_DRAG_END", function() {
-      element.hide();
+      indrag = false;
+      updateState();
     });
   };
 });

public/sass/pages/_dashboard.scss

@@ -165,6 +165,13 @@ div.flot-text {
   display: none;
   .panel-container {
     border: 1px solid $dark-3;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    color: $text-muted;
+    font-weight: bold;
+    background: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
   }
 }