grid: minor progress on new row concept

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

@@ -19,20 +19,15 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
 
   render() {
     return (
-      <div>
-        <div className="dashboard-row__center">
-          <div className="dashboard-row__actions-left">
-            <i className="fa fa-chevron-down" />
-            <i className="fa fa-chevron-right" />
-          </div>
-          <a className="dashboard-row__title pointer" onClick={this.toggle}>
-            <span className="dashboard-row__title-text">{this.props.panel.title}</span>
+      <div className="dashboard-row">
+        <a className="dashboard-row__title pointer" onClick={this.toggle}>
+          <i className="fa fa-chevron-down" />
+          {this.props.panel.title}
+        </a>
+        <div className="dashboard-row__actions">
+          <a className="pointer" onClick={this.openSettings}>
+            <i className="fa fa-cog" />
           </a>
-          <div className="dashboard-row__actions-right">
-            <a className="pointer" onClick={this.openSettings}>
-              <i className="fa fa-cog" />
-            </a>
-          </div>
         </div>
         <div className="dashboard-row__panel_count">(0 hidden panels)</div>
         <div className="dashboard-row__drag grid-drag-handle" />

public/app/features/dashboard/dashnav/dashnav.ts

@@ -146,6 +146,11 @@ export class DashNavCtrl {
     }
 
     addPanel() {
+      if (this.dashboard.panels[0].type === 'add-panel') {
+        this.dashboard.removePanel(this.dashboard.panels[0]);
+        return;
+      }
+
       this.dashboard.addPanel({
         type: 'add-panel',
         gridPos: {x: 0, y: 0, w: 12, h: 9, static: true},

public/sass/components/_row.scss

@@ -2,11 +2,7 @@ $dashboard-row-height: 30px;
 
 .dashboard-row {
   display: flex;
-  height: $dashboard-row-height;
-  line-height: $dashboard-row-height;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
+  height: 100%;
 
   &--collapse {
     background: $panel-bg;
@@ -23,8 +19,7 @@ $dashboard-row-height: 30px;
   }
 
   &:hover {
-    .dashboard-row__actions-left,
-    .dashboard-row__actions-right {
+    .dashboard-row__actions {
       visibility: visible;
       opacity: 1;
       transition: opacity 200ms ease-in-out 100ms;
@@ -32,38 +27,24 @@ $dashboard-row-height: 30px;
   }
 }
 
-.dashboard-row__center {
-  position: relative;
-}
-
 .dashboard-row__title {
-  @include brand-bottom-border();
-
-  position: relative;
   flex-grow: 0;
   font-size: 1.15rem;
   font-weight: $font-weight-semi-bold;
   padding: 0rem 1rem 0.3rem 1rem;
-}
+  color: $text-color;
 
-.dashboard-row__actions-left {
-  position: absolute;
-  left: -23px;
-  font-size: $font-size-xs;
-  color: $text-muted;
-  top: 1px;
-  visibility: hidden;
-  opacity: 0;
+  .fa {
+    color: $text-muted;
+    font-size: $font-size-sm;
+    padding-right: 0.5rem;
+  }
 }
 
-.dashboard-row__actions-right {
-  position: absolute;
-  right: -40px;
-  padding-right: 1rem;
-  font-size: $font-size-sm;
+.dashboard-row__actions {
+  color: $text-muted;
   visibility: hidden;
   opacity: 0;
-  top: 0px;
 
   a {
     color: $text-color-weak;
@@ -74,10 +55,6 @@ $dashboard-row-height: 30px;
   }
 }
 
-.dashboard-row__title-text {
-  color: $text-color;
-}
-
 .dashboard-row__panel_count {
   color: $text-color-weak;
   font-style: italic;