From 8a715cd122082b2f22f7a4775dee125e367d5764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 25 Oct 2016 10:47:13 +0200
Subject: [PATCH] using gf-form in row header

---
 public/app/features/dashboard/row/row.html | 115 +++++++++++----------
 public/app/features/dashboard/row/row.ts   |   8 ++
 public/sass/_variables.scss                |   2 +-
 public/sass/components/_gf-form.scss       |   5 +-
 public/sass/pages/_dashboard.scss          |   4 +-
 5 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html
index fbd1695c0a5..bdff7c8506e 100644
--- a/public/app/features/dashboard/row/row.html
+++ b/public/app/features/dashboard/row/row.html
@@ -1,71 +1,82 @@
-<div class="dash-row-handle-column" ng-if="ctrl.dashboard.editMode">
+<div class="dash-row-handle-column" ng-show="ctrl.dashboard.editMode">
 	<div class="dash-row-move-handle">
 	</div>
-
 	<div class="dash-row-resize-handle">
 	</div>
 </div>
 
 <div class="dash-row-content">
 
-	<div class="dash-row-header pointer" ng-if="ctrl.dashboard.editMode">
-		<div class="dash-row-header-title" ng-bind="ctrl.row.title | interpolateTemplateVars:this"></div>
-		<div class="dash-row-header-settings dropdown">
-			<a class="pointer dropdown-toggle" data-toggle="dropdown">
-				<i class="fa fa-plus-circle"></i>
-			</a>
-			<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
-				<li class="dropdown-submenu">
-					<a href="javascript:void(0);">Add Panel</a>
-					<ul class="dropdown-menu">
-						<li bindonce ng-repeat="(key, value) in ctrl.panelPlugins">
-							<a ng-click="ctrl.addPanelDefault(key)" bo-text="value.name"></a>
-						</li>
-					</ul>
-				</li>
-				<li class="dropdown-submenu">
-					<a href="javascript:void(0);">Set height</a>
-					<ul class="dropdown-menu">
-						<li><a ng-click="setHeight('25px')">25 px</a></li>
-						<li><a ng-click="setHeight('100px')">100 px</a></li>
-						<li><a ng-click="setHeight('150px')">150 px</a></li>
-						<li><a ng-click="setHeight('200px')">200 px</a></li>
-						<li><a ng-click="setHeight('250px')">250 px</a></li>
-						<li><a ng-click="setHeight('300px')">300 px</a></li>
-						<li><a ng-click="setHeight('350px')">350 px</a></li>
-						<li><a ng-click="setHeight('450px')">450 px</a></li>
-						<li><a ng-click="setHeight('500px')">500 px</a></li>
-						<li><a ng-click="setHeight('600px')">600 px</a></li>
-						<li><a ng-click="setHeight('700px')">700 px</a></li>
-					</ul>
-				</li>
-				<!-- <li class="dropdown&#45;submenu"> -->
-				<!-- 	<a href="javascript:void(0);">Move</a> -->
-				<!-- 	<ul class="dropdown&#45;menu"> -->
-				<!-- 		<li><a ng&#45;click="moveRow('up')">Up</a></li> -->
-				<!-- 		<li><a ng&#45;click="moveRow('down')">Down</a></li> -->
-				<!-- 		<li><a ng&#45;click="moveRow('top')">To top</a></li> -->
-				<!-- 		<li><a ng&#45;click="moveRow('bottom')">To Bottom</a></li> -->
-				<!-- 	</ul> -->
-				<!-- </li> -->
-				<li>
-					<a ng-click="ctrl.editRow()">Row options</a>
-				</li>
-				<li>
-					<a ng-click="ctrl.deleteRow()">Delete row</a>
-				</li>
-			</ul>
-		</div>
-		<div class="dash-row-header-chevron" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
+	<div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
+    <div class="gf-form gf-form--grow">
+      <input class="gf-form-input width-10" ng-model="ctrl.row.title"></input>
+
+      <label class="btn gf-form-btn btn-inverse">
+        Row Options <i class="fa fa-caret-down"></i>
+      </label>
+
+      <label class="btn gf-form-btn btn-inverse">
+        Add Panel <i class="fa fa-plus"></i>
+      </label>
+
+
+    <!--   <div class="dash&#45;row&#45;header&#45;settings dropdown"> -->
+		<!-- 	<a class="pointer dropdown&#45;toggle" data&#45;toggle="dropdown"> -->
+		<!-- 		<i class="fa fa&#45;plus&#45;circle"></i> -->
+		<!-- 	</a> -->
+		<!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;right" role="menu" aria&#45;labelledby="drop1"> -->
+		<!-- 		<li class="dropdown&#45;submenu"> -->
+		<!-- 			<a href="javascript:void(0);">Add Panel</a> -->
+		<!-- 			<ul class="dropdown&#45;menu"> -->
+		<!-- 				<li bindonce ng&#45;repeat="(key, value) in ctrl.panelPlugins"> -->
+		<!-- 					<a ng&#45;click="ctrl.addPanelDefault(key)" bo&#45;text="value.name"></a> -->
+		<!-- 				</li> -->
+		<!-- 			</ul> -->
+		<!-- 		</li> -->
+		<!-- 		<li class="dropdown&#45;submenu"> -->
+		<!-- 			<a href="javascript:void(0);">Set height</a> -->
+		<!-- 			<ul class="dropdown&#45;menu"> -->
+		<!-- 				<li><a ng&#45;click="setHeight('25px')">25 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('100px')">100 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('150px')">150 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('200px')">200 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('250px')">250 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('300px')">300 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('350px')">350 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('450px')">450 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('500px')">500 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('600px')">600 px</a></li> -->
+		<!-- 				<li><a ng&#45;click="setHeight('700px')">700 px</a></li> -->
+		<!-- 			</ul> -->
+		<!-- 		</li> -->
+		<!-- 		<!&#45;&#45; <li class="dropdown&#38;#45;submenu"> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; 	<a href="javascript:void(0);">Move</a> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; 	<ul class="dropdown&#38;#45;menu"> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('up')">Up</a></li> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('down')">Down</a></li> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('top')">To top</a></li> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; 		<li><a ng&#38;#45;click="moveRow('bottom')">To Bottom</a></li> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; 	</ul> &#45;&#45;> -->
+		<!-- 		<!&#45;&#45; </li> &#45;&#45;> -->
+		<!-- 		<li> -->
+		<!-- 			<a ng&#45;click="ctrl.editRow()">Row options</a> -->
+		<!-- 		</li> -->
+		<!-- 		<li> -->
+		<!-- 			<a ng&#45;click="ctrl.deleteRow()">Delete row</a> -->
+		<!-- 		</li> -->
+		<!-- 	</ul> -->
+		<!-- </div> -->
+		<div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
 			<a class="pointer">
 				<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
 				<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
 			</a>
 		</div>
 	</div>
+  </div>
 
 	<div class="panels-wrapper" ng-if="!ctrl.row.collapse">
-		<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
+		<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width ui-on-drag-enter="ctrl.onDragEnter($data)">
 			<plugin-component type="panel" class="panel-margin">
 			</plugin-component>
 		</div>
diff --git a/public/app/features/dashboard/row/row.ts b/public/app/features/dashboard/row/row.ts
index 26c61f4a3b0..cf7dc9dce64 100644
--- a/public/app/features/dashboard/row/row.ts
+++ b/public/app/features/dashboard/row/row.ts
@@ -1,6 +1,9 @@
 ///<reference path="../../../headers/common.d.ts" />
 
 import _ from 'lodash';
+import $ from 'jquery';
+import angular from 'angular';
+
 import config from 'app/core/config';
 import {coreModule, appEvents} from 'app/core/core';
 
@@ -12,6 +15,7 @@ export class DashRowCtrl {
    /** @ngInject */
   constructor(private $scope, private $rootScope, private $timeout) {
     this.panelPlugins = config.panels;
+    this.row.title = this.row.title || 'Row title';
   }
 
   onDrop(panelId, dropTarget) {
@@ -32,6 +36,10 @@ export class DashRowCtrl {
     this.$rootScope.$broadcast('render');
   }
 
+  onDragEnter(data) {
+    console.log('drag enter', data);
+  }
+
   addPanel(panel) {
     this.dashboard.addPanel(panel, this.row);
     this.$timeout(() => {
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index e4f8c642a4b..186b22f2390 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -161,7 +161,7 @@ $table-sm-cell-padding:         .3rem !default;
 // Forms
 $input-padding-x:                .75rem !default;
 $input-padding-y:                .6rem !default;
-$input-line-height:              1.42rem !default;
+$input-line-height:              1.35rem !default;
 
 $input-btn-border-width:         1px;
 $input-border-radius:            0 $border-radius $border-radius 0 !default;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index b1df60426d7..c22418d70da 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -62,7 +62,7 @@ $gf-form-margin: 0.25rem;
 
   &--grow {
     flex-grow: 1;
-    min-height: 2.70rem;
+    min-height: 2.60rem;
   }
 }
 
@@ -196,6 +196,9 @@ $gf-form-margin: 0.25rem;
   margin-right: $gf-form-margin;
   line-height: $input-line-height;
   font-size: $font-size-sm;
+  box-shadow: none;
+  border: $input-btn-border-width solid transparent;
+  @include border-radius($label-border-radius-sm);
 
   flex-shrink: 0;
   flex-grow: 0;
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 273aa2c0bfd..5e7c37c1e10 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -210,7 +210,7 @@ div.flot-text {
 }
 
 .dash-row-handle-column {
-  width: 2rem;
+  min-width: 1.5rem;
   background: $input-label-bg;
   display: flex;
   flex-direction: column;
@@ -235,8 +235,8 @@ div.flot-text {
   flex-direction: row;
   text-align: left;
   align-items: center;
-  background: $input-label-bg;
   margin-right: $panel-margin;
+  margin-left: $gf-form-margin;
 }
 
 .dash-row-header-title {