From e375159eecc681f946694e9a3dce008d01d898eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 17 Oct 2017 12:04:18 +0200
Subject: [PATCH] grid: row work

---
 public/app/core/constants.ts                            | 2 +-
 public/app/features/dashboard/dashgrid/DashboardRow.tsx | 3 ++-
 public/app/features/dashboard/panel_model.ts            | 1 +
 public/sass/components/_row.scss                        | 9 ++++++---
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/public/app/core/constants.ts b/public/app/core/constants.ts
index 93bff05689e..5a0a8521758 100644
--- a/public/app/core/constants.ts
+++ b/public/app/core/constants.ts
@@ -1,5 +1,5 @@
 
-export const GRID_CELL_HEIGHT = 20;
+export const GRID_CELL_HEIGHT = 30;
 export const GRID_CELL_VMARGIN = 10;
 export const GRID_COLUMN_COUNT = 24;
 export const REPEAT_DIR_VERTICAL = 'v';
diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx
index 22a7a287dfe..8abe23cf294 100644
--- a/public/app/features/dashboard/dashgrid/DashboardRow.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardRow.tsx
@@ -36,19 +36,20 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
   render() {
     const classes = classNames({'dashboard-row': true, 'dashboard-row--collapse': this.state.collapse});
     const chevronClass = classNames({'fa': true, 'fa-chevron-down': !this.state.collapse, 'fa-chevron-right': this.state.collapse});
+    const hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0;
 
     return (
       <div className={classes}>
         <a className="dashboard-row__title pointer" onClick={this.toggle}>
           <i className={chevronClass} />
           {this.props.panel.title}
+          <span className="dashboard-row__panel_count">({hiddenPanels} hidden panels)</span>
         </a>
         <div className="dashboard-row__actions">
           <a className="pointer" onClick={this.openSettings}>
             <i className="fa fa-cog" />
           </a>
         </div>
-        <div className="dashboard-row__panel_count">(0 hidden panels)</div>
         <div className="dashboard-row__drag grid-drag-handle" />
       </div>
     );
diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts
index e30be05e76e..2c9b11b7ffc 100644
--- a/public/app/features/dashboard/panel_model.ts
+++ b/public/app/features/dashboard/panel_model.ts
@@ -28,6 +28,7 @@ export class PanelModel {
   repeatDirection?: string;
   minSpan?: number;
   collapse?: boolean;
+  panels?: any;
 
   // non persisted
   fullscreen: boolean;
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index de743112b3e..f341e0be940 100644
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -1,12 +1,14 @@
 .dashboard-row {
   display: flex;
+  align-items: center;
+
   height: 100%;
 
   &--collapse {
     background: $panel-bg;
 
     .dashboard-row__panel_count {
-      display: block;
+      display: inline-block;
     }
 
     .dashboard-row__drag,
@@ -33,8 +35,8 @@
 
   .fa {
     color: $text-muted;
-    font-size: $font-size-sm;
-    padding-right: 0.5rem;
+    font-size: $font-size-xs;
+    padding: 0 0.5rem;
   }
 }
 
@@ -55,6 +57,7 @@
 }
 
 .dashboard-row__panel_count {
+  padding-left: $spacer;
   color: $text-color-weak;
   font-style: italic;
   font-size: $font-size-sm;