grid: minor progres on new grid

public/app/core/components/row_ctrl.ts

@@ -6,16 +6,21 @@ export class DashboardRowCtrl {
   static template = `
   static template = `
     <a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
     <a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
       <span class="dashboard-row__chevron">
       <span class="dashboard-row__chevron">
-        <i class="fa fa-chevron-down" ng-hide="ctrl.isCollapsed"></i>
-        <i class="fa fa-chevron-right" ng-show="ctrl.isCollapsed"></i>
+        <i class="fa fa-chevron-down" ng-hide="ctrl.panel.collapse"></i>
+        <i class="fa fa-chevron-right" ng-show="ctrl.panel.collapse"></i>
+      </span>
+      <span class="dashboard-row__title-text">
+        {{ctrl.panel.title | interpolateTemplateVars:this}}
       </span>
       </span>
-      <span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
     </a>
     </a>
+    <div class="dashboard-row__panel_count">
+        ({{ctrl.panel.hiddenPanels.length}} hidden panels)
+    </div>
     <div class="dashboard-row__actions">
     <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>
       <a class="pointer" ng-click="ctrl.openSettings()"><span class="fa fa-cog"></i></a>
     </div>
     </div>
+    <div class="dashboard-row__drag grid-drag-handle">
+    </div>
   `;
   `;
 
 
   dashboard: any;
   dashboard: any;
@@ -69,6 +74,21 @@ export class DashboardRowCtrl {
     }
     }
   }
   }
 
 
+  moveUp() {
+    // let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
+    // let rowAbove = null;
+    // for (let index = panelIndex-1; index > 0; index--) {
+    //   panel = this.dashboard.panels[index];
+    //   if (panel.type === 'row') {
+    //     rowAbove = panel;
+    //   }
+    // }
+    //
+    // if (rowAbove) {
+    //   this.panel.y = rowAbove.y;
+    // }
+  }
+
   link(scope, elem) {
   link(scope, elem) {
     elem.addClass('dashboard-row');
     elem.addClass('dashboard-row');
 
 

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

 ///<reference path="../../../headers/common.d.ts" />
 ///<reference path="../../../headers/common.d.ts" />
 
 
 import $ from 'jquery';
 import $ from 'jquery';
+import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
 import {DashboardModel, CELL_HEIGHT, CELL_VMARGIN} from '../model';
 import {DashboardModel, CELL_HEIGHT, CELL_VMARGIN} from '../model';
 
 
@@ -169,6 +170,15 @@ export function dashGridItem($timeout, $rootScope) {
         'data-gs-no-resize': panel.type === 'row',
         'data-gs-no-resize': panel.type === 'row',
       });
       });
 
 
+      // listen for row moments
+      scope.$watch("panel.y", function(newModelY) {
+        let elementY = parseInt(element.attr('data-gs-y'));
+        console.log('new panel y', newModelY, elementY);
+        if (_.isNumber(newModelY) && elementY !== newModelY) {
+          gridCtrl.gridstack.move(element, panel.x, panel.y);
+        }
+      });
+
       $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
       $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
         if (panel.id !== payload.panelId) {
         if (panel.id !== payload.panelId) {
           return;
           return;

public/sass/components/_row.scss

+$dashboard-row-height: 30px;
 
 
 .dashboard-row {
 .dashboard-row {
   display: flex;
   display: flex;
-  height: 30px;
+  height: $dashboard-row-height;
+  line-height: $dashboard-row-height;
   align-items: center;
   align-items: center;
   padding: 0 0.5rem;
   padding: 0 0.5rem;
 
 
   &--collapse {
   &--collapse {
     background: $panel-bg;
     background: $panel-bg;
-    border: $panel-border;
-    margin-bottom: $panel-margin*2;
+
+    .dashboard-row__panel_count {
+      display: block;
+    }
+
+    .dashboard-row__drag,
+    .dashboard-row__actions {
+      visibility: visible;
+      opacity: 1;
+    }
   }
   }
 
 
   &:hover {
   &:hover {
     .dashboard-row__chevron {
     .dashboard-row__chevron {
       color: $link-color;
       color: $link-color;
     }
     }
+
     .dashboard-row__actions {
     .dashboard-row__actions {
       visibility: visible;
       visibility: visible;
       opacity: 1;
       opacity: 1;
-      transition: opacity 300ms ease-in-out 200ms;
+      transition: opacity 200ms ease-in-out 100ms;
     }
     }
   }
   }
 }
 }
@@ -38,16 +49,17 @@
   font-size: $font-size-xs;
   font-size: $font-size-xs;
   color: $text-muted;
   color: $text-muted;
   position: relative;
   position: relative;
-  top: 5px;
+  top: 1px;
 }
 }
 
 
 .dashboard-row__actions {
 .dashboard-row__actions {
+  padding-right: 1rem;
   font-size: $font-size-sm;
   font-size: $font-size-sm;
   visibility: hidden;
   visibility: hidden;
   opacity: 0;
   opacity: 0;
   a {
   a {
     color: $text-color-weak;
     color: $text-color-weak;
-    padding-left: 5px;
+    padding-left: $spacer;
     &:hover {
     &:hover {
       color: $link-hover-color;
       color: $link-hover-color;
     }
     }
@@ -59,6 +71,23 @@
   color: $text-color;
   color: $text-color;
 }
 }
 
 
+.dashboard-row__panel_count {
+  color: $text-color-weak;
+  font-style: italic;
+  font-size: $font-size-sm;
+  font-weight: normal;
+  display: none;
+}
+
+.dashboard-row__drag {
+  cursor: move;
+  width: 1rem;
+  height: $dashboard-row-height;
+  background: url("../img/grab_dark.svg") no-repeat 50% 50%;
+  background-size: 8px;
+  visibility: hidden;
+}
+
 .panels-wrapper {
 .panels-wrapper {
   flex-grow: 1;
   flex-grow: 1;
   position: relative;
   position: relative;