ux(dashboard): progress on ghost empty space panel

public/app/core/routes/dashboard_loaders.js

@@ -31,12 +31,12 @@ function (coreModule) {
       meta: { canStar: false, canShare: false, isNew: true },
       dashboard: {
         title: "New dashboard",
-        isNew: true,
         rows: [
           {
             title: 'Dashboard Row',
             height: '250px',
             panels:[],
+            isNew: true,
           }
         ]
       },

public/app/features/dashboard/model.ts

@@ -165,24 +165,8 @@ export class DashboardModel {
   };
 
   addPanel(panel, row) {
-    var rowSpan = this.rowSpan(row);
-    var panelCount = row.panels.length;
-    var space = (12 - rowSpan) - panel.span;
     panel.id = this.getNextPanelId();
-
-    // try to make room of there is no space left
-    if (space <= 0) {
-      if (panelCount === 1) {
-        row.panels[0].span = 6;
-        panel.span = 6;
-      } else if (panelCount === 2) {
-        row.panels[0].span = 4;
-        row.panels[1].span = 4;
-        panel.span = 4;
-      }
-    }
-
-    row.panels.push(panel);
+    row.addPanel(panel);
   }
 
   toggleEditMode() {

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

@@ -190,7 +190,7 @@ coreModule.directive('panelDropZone', function($timeout) {
         }
 
         var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
-        if (dropZoneSpan > 1) {
+        if (dropZoneSpan > 0) {
           if (indrag)  {
             return showPanel(dropZoneSpan, 'Drop Here');
           } else {
@@ -209,14 +209,9 @@ coreModule.directive('panelDropZone', function($timeout) {
       hidePanel();
     }
 
-    row.events.on('panel-added', updateState);
-    row.events.on('span-changed', updateState);
+    row.events.on('span-changed', updateState, scope);
 
-    scope.$on('$destroy', () => {
-      row.events.off('panel-added', updateState);
-      row.events.off('span-changed', updateState);
-    });
-    // scope.$watchGroup(['ctrl.row.panels.length', 'ctrl.dashboard.editMode', 'ctrl.row.span'], updateState);
+    scope.$watchGroup(['ctrl.dashboard.editMode'], updateState);
 
     scope.$on("ANGULAR_DRAG_START", function() {
       indrag = true;

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

@@ -1,5 +1,6 @@
 ///<reference path="../../../headers/common.d.ts" />
 
+import _ from 'lodash';
 import {Emitter, contextSrv} from 'app/core/core';
 import {assignModelProperties} from 'app/core/core';
 
@@ -9,6 +10,7 @@ export class DashboardRow {
   showTitle: any;
   titleSize: any;
   events: Emitter;
+  span: number;
 
   defaults = {
     title: 'Dashboard Row',
@@ -20,13 +22,61 @@ export class DashboardRow {
   };
 
   constructor(private model) {
+    console.log(model.isNew);
     assignModelProperties(this, model, this.defaults);
     this.events = new Emitter();
+    this.updateRowSpan();
   }
 
   getSaveModel() {
     assignModelProperties(this.model, this, this.defaults);
     return this.model;
   }
+
+  updateRowSpan() {
+    this.span = 0;
+    for (let panel of this.panels) {
+      this.span += panel.span;
+    }
+  }
+
+  panelSpanChanged() {
+    var oldSpan = this.span;
+    this.updateRowSpan();
+
+    if (oldSpan !== this.span) {
+      this.events.emit('span-changed');
+    }
+  }
+
+  addPanel(panel) {
+    var rowSpan = this.span;
+    var panelCount = this.panels.length;
+    var space = (12 - rowSpan) - panel.span;
+
+    // try to make room of there is no space left
+    if (space <= 0) {
+      if (panelCount === 1) {
+        this.panels[0].span = 6;
+        panel.span = 6;
+      } else if (panelCount === 2) {
+        this.panels[0].span = 4;
+        this.panels[1].span = 4;
+        panel.span = 4;
+      }
+    }
+
+    this.panels.push(panel);
+    this.events.emit('panel-added', panel);
+    this.panelSpanChanged();
+  }
+
+  removePanel(panel) {
+    var index = _.indexOf(this.panels, panel);
+    this.panels.splice(index, 1);
+
+    this.events.emit('panel-removed', panel);
+    this.panelSpanChanged();
+  }
 }
 

public/app/features/panel/panel_ctrl.ts

@@ -193,6 +193,8 @@ export class PanelCtrl {
 
   updateColumnSpan(span) {
     this.panel.span = Math.min(Math.max(Math.floor(this.panel.span + span), 1), 12);
+    this.row.panelSpanChanged();
+
     this.$timeout(() => {
       this.render();
     });
@@ -205,7 +207,7 @@ export class PanelCtrl {
       icon: 'fa-trash',
       yesText: 'Remove',
       onConfirm: () => {
-        this.row.panels = _.without(this.row.panels, this.panel);
+        this.row.removePanel(this.panel);
       }
     });
   }

public/app/features/panel/panel_directive.ts

@@ -157,6 +157,8 @@ module.directive('panelResizer', function($rootScope) {
           }
         }
 
+        ctrl.row.panelSpanChanged();
+
         scope.$apply(function() {
           ctrl.render();
         });
@@ -174,6 +176,8 @@ module.directive('panelResizer', function($rootScope) {
           lastPanel.span +=  12 - rowSpan;
         }
 
+        ctrl.row.panelSpanChanged();
+
         // first digest to propagate panel width change
         // then render
         $rootScope.$apply(function() {

public/sass/_variables.dark.scss

@@ -88,8 +88,8 @@ $component-active-bg:    $brand-primary !default;
 
 // Panel
 // -------------------------
-$panel-bg: 				 $dark-2;
-$panel-border:  	 solid 1px $dark-3;
+$panel-bg: 				      $dark-2;
+$panel-border:  	      solid 1px $dark-3;
 
 $divider-border-color:        #555;
 

public/sass/pages/_dashboard.scss

@@ -169,7 +169,7 @@ div.flot-text {
     justify-content: center;
     flex-direction: column;
     text-align: center;
-    color: $text-muted;
+    color: $text-color-faint;
     font-weight: bold;
     background: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
   }