progress on rows as panelsW

public/app/core/components/row_ctrl.ts

@@ -0,0 +1,79 @@
+///<reference path="../../headers/common.d.ts" />
+
+import _ from 'lodash';
+
+export class DashboardRowCtrl {
+  static template = `
+    <a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
+      <span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
+    </a>
+    <a class="dashboard-row__settings pointer">
+      <i class="fa fa-cog"></i>
+    </a>
+    <div class="dashboard-row__drag panel-drag-handle" ng-if="ctrl.isCollapsed">
+    </div>
+  `;
+
+  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) {
+      let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
+
+      for (let child of this.panel.hiddenPanels) {
+        this.dashboard.panels.splice(panelIndex+1, 0, child);
+        child.y = this.panel.y+1;
+        console.log('restoring child', child);
+      }
+
+      this.panel.hiddenPanels = [];
+      this.isCollapsed = false;
+      return;
+    }
+
+    this.isCollapsed = true;
+    let foundRow = false;
+
+    for (let i = 0; i < this.dashboard.panels.length; i++) {
+      let panel = this.dashboard.panels[i];
+
+      if (panel === this.panel) {
+        console.log('found row');
+        foundRow = true;
+        continue;
+      }
+
+      if (!foundRow) {
+        continue;
+      }
+
+      if (panel.type === 'row') {
+        break;
+      }
+
+      this.panel.hiddenPanels.push(panel);
+      console.log('hiding child', panel.id);
+    }
+
+    for (let hiddenPanel of this.panel.hiddenPanels) {
+      this.dashboard.removePanel(hiddenPanel, false);
+    }
+  }
+
+  link(scope, elem) {
+    elem.addClass('dashboard-row');
+
+    scope.$watch('ctrl.isCollapsed', () => {
+      elem.toggleClass('dashboard-row--collapse', this.isCollapsed);
+    });
+  }
+}
+

public/app/core/directives/plugin_component.ts

@@ -6,62 +6,7 @@ import _ from 'lodash';
 import config from 'app/core/config';
 import coreModule from 'app/core/core_module';
 import {UnknownPanelCtrl} from 'app/plugins/panel/unknown/module';
-
-export class PanelRow {
-  static template = `
-    <h2 class="panel-header">Row</h2>
-    <a ng-click="ctrl.collapse()">Collapse</a>
-  `;
-
-  dashboard: any;
-  panel: any;
-
-  constructor(private $rootScope) {
-    console.log(this);
-    this.panel.hiddenPanels = this.panel.hiddenPanels || [];
-  }
-
-  collapse() {
-    if (this.panel.hiddenPanels.length > 0) {
-      let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
-
-      for (let child of this.panel.hiddenPanels) {
-        this.dashboard.panels.splice(panelIndex+1, 0, child);
-        child.y = this.panel.y+1;
-        console.log('restoring child', child);
-      }
-
-      this.panel.hiddenPanels = [];
-      return;
-    }
-
-    let foundRow = false;
-    for (let i = 0; i < this.dashboard.panels.length; i++) {
-      let panel = this.dashboard.panels[i];
-
-      if (panel === this.panel) {
-        console.log('found row');
-        foundRow = true;
-        continue;
-      }
-
-      if (!foundRow) {
-        continue;
-      }
-
-      if (panel.type === 'row') {
-        break;
-      }
-
-      this.panel.hiddenPanels.push(panel);
-      console.log('hiding child', panel.id);
-    }
-
-    for (let hiddenPanel of this.panel.hiddenPanels) {
-      this.dashboard.removePanel(hiddenPanel, false);
-    }
-  }
-}
+import {DashboardRowCtrl} from '../components/row_ctrl';
 
 /** @ngInject **/
 function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache) {
@@ -113,10 +58,10 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
   function loadPanelComponentInfo(scope, attrs) {
     if (scope.panel.type === 'row') {
       return $q.when({
-        name: 'panel-row',
+        name: 'dashboard-row',
         bindings: {dashboard: "=", panel: "="},
         attrs: {dashboard: "ctrl.dashboard", panel: "panel"},
-        Component: PanelRow,
+        Component: DashboardRowCtrl,
       });
     }
 

public/app/features/dashboard/model.ts

@@ -20,7 +20,7 @@ export interface Panel {
   title: string;
 }
 
-export const CELL_HEIGHT = 60;
+export const CELL_HEIGHT = 30;
 export const CELL_VMARGIN = 15;
 
 export class DashboardModel {

public/app/features/dashboard/row/row.html

@@ -1,14 +1,11 @@
-<!-- <div class="dash&#45;row&#45;header"> -->
-<!-- 	<a class="dash&#45;row&#45;header&#45;title" ng&#45;click="ctrl.toggleCollapse()"> -->
-<!-- 		<span class="dash&#45;row&#45;collapse&#45;toggle pointer"> -->
-<!-- 			<i class="fa fa&#45;chevron&#45;down" ng&#45;show="!ctrl.row.collapse"></i> -->
-<!-- 			<i class="fa fa&#45;chevron&#45;right" ng&#45;show="ctrl.row.collapse"></i> -->
-<!-- 		</span> -->
-<!-- 		<span ng&#45;class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span> -->
-<!-- 	</a> -->
-<!-- </div> -->
-<!--  -->
-<!-- <dash&#45;grid ng&#45;if="!ctrl.row.collapse" row="ctrl.row" dashboard="ctrl.dashboard"></dash&#45;grid> -->
-<!--  -->
+<div class="dash-row-header">
+	<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
+		<span class="dash-row-collapse-toggle pointer">
+			<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
+			<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
+		</span>
+		<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
+	</a>
+</div>
+
 
-<h2>Row</h2>

public/sass/components/_row.scss

@@ -1,52 +1,55 @@
 
-.dash-row {
-  display: block;
+.dashboard-row {
   display: flex;
-  flex-direction: column;
-  position: relative;
+  height: 30px;
+  align-items: center;
 
   &--collapse {
-    .dash-row-header {
-      background: $panel-bg;
-      border: $panel-border;
-      margin-bottom: $panel-margin*2;
+    background: $panel-bg;
+    border: $panel-border;
+    margin-bottom: $panel-margin*2;
+  }
+
+  &:hover {
+    background: $panel-bg;
+    .dashboard-row__chevron {
+      color: $link-color;
+    }
+    .dashboard-row__settings {
+      display: block;
     }
   }
 }
 
-.dash-row-header {
+.dashboard-row__title {
   position: relative;
+  flex-grow: 1;
   display: flex;
   flex-direction: row;
   margin-right: $panel-margin;
   margin-left: 0;
-
-  .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem; font-weight: 300; }
-  .h2 { font-size: 2.4rem; line-height: 3.5rem; font-weight: 300; }
-  .h3 { font-size: 2.0rem; line-height: 3rem; font-weight: 300;}
-  .h4 { font-size: 1.7rem; font-weight: 300;}
-  .h5 { font-size: 1.4rem; font-weight: 300;}
-  .h6 { font-size: 1rem; font-weight: 300; }
+  font-size: $font-size-lg;
+  font-weight: $font-weight-semi-bold;
+  //text-align: center;
+  display: block;
 }
 
-.dash-row-header-title {
-  padding: 0.6rem;
-  flex-grow: 1;
+.dashboard-row__chevron {
+  padding: 0 2px;
+  font-size: $font-size-xs;
+  color: $text-muted;
+  position: relative;
+  left: -3px;
+  top: -1px;
+}
 
-  .dash-row-collapse-toggle {
-    padding: 0 2px;
-    font-size: $font-size-xs;
-    color: $text-muted;
-    position: relative;
-    left: -3px;
-    top: -1px;
-  }
+.dashboard-row__settings {
+  display: none;
+}
 
-  &:hover {
-    .dash-row-collapse-toggle {
-      color: $link-color;
-    }
-  }
+.dashboard-row__title-text {
+  padding-left: 0.6rem;
+  color: $text-color;
 }
 
 .panels-wrapper {