grid: row work

public/app/core/constants.ts

 
 
-export const GRID_CELL_HEIGHT = 20;
+export const GRID_CELL_HEIGHT = 30;
 export const GRID_CELL_VMARGIN = 10;
 export const GRID_CELL_VMARGIN = 10;
 export const GRID_COLUMN_COUNT = 24;
 export const GRID_COLUMN_COUNT = 24;
 export const REPEAT_DIR_VERTICAL = 'v';
 export const REPEAT_DIR_VERTICAL = 'v';

public/app/features/dashboard/dashgrid/DashboardRow.tsx

@@ -36,19 +36,20 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
   render() {
   render() {
     const classes = classNames({'dashboard-row': true, 'dashboard-row--collapse': this.state.collapse});
     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 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 (
     return (
       <div className={classes}>
       <div className={classes}>
         <a className="dashboard-row__title pointer" onClick={this.toggle}>
         <a className="dashboard-row__title pointer" onClick={this.toggle}>
           <i className={chevronClass} />
           <i className={chevronClass} />
           {this.props.panel.title}
           {this.props.panel.title}
+          <span className="dashboard-row__panel_count">({hiddenPanels} hidden panels)</span>
         </a>
         </a>
         <div className="dashboard-row__actions">
         <div className="dashboard-row__actions">
           <a className="pointer" onClick={this.openSettings}>
           <a className="pointer" onClick={this.openSettings}>
             <i className="fa fa-cog" />
             <i className="fa fa-cog" />
           </a>
           </a>
         </div>
         </div>
-        <div className="dashboard-row__panel_count">(0 hidden panels)</div>
         <div className="dashboard-row__drag grid-drag-handle" />
         <div className="dashboard-row__drag grid-drag-handle" />
       </div>
       </div>
     );
     );

public/app/features/dashboard/panel_model.ts

@@ -28,6 +28,7 @@ export class PanelModel {
   repeatDirection?: string;
   repeatDirection?: string;
   minSpan?: number;
   minSpan?: number;
   collapse?: boolean;
   collapse?: boolean;
+  panels?: any;
 
 
   // non persisted
   // non persisted
   fullscreen: boolean;
   fullscreen: boolean;

public/sass/components/_row.scss

 .dashboard-row {
 .dashboard-row {
   display: flex;
   display: flex;
+  align-items: center;
+
   height: 100%;
   height: 100%;
 
 
   &--collapse {
   &--collapse {
     background: $panel-bg;
     background: $panel-bg;
 
 
     .dashboard-row__panel_count {
     .dashboard-row__panel_count {
-      display: block;
+      display: inline-block;
     }
     }
 
 
     .dashboard-row__drag,
     .dashboard-row__drag,
@@ -33,8 +35,8 @@
 
 
   .fa {
   .fa {
     color: $text-muted;
     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 {
 .dashboard-row__panel_count {
+  padding-left: $spacer;
   color: $text-color-weak;
   color: $text-color-weak;
   font-style: italic;
   font-style: italic;
   font-size: $font-size-sm;
   font-size: $font-size-sm;