grid: minor progres on new grid

public/app/core/components/row_ctrl.ts

@@ -11,26 +11,22 @@ export class DashboardRowCtrl {
       </span>
       <span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
     </a>
-    <div class="dashboard-row__drag grid-drag-handle" ng-if="ctrl.isCollapsed">
-      drag
+    <div class="dashboard-row__actions">
+      <a class="pointer" ng-click="ctrl.moveUp()"><span class="fa fa-arrow-up"></i></a>
+      <a class="pointer" ng-click="ctrl.moveDown()"><span class="fa fa-arrow-down"></i></a>
+      <a class="pointer" ng-click="ctrl.openSettings()"><span class="fa fa-cog"></i></a>
     </div>
-    <a class="dashboard-row__settings pointer">
-      <i class="fa fa-cog"></i>
-    </a>
   `;
 
   dashboard: any;
   panel: any;
-  isCollapsed: boolean;
 
   constructor(private $rootScope) {
-    console.log(this);
     this.panel.hiddenPanels = this.panel.hiddenPanels || [];
-    this.isCollapsed = this.panel.hiddenPanels.length > 0;
   }
 
   toggle() {
-    if (this.isCollapsed) {
+    if (this.panel.collapse) {
       let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
 
       for (let child of this.panel.hiddenPanels) {
@@ -40,11 +36,11 @@ export class DashboardRowCtrl {
       }
 
       this.panel.hiddenPanels = [];
-      this.isCollapsed = false;
+      this.panel.collapse = false;
       return;
     }
 
-    this.isCollapsed = true;
+    this.panel.collapse = true;
     let foundRow = false;
 
     for (let i = 0; i < this.dashboard.panels.length; i++) {
@@ -76,8 +72,8 @@ export class DashboardRowCtrl {
   link(scope, elem) {
     elem.addClass('dashboard-row');
 
-    scope.$watch('ctrl.isCollapsed', () => {
-      elem.toggleClass('dashboard-row--collapse', this.isCollapsed);
+    scope.$watch('ctrl.panel.collapse', () => {
+      elem.toggleClass('dashboard-row--collapse', this.panel.collapse === true);
     });
   }
 }

public/app/features/dashboard/dashboard_ctrl.ts

@@ -113,10 +113,10 @@ export class DashboardCtrl {
       };
 
       $scope.registerWindowResizeEvent = function() {
-        // angular.element(window).bind('resize', function() {
-        //   $timeout.cancel(resizeEventTimeout);
-        //   resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
-        // });
+        angular.element(window).bind('resize', function() {
+          $timeout.cancel(resizeEventTimeout);
+          resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
+        });
 
         $scope.$on('$destroy', function() {
           angular.element(window).unbind('resize');

public/app/features/dashboard/dashgrid/dashgrid.ts

@@ -31,6 +31,7 @@ export class GridCtrl {
   isInitialized: boolean;
   isDestroyed: boolean;
   index: number;
+  changeRenderPromise: any;
 
   /** @ngInject */
   constructor(private $scope, private $element, private $timeout) {
@@ -78,6 +79,8 @@ export class GridCtrl {
   }
 
   onGridStackItemsChanged(items) {
+    console.log('onGridStackItemsChanged');
+
     for (let item of items) {
       // find panel
       var panel = this.dashboard.getPanelById(parseInt(item.id));
@@ -104,24 +107,14 @@ export class GridCtrl {
       return 0;
     });
 
-    let lastPanel = null;
-    for (let panel of this.dashboard.panels) {
-      if (lastPanel && lastPanel.type === 'row' && panel.type === 'row') {
-        if (panel.hiddenPanels.length === 0) {
-          continue;
-        }
-
-        for (let item of items) {
-          if (panel.id === parseInt(item.id)) {
-            this.gridstack.move(item.el, item.x, item.y-1, item.width, item.height, false);
-          }
-        }
-      }
-
-      lastPanel = panel;
+    if (this.changeRenderPromise) {
+      this.$timeout.cancel(this.changeRenderPromise);
     }
 
-    this.$scope.$broadcast('render');
+    this.changeRenderPromise = this.$timeout(() => {
+      console.log('broadcasting render');
+      this.$scope.$broadcast('render');
+    });
   }
 
   destroy() {
@@ -210,20 +203,6 @@ export function dashGridItem($timeout, $rootScope) {
           gridStackNode = element.data('_gridstack_node');
         }, 500);
       }
-
-      //   scope.onItemRemoved({item: item});
-      //   ctrl.removeItem(element);
-
-
-      //var item = element.data('_gridstack_node');
-      //console.log('link item', item);
-      //gridCtrl.bindItem(element);
-
-      // element.bind('$destroy', function() {
-      //   var item = element.data('_gridstack_node');
-      //   scope.onItemRemoved({item: item});
-      //   ctrl.removeItem(element);
-      // });
     }
   };
 }

public/sass/components/_row.scss

@@ -15,8 +15,10 @@
     .dashboard-row__chevron {
       color: $link-color;
     }
-    .dashboard-row__settings {
-      display: block;
+    .dashboard-row__actions {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 300ms ease-in-out 200ms;
     }
   }
 }
@@ -36,12 +38,20 @@
   font-size: $font-size-xs;
   color: $text-muted;
   position: relative;
-  top: 6px;
+  top: 5px;
 }
 
-.dashboard-row__settings {
-  display: none;
-  color: $text-color-weak;
+.dashboard-row__actions {
+  font-size: $font-size-sm;
+  visibility: hidden;
+  opacity: 0;
+  a {
+    color: $text-color-weak;
+    padding-left: 5px;
+    &:hover {
+      color: $link-hover-color;
+    }
+  }
 }
 
 .dashboard-row__title-text {