grid work

public/app/core/components/row_ctrl.ts

@@ -5,13 +5,18 @@ import _ from 'lodash';
 export class DashboardRowCtrl {
 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">
+        <i class="fa fa-chevron-down" ng-hide="ctrl.isCollapsed"></i>
+        <i class="fa fa-chevron-right" ng-show="ctrl.isCollapsed"></i>
+      </span>
       <span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
       <span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
     </a>
     </a>
+    <div class="dashboard-row__drag grid-drag-handle" ng-if="ctrl.isCollapsed">
+      drag
+    </div>
     <a class="dashboard-row__settings pointer">
     <a class="dashboard-row__settings pointer">
       <i class="fa fa-cog"></i>
       <i class="fa fa-cog"></i>
     </a>
     </a>
-    <div class="dashboard-row__drag panel-drag-handle" ng-if="ctrl.isCollapsed">
-    </div>
   `;
   `;
 
 
   dashboard: any;
   dashboard: any;

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

@@ -47,7 +47,7 @@ export class GridCtrl {
       cellHeight: CELL_HEIGHT,
       cellHeight: CELL_HEIGHT,
       verticalMargin: CELL_VMARGIN,
       verticalMargin: CELL_VMARGIN,
       acceptWidgets: '.grid-stack-item',
       acceptWidgets: '.grid-stack-item',
-      handle: '.panel-header'
+      handle: '.grid-drag-handle'
     }).data('gridstack');
     }).data('gridstack');
 
 
     this.isInitialized = true;
     this.isInitialized = true;
@@ -104,6 +104,23 @@ export class GridCtrl {
       return 0;
       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;
+    }
+
     this.$scope.$broadcast('render');
     this.$scope.$broadcast('render');
   }
   }
 
 
@@ -156,6 +173,7 @@ export function dashGridItem($timeout, $rootScope) {
         'data-gs-y': panel.y,
         'data-gs-y': panel.y,
         'data-gs-width': panel.width,
         'data-gs-width': panel.width,
         'data-gs-height': panel.height,
         'data-gs-height': panel.height,
+        'data-gs-no-resize': panel.type === 'row',
       });
       });
 
 
       $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
       $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {

public/app/features/panel/panel_directive.ts

@@ -10,7 +10,7 @@ var module = angular.module('grafana.directives');
 
 
 var panelTemplate = `
 var panelTemplate = `
   <div class="panel-container">
   <div class="panel-container">
-    <div class="panel-header">
+    <div class="panel-header grid-drag-handle">
       <span class="panel-info-corner">
       <span class="panel-info-corner">
         <i class="fa"></i>
         <i class="fa"></i>
         <span class="panel-info-corner-inner"></span>
         <span class="panel-info-corner-inner"></span>

public/sass/components/_row.scss

@@ -3,6 +3,7 @@
   display: flex;
   display: flex;
   height: 30px;
   height: 30px;
   align-items: center;
   align-items: center;
+  padding: 0 0.5rem;
 
 
   &--collapse {
   &--collapse {
     background: $panel-bg;
     background: $panel-bg;
@@ -11,7 +12,6 @@
   }
   }
 
 
   &:hover {
   &:hover {
-    background: $panel-bg;
     .dashboard-row__chevron {
     .dashboard-row__chevron {
       color: $link-color;
       color: $link-color;
     }
     }
@@ -28,27 +28,24 @@
   flex-direction: row;
   flex-direction: row;
   margin-right: $panel-margin;
   margin-right: $panel-margin;
   margin-left: 0;
   margin-left: 0;
-  font-size: $font-size-lg;
+  font-size: 1.15rem;
   font-weight: $font-weight-semi-bold;
   font-weight: $font-weight-semi-bold;
-  //text-align: center;
-  display: block;
 }
 }
 
 
 .dashboard-row__chevron {
 .dashboard-row__chevron {
-  padding: 0 2px;
   font-size: $font-size-xs;
   font-size: $font-size-xs;
   color: $text-muted;
   color: $text-muted;
   position: relative;
   position: relative;
-  left: -3px;
-  top: -1px;
+  top: 6px;
 }
 }
 
 
 .dashboard-row__settings {
 .dashboard-row__settings {
   display: none;
   display: none;
+  color: $text-color-weak;
 }
 }
 
 
 .dashboard-row__title-text {
 .dashboard-row__title-text {
-  padding-left: 0.6rem;
+  padding-left: 0.4rem;
   color: $text-color;
   color: $text-color;
 }
 }
 
 

tasks/options/watch.js

@@ -25,6 +25,7 @@ module.exports = function(config, grunt) {
       config.srcDir + '/sass/**/*',
       config.srcDir + '/sass/**/*',
       config.srcDir + '/app/**/*',
       config.srcDir + '/app/**/*',
       config.srcDir + '/test/**/*',
       config.srcDir + '/test/**/*',
+      config.srcDir + '/vendor/npm/gridstack/dist/*.js',
       config.srcDir + '/vendor/npm/gemini-scrollbar/*.js',
       config.srcDir + '/vendor/npm/gemini-scrollbar/*.js',
     ], function(err, watcher) {
     ], function(err, watcher) {