From e215ba821c055e80936e1fb6efd0ada460690636 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 28 Oct 2016 14:13:11 +0200
Subject: [PATCH] ux(): edit mode polish

---
 .../app/features/dashboard/row/add_panel.html |  5 ++---
 .../app/features/dashboard/row/add_panel.ts   | 10 ++++++++--
 .../app/features/dashboard/row/options.html   |  6 +++---
 public/sass/pages/_dashboard.scss             | 20 ++++++++++++++++---
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/public/app/features/dashboard/row/add_panel.html b/public/app/features/dashboard/row/add_panel.html
index d4876b0070d..ee4a7e32570 100644
--- a/public/app/features/dashboard/row/add_panel.html
+++ b/public/app/features/dashboard/row/add_panel.html
@@ -1,9 +1,8 @@
 <div class="dash-row-add-panel">
 
-  <div class="gf-form-inline">
+  <div class="gf-form-inline dash-row-add-panel-form">
     <div class="gf-form">
-      <!-- <span class="gf&#45;form&#45;label">Panel search</span> -->
-      <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
+      <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter" ng-blur="ctrl.panelSearchBlur()"></input>
     </div>
   </div>
 
diff --git a/public/app/features/dashboard/row/add_panel.ts b/public/app/features/dashboard/row/add_panel.ts
index b056ed00706..8493c00725a 100644
--- a/public/app/features/dashboard/row/add_panel.ts
+++ b/public/app/features/dashboard/row/add_panel.ts
@@ -27,7 +27,7 @@ export class AddPanelCtrl {
 
   keyDown(evt) {
     if (evt.keyCode === 27) {
-      this.rowCtrl.showOptions = false;
+      this.rowCtrl.dropView = 0;
       return;
     }
 
@@ -47,6 +47,12 @@ export class AddPanelCtrl {
     }
   }
 
+  panelSearchBlur() {
+    this.$timeout(() => {
+      this.rowCtrl.dropView = 0;
+    }, 400);
+  }
+
   moveSelection(direction) {
     var max = this.panelHits.length;
     var newIndex = this.activeIndex + direction;
@@ -90,7 +96,7 @@ export class AddPanelCtrl {
     this.rowCtrl.dropView = 0;
     this.dashboard.addPanel(panel, this.row);
     this.$timeout(() => {
-      this.$rootScope.broadcast('render');
+      this.$rootScope.$broadcast('render');
       //this.$rootScope.appEvent('panel-change-view', {
       //  fullscreen: true, edit: true, panelId: panel.id
       //});
diff --git a/public/app/features/dashboard/row/options.html b/public/app/features/dashboard/row/options.html
index 249652bb448..3c7aa609cc4 100644
--- a/public/app/features/dashboard/row/options.html
+++ b/public/app/features/dashboard/row/options.html
@@ -1,9 +1,9 @@
 <div class="dash-row-options">
 	<div class="gf-form-group section">
-		<h5 class="section-heading">Options</h5>
+		<!-- <h5 class="section&#45;heading">Options</h5> -->
 		<div class="gf-form-inline">
 			<div class="gf-form">
-				<span class="gf-form-label width-6">Title</span>
+				<span class="gf-form-label width-6">Row Title</span>
 				<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
 			</div>
 			<div class="gf-form">
@@ -24,7 +24,7 @@
 	</div>
 
 	<div class="gf-form-group section">
-		<h5 class="section-heading">Row Templating</h5>
+		<!-- <h5 class="section&#45;heading">Row Templating</h5> -->
 
 		<div class="gf-form">
 			<span class="gf-form-label">Repeat Row</span>
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index bc3a66f10f0..6b75f360db6 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -216,13 +216,20 @@ div.flot-text {
   flex-direction: row;
   margin-right: $panel-margin;
   margin-left: 0;
-  border-bottom: 1px solid $dark-4;
+  // border-bottom: 1px solid $dark-4;
 
   &:hover {
     .dash-row-header-actions {
       display: block;
     }
   }
+
+  .h1 { font-size: $font-size-h1; }
+  .h2 { font-size: $font-size-h2; }
+  .h3 { font-size: $font-size-h3; }
+  .h4 { font-size: $font-size-h4; }
+  .h5 { font-size: $font-size-h5; }
+  .h6 { font-size: $font-size-h6; }
 }
 
 .dash-row-header-title {
@@ -280,7 +287,6 @@ div.flot-text {
   .dash-row {
   }
   .panels-wrapper {
-    padding: $panel-margin*2 0 0 $panel-margin;
   }
 }
 
@@ -302,7 +308,8 @@ div.flot-text {
 
 .dash-row-options {
   background: $panel-bg;
-  margin: 0 0 $panel-margin 0;
+  border: $panel-border;
+  margin: 0 0 $panel-margin*2 $panel-margin;
   padding: $spacer*1.5;
 }
 
@@ -311,6 +318,13 @@ div.flot-text {
   padding: $panel-margin;
   display: flex;
   align-items: flex-start;
+  position: relative;
+}
+
+.dash-row-add-panel-form {
+  position: absolute;
+  width: 200px;
+  top: -34px;
 }
 
 .add-panel-panels-scroll {