From 51f55cf6f194d06478bc2d8347c48f93316c2619 Mon Sep 17 00:00:00 2001
From: Matt <matt@raintank.io>
Date: Fri, 28 Oct 2016 16:12:20 -0400
Subject: [PATCH 1/2] Beginnings of changes to row edits

---
 .../app/features/dashboard/row/options.html   |  4 +-
 public/sass/pages/_dashboard.scss             | 74 ++++++++++++++++---
 2 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/public/app/features/dashboard/row/options.html b/public/app/features/dashboard/row/options.html
index 3c7aa609cc4..c9227324001 100644
--- a/public/app/features/dashboard/row/options.html
+++ b/public/app/features/dashboard/row/options.html
@@ -1,5 +1,5 @@
 <div class="dash-row-options">
-	<div class="gf-form-group section">
+	<div class="gf-form section">
 		<!-- <h5 class="section&#45;heading">Options</h5> -->
 		<div class="gf-form-inline">
 			<div class="gf-form">
@@ -23,7 +23,7 @@
 		</div>
 	</div>
 
-	<div class="gf-form-group section">
+	<div class="gf-form section">
 		<!-- <h5 class="section&#45;heading">Row Templating</h5> -->
 
 		<div class="gf-form">
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 085036f581b..75157af77cc 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -216,6 +216,11 @@ div.flot-text {
   margin-right: $panel-margin;
   margin-left: 0;
 
+  &:hover {
+    .dash-row-header-actions {
+      display: block;
+    }
+  }
 
   .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
   .h2 { font-size: 2.4rem; line-height: 3.5rem; }
@@ -267,6 +272,9 @@ div.flot-text {
   .dash-row-header-action-show-options {
     color: $link-color;
   }
+  .dash-row-header {
+    border-bottom: none;
+  }
 }
 
 .dash-row-show-add-panel {
@@ -276,6 +284,9 @@ div.flot-text {
   .dash-row-header-action--add-panel {
     color: $link-color;
   }
+  .dash-row-header {
+    border-bottom: none;
+  }
 }
 
 .dash-row-show-title {
@@ -302,21 +313,55 @@ div.flot-text {
 .dash-edit-mode {
   .dash-row-header {
     display: flex;
-    &:hover {
-      .dash-row-header-actions {
-        display: block;
-      }
+    border-bottom: 1px solid $dark-4;
+    border-right: 1px solid $dark-4;
+    margin-right: 0;
+    .dash-row-header-actions {
+      display: block;
     }
   }
+  .dash-row-show-add-panel {
+    .dash-row-header {
+      border-bottom: none;
+    }
+   }
+  .dash-row-show-options {
+    .dash-row-header {
+      border-bottom: none;
+    }
+   }
+  .dash-row-header::after {
+    content: ' ';
+    border-top: 1px solid $dark-4;
+    width: 15px;
+    position: relative;
+  }
   .dash-row {
-    border-left: 1px solid $dark-4;
+    margin-bottom: $spacer*2;
   }
   .dash-row-header-title {
+    border-left: 1px solid $dark-4;
+  }
+  .dash-row-header-title::before {
+    content: ' ';
     border-top: 1px solid $dark-4;
+    width: 15px;
+    position: absolute;
+    margin: -9px 0 0 -9px;
   }
   .panels-wrapper {
-    margin-left: $panel-margin;
+    padding: $panel-margin*2 $panel-margin 0 $panel-margin*2;
+    border-left: 1px solid $dark-4;
+    border-right: 1px solid $dark-4;
   }
+  .panels-wrapper::after {
+      content: ' ';
+      border-bottom: 1px solid $dark-4;
+      width: 15px;
+      position: absolute;
+      margin: 0 0 0 -12px;
+    }
+
   .add-row-panel-hint {
     display: block;
   }
@@ -339,18 +384,24 @@ div.flot-text {
 }
 
 .dash-row-options {
-  background: $panel-bg;
-  border: $panel-border;
-  margin: 0 0 $panel-margin*2 $panel-margin*2;
-  padding: $spacer*1.5;
+  border-left: $panel-border;
+  border-bottom: $panel-border;
+  border-right: $panel-border;
+  margin: 0;
+  padding: $panel-margin*2;
+  box-shadow: 0px 3px 7px -3px $black;
 }
 
 .dash-row-add-panel {
+  border-left: $panel-border;
+  border-bottom: $panel-border;
+  border-right: $panel-border;
   margin: 0;
   padding: $panel-margin*2;
   // display: flex;
   // align-items: flex-start;
   // position: relative;
+  box-shadow: 0px 3px 7px -3px $black;
 }
 
 .add-panel-panels-scroll {
@@ -383,8 +434,9 @@ div.flot-text {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  font-size: $font-size-sm;
 }
 
 .add-panel-item-img {
-  width: 3rem;
+  width: 2rem;
 }

From d9f99eb5017782146896528d88aa5497a5d6bda6 Mon Sep 17 00:00:00 2001
From: Matt <matt@raintank.io>
Date: Fri, 28 Oct 2016 17:09:33 -0400
Subject: [PATCH 2/2] Added fadeIn animation to non-build mode

---
 public/sass/pages/_dashboard.scss | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 75157af77cc..a5421a6b943 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -219,6 +219,8 @@ div.flot-text {
   &:hover {
     .dash-row-header-actions {
       display: block;
+      opacity: 0;
+      animation: fadeIn 150ms linear 100ms forwards;
     }
   }
 
@@ -387,7 +389,7 @@ div.flot-text {
   border-left: $panel-border;
   border-bottom: $panel-border;
   border-right: $panel-border;
-  margin: 0;
+  margin: 0 0 $panel-margin*2 0;
   padding: $panel-margin*2;
   box-shadow: 0px 3px 7px -3px $black;
 }
@@ -396,7 +398,7 @@ div.flot-text {
   border-left: $panel-border;
   border-bottom: $panel-border;
   border-right: $panel-border;
-  margin: 0;
+  margin: 0 0 $panel-margin*2 0;
   padding: $panel-margin*2;
   // display: flex;
   // align-items: flex-start;
@@ -404,6 +406,15 @@ div.flot-text {
   box-shadow: 0px 3px 7px -3px $black;
 }
 
+.dash-edit-mode {
+  .dash-row-options {
+    margin-bottom: 0;
+  }
+  .dash-row-add-panel {
+    margin-bottom: 0;
+  }
+}
+
 .add-panel-panels-scroll {
   width: 100%;
   overflow: hidden;
@@ -440,3 +451,16 @@ div.flot-text {
 .add-panel-item-img {
   width: 2rem;
 }
+
+// Animations
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+