grid: new grid fixes

public/app/features/panel/panel_directive.ts

@@ -189,90 +189,6 @@ module.directive('grafanaPanel', function($rootScope, $document) {
   };
 });
 
-module.directive('panelResizer', function($rootScope) {
-  return {
-    restrict: 'E',
-    template: '<span class="resize-panel-handle icon-gf icon-gf-grabber"></span>',
-    link: function(scope, elem) {
-      var resizing = false;
-      var lastPanel;
-      var ctrl = scope.ctrl;
-      var handleOffset;
-      var originalHeight;
-      var originalWidth;
-      var maxWidth;
-
-      function dragStartHandler(e) {
-        e.preventDefault();
-        resizing = true;
-
-        handleOffset = $(e.target).offset();
-        originalHeight = parseInt(ctrl.row.height);
-        originalWidth = ctrl.panel.span;
-        maxWidth = $(document).width();
-
-        lastPanel = ctrl.row.panels[ctrl.row.panels.length - 1];
-
-        $('body').on('mousemove', moveHandler);
-        $('body').on('mouseup', dragEndHandler);
-      }
-
-      function moveHandler(e) {
-        ctrl.row.height = Math.round(originalHeight + (e.pageY - handleOffset.top));
-        ctrl.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12);
-        ctrl.panel.span = Math.min(Math.max(ctrl.panel.span, 1), 12);
-
-        ctrl.row.updateRowSpan();
-        var rowSpan = ctrl.row.span;
-
-        // auto adjust other panels
-        if (Math.floor(rowSpan) < 14) {
-          // last panel should not push row down
-          if (lastPanel === ctrl.panel && rowSpan > 12) {
-            lastPanel.span -= rowSpan - 12;
-          } else if (lastPanel !== ctrl.panel) {
-            // reduce width of last panel so total in row is 12
-            lastPanel.span = lastPanel.span - (rowSpan - 12);
-            lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12);
-          }
-        }
-
-        ctrl.row.panelSpanChanged(true);
-
-        scope.$apply(function() {
-          ctrl.render();
-        });
-      }
-
-      function dragEndHandler() {
-        ctrl.panel.span = Math.round(ctrl.panel.span);
-        if (lastPanel) {
-          lastPanel.span = Math.round(lastPanel.span);
-        }
-
-        // first digest to propagate panel width change
-        // then render
-        $rootScope.$apply(function() {
-          ctrl.row.panelSpanChanged();
-          setTimeout(function() {
-            $rootScope.$broadcast('render');
-          });
-        });
-
-        $('body').off('mousemove', moveHandler);
-        $('body').off('mouseup', dragEndHandler);
-      }
-
-      elem.on('mousedown', dragStartHandler);
-
-      var unbind = scope.$on("$destroy", function() {
-        elem.off('mousedown', dragStartHandler);
-        unbind();
-      });
-    }
-  };
-});
-
 module.directive('panelHelpCorner', function($rootScope) {
   return {
     restrict: 'E',

public/sass/components/_gridstack.scss

@@ -45,10 +45,11 @@
 
 .grid-stack > .grid-stack-item > .ui-resizable-handle {
   position: absolute;
-  font-size: 0.1px;
   display: block;
   -ms-touch-action: none;
   touch-action: none;
+  font-size: 10px;
+  color: $text-color-weak;
 }
 
 .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
@@ -69,30 +70,25 @@
 
 .grid-stack > .grid-stack-item > .ui-resizable-se,
 .grid-stack > .grid-stack-item > .ui-resizable-sw {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
-  background-repeat: no-repeat;
-  background-position: center;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
+  font-family: 'grafana-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  &::before {
+    content: "\e90b";
+  }
 }
-
-.grid-stack > .grid-stack-item > .ui-resizable-se {
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
 .grid-stack > .grid-stack-item > .ui-resizable-se {
   cursor: se-resize;
   width: 16px;
   height: 16px;
-  right: 10px;
-  bottom: 0;
+  right: 6px;
+  bottom: -2px;
 }
 
 .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {

public/sass/components/_view_states.scss

@@ -3,7 +3,6 @@
   .dash-row-menu-container {
     display: none;
   }
-  .resize-panel-handle,
   .panel-drop-zone {
     visibility: hidden;
   }
@@ -24,7 +23,6 @@
 .user-activity-low {
   .add-row-panel-hint,
   .dash-row-menu-container,
-  .resize-panel-handle,
   .panel-drop-zone
   .dashnav-refresh-action,
   .dashnav-zoom-out,

public/sass/pages/_dashboard.scss

@@ -20,13 +20,7 @@ div.flot-text {
 }
 
 .panel {
-  //display: inline-block;
-  //float: left;
-
   &--solo {
-    .resize-panel-handle {
-      display: none;
-    }
     .panel-container {
       border: none;
     }
@@ -251,26 +245,6 @@ div.flot-text {
   right: 0;
 }
 
-.resize-panel-handle {
-  cursor: nwse-resize;
-  position: absolute;
-  font-size: 10px;
-  bottom: 0;
-  right: 0;
-  width: 15px;
-  height: 15px;
-  visibility: hidden;
-  opacity: 0;
-  color: $text-color-faint;
-
-  &:before {
-    left: initial;
-    right: -1px;
-    bottom: 0px;
-    position: absolute;
-  }
-}
-
 .dashboard-header {
   font-family: $headings-font-family;
   font-size: $font-size-h3;