Added ghost panel that shows up empty rows, this panel will show add panel buttons to more quickly/easier get to add a panel, #1635

src/app/features/dashboard/rowCtrl.js

@@ -38,11 +38,6 @@ function (angular, app, _, config) {
       }
     };
 
-    // This can be overridden by individual panels
-    $scope.close_edit = function() {
-      $scope.$broadcast('render');
-    };
-
     $scope.add_panel = function(panel) {
       $scope.dashboard.add_panel(panel, $scope.row);
     };
@@ -92,6 +87,10 @@ function (angular, app, _, config) {
       });
     };
 
+    $scope.updatePanelSpan = function(panel, span) {
+      panel.span = Math.min(Math.max(panel.span + span, 1), 12);
+    };
+
     $scope.replacePanel = function(newPanel, oldPanel) {
       var row = $scope.row;
       var index = _.indexOf(row.panels, oldPanel);
@@ -144,9 +143,11 @@ function (angular, app, _, config) {
 
   module.directive('panelWidth', function() {
     return function(scope, element) {
-      scope.$watch('panel.span', function() {
+      function updateWidth() {
         element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
-      });
+      }
+
+      scope.$watch('panel.span', updateWidth);
     };
   });
 
@@ -168,11 +169,21 @@ function (angular, app, _, config) {
     };
   });
 
-  module.directive('panelGhostPanel', function() {
+  module.directive('panelGhost', function() {
     return function(scope, element) {
-      var dropZoneSpan = 12 - scope.dashboard.rowSpan(scope.row);
+      function updateWidth() {
+        var spanLeft = 12 - scope.dashboard.rowSpan(scope.row);
+        if (spanLeft > 1) {
+          element.show();
           element.find('.panel-container').css('height', scope.row.height);
-      element[0].style.width = ((dropZoneSpan / 1.2) * 10) + '%';
+          element[0].style.width = ((spanLeft / 1.2) * 10) + '%';
+        } else {
+          element.hide();
+        }
+      }
+
+      updateWidth();
+      scope.$on('dashboard-panel-span-updated', updateWidth);
     };
   });
 

src/app/features/panel/panelMenu.js

@@ -20,8 +20,8 @@ function (angular, $, _) {
         var template = '<div class="panel-menu small">';
         template += '<div class="panel-menu-inner">';
         template += '<div class="panel-menu-row">';
-        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(panel,-1)"><i class="fa fa-minus"></i></a>';
-        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(panel,1)"><i class="fa fa-plus"></i></a>';
+        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(-1)"><i class="fa fa-minus"></i></a>';
+        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(1)"><i class="fa fa-plus"></i></a>';
         template += '<a class="panel-menu-icon pull-right" ng-click="removePanel(panel)"><i class="fa fa-remove"></i></a>';
         template += '<div class="clearfix"></div>';
         template += '</div>';

src/app/features/panel/panelSrv.js

@@ -40,8 +40,7 @@ function (angular, _, config) {
       };
 
       $scope.updateColumnSpan = function(span) {
-        $scope.panel.span = Math.min(Math.max($scope.panel.span + span, 1), 12);
-        $scope.row.updatePanelSpan()
+        $scope.updatePanelSpan($scope.panel, span);
 
         $timeout(function() {
           $scope.$broadcast('render');

src/app/partials/dashboard.html

@@ -86,9 +86,15 @@
 						<panel-loader type="panel.type" class="panel-margin"></panel-loader>
 					</div>
 
-					<div panel-drop-zone class="panel panel-drop-zone"
-							 ui-on-drop="onDrop($data, row)"
-							 data-drop="true">
+					<div class="panel panel-ghost" ng-if="!row.panels.length">
+						<div class="panel-container panel-margin">
+							<div class="panel-ghost-list" ng-repeat="(key, value) in panels">
+								<button class="btn btn-inverse" ng-click="add_panel_default(key)"><i class="fa fa-plus"></i> {{value.name}}</button>
+							</div>
+						</div>
+					</div>
+
+					<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" data-drop="true">
 						<div class="panel-container" style="background: transparent">
 							<div style="text-align: center">
 								<em>Drop here</em>

src/app/partials/roweditor.html

@@ -5,7 +5,7 @@
 	</div>
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
+		<div ng-repeat="tab in ['General']" data-title="{{tab}}">
 		</div>
 	</div>
 
@@ -26,29 +26,5 @@
 		<editor-opt-bool text="Editable" model="row.editable"></editor-opt-bool>
 		<editor-opt-bool text="Show title" model="row.showTitle"></editor-opt-bool>
 	</div>
-	<div class="row-fluid" ng-if="editor.index == 1">
-		<div class="span12">
-			<table class="grafana-options-table" style="max-width: 400px; width: auto">
-				<thead>
-					<th>Title</th>
-					<th>Type</th>
-					<th>Span</span></th>
-				<th></th>
-				<th></th>
-				<th></th>
-			</thead>
-			<tr ng-repeat="panel in row.panels">
-				<td style="width: 95%">{{panel.title}}</td>
-				<td>{{panel.type}}</td>
-				<td><select ng-hide="panel.sizeable == false" class="input-mini" style="margin-bottom: 0;" ng-model="panel.span" ng-options="size for size in [1,2,3,4,5,6,7,8,9,10,11,12]"></select></td>
-				<td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
-				<td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
-				<td>
-					<a ng-click="row.panels = _.without(row.panels,panel)" class="btn btn-danger btn-small">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
-		</table>
-	</div>
+
 </div>

src/css/less/panel.less

@@ -169,15 +169,23 @@
   }
 }
 
-.ghost-panel {
-  &:hover {
+.panel-ghost{
+  width: 100%;
   .panel-container {
-      visibility: visible;
+    border: none;
+    background: transparent;
   }
+  .panel-ghost-list {
+    margin: 10px 0 10px 20px;
+  }
+
+  button {
+    text-align: left;
+    min-width: 135px;
+    .fa {
+      position: relative;
+      left: -5px;
     }
-  .panel-container {
-    visibility: hidden;
-    border: 1px solid @grayDark;
   }
 }