improved drag and drop

src/app/directives/kibanaPanel.js

@@ -8,7 +8,7 @@ function (angular) {
     .module('kibana.directives')
     .directive('kibanaPanel', function($compile) {
 
-      var container = '<div class="panel-container" ng-style="{\'min-height\':row.height}""></div>';
+      var container = '<div class="panel-container"></div>';
       var content = '<div class="panel-content"></div>';
 
       var panelHeader =
@@ -27,9 +27,9 @@ function (angular) {
               '<i class="icon-spinner icon-spin icon-large"></i>' +
             '</span>' +
 
-            '<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' +
+            '<span ng-if="panelMeta.menuItems" class="dropdown">' +
               '<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1" ' +
-              'data-drag=true data-jqyoui-options="{revert: \'invalid\',helper:\'clone\'}"'+
+              'data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+
               ' jqyoui-draggable="'+
               '{'+
                 'animate:false,'+
@@ -58,6 +58,15 @@ function (angular) {
           // load the module.js if we have any
           var newScope = $scope.$new();
 
+          $scope.kbnJqUiDraggableOptions = {
+            revert: 'invalid',
+            helper: function(event) {
+              console.log(event);
+              return $('<div style="width:200px;height:100px;background: rgba(100,100,100,0.50);"/>');
+            },
+            placeholder: 'keep'
+          };
+
           // compile the module and uncloack. We're done
           function loadModule($module) {
             $module.appendTo(elem);

src/app/partials/dashboard.html

@@ -16,7 +16,7 @@
       <div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
         <div class="row-control">
           <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
-            <div class="row-close span12" ng-show="row.collapse" data-placement="bottom" >
+            <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
               <span class="row-button bgWarning" bs-modal="'app/partials/roweditor.html'" class="pointer">
                 <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
               </span>
@@ -42,26 +42,26 @@
             </div>
 
           </div>
-          <div class="row-fluid" style="padding-top:0px" ng-if="!row.collapse">
+
+          <div style="padding-top:0px" ng-if="!row.collapse">
 
             <!-- Panels -->
-            <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.span == 0 || panel.hide" class="span{{panel.span}} panel nospace" style="min-height:{{row.height}}; position:relative" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}">
+            <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
-
               <!-- Content Panel -->
-              <div class="row-fluid" style="position:relative" ng-class="{'dragInProgress':dashboard.panelDragging}" >
+              <div style="position:relative">
                 <kibana-panel type="panel.type" ng-cloak></kibana-panel>
               </div>
             </div>
 
-            <div ng-hide="(12-rowSpan(row)) < 1 || !dashboard.current.panel_hints" class="panel span{{(12-rowSpan(row))}}" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
+            <div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
-
-              <span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable && !dashboard.panelDragging">
-                <i ng-hide="rowSpan(row) == 0" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
-                <span ng-click="editor.index = 2" style="margin-top: 8px; margin-left: 3px" ng-show="rowSpan(row) == 0" class="btn btn-mini">Add panel to empty row</btn>
-              </span>
-
             </div>
 
+            <span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable && !dashboard.panelDragging">
+              <i ng-hide="rowSpan(row) >= 10" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
+            </span>
+
+            <div class="clearfix"></div>
+            </div>
           </div>
         </div>
       </div>

src/vendor/bootstrap/less/overrides.less

@@ -51,10 +51,15 @@ code, pre {
   background-color: @grayLighter;
 }
 
+.panel {
+  display: inline-table;
+  vertical-align: top;
+}
+
 .panel-container {
   padding: 0px 0px 0px 0px;
   background: @kibanaPanelBackground;
-  margin: 0px;
+  margin: 5px;
 }
 
 .panel-content {
@@ -257,14 +262,11 @@ form input.ng-invalid {
 
 .ui-draggable-dragging {
   display: block;
-  visibility: visible;
-  opacity: 1;
   z-index: 9999;
 }
 
-.dragInProgress {
+.dragInProgress .panel-container {
-  background-color: darken(@bodyBackground,1%);
+  border: 3px solid rgba(100,100,100,0.50);
-  border: 1px solid @tableBorder;
 }
 
 .link {