ux(): edit mode polish

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>
 

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
       //});

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>

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 {