Add drag to resize panel widths. Closes #329

src/app/directives/all.js

@@ -9,5 +9,6 @@ define([
   './tip',
   './confirmClick',
   './esVersion',
-  './configModal'
+  './configModal',
+  './resizable'
 ], function () {});

src/app/directives/resizable.js

@@ -0,0 +1,35 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  angular
+    .module('kibana.directives')
+    .directive('resizable', function() {
+      return {
+        restrict: 'A',
+        link: function(scope, elem) {
+          console.log('linked');
+
+          var getOpts = function() {
+            return {
+              maxWidth: elem.parent().width(),
+              grid: elem.parent().width()/12
+            };
+          };
+
+          // Re-render if the window is resized
+          angular.element(window).bind('resize', function(){
+            elem.resizable(getOpts());
+          });
+
+          elem.resizable(getOpts());
+          elem.resize(function (event, ui) {
+            scope.panel.span = Math.round(((ui.size.width / elem.parent().width()) * 100) * 1.2) / 10;
+            scope.$apply();
+          });
+        }
+      };
+    });
+});

src/app/partials/dashboard.html

@@ -49,7 +49,7 @@
           <div style="padding-top:0px" ng-if="!row.collapse">
 
             <!-- Panels -->
-            <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}">
+            <div resizable 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 style="position:relative">

src/vendor/bootstrap/less/overrides.less

@@ -139,6 +139,18 @@ code, pre {
   border: 1px solid @blue;
 }
 
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+//.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+//.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: 3px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: 3px; top: 0; height: 100%; }
+//.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+//.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+//.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+//.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
+
 // ---------------------------
 
 .row-add-button {