From a9797674393f8a59659ff58e6df2bf7613a19efb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 16 Oct 2017 10:58:08 +0200
Subject: [PATCH] grid: minor progress on new row concept

---
 .../dashboard/dashgrid/DashboardRow.tsx       | 21 ++++-----
 .../app/features/dashboard/dashnav/dashnav.ts |  5 +++
 public/sass/components/_row.scss              | 43 +++++--------------
 3 files changed, 23 insertions(+), 46 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx
index d5723ccfe07..df803f000a9 100644
--- a/public/app/features/dashboard/dashgrid/DashboardRow.tsx
+++ b/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" />
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index 20acfae590f..a5f7bc549ef 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/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},
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 2305f103650..78fceb5478d 100644
--- a/public/sass/components/_row.scss
+++ b/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;
+
+  .fa {
+    color: $text-muted;
+    font-size: $font-size-sm;
+    padding-right: 0.5rem;
+  }
 }
 
-.dashboard-row__actions-left {
-  position: absolute;
-  left: -23px;
-  font-size: $font-size-xs;
+.dashboard-row__actions {
   color: $text-muted;
-  top: 1px;
   visibility: hidden;
   opacity: 0;
-}
-
-.dashboard-row__actions-right {
-  position: absolute;
-  right: -40px;
-  padding-right: 1rem;
-  font-size: $font-size-sm;
-  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;