From f1a44ad0903be93fd86061a72bd2f37b2c410db1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 28 Oct 2016 13:36:27 +0200
Subject: [PATCH] ux(): progress on row ux

---
 .../app/features/dashboard/row/add_panel.html | 45 +------------
 .../app/features/dashboard/row/options.html   | 67 +++++++++----------
 public/app/features/dashboard/row/row.ts      | 19 ++++++
 public/app/partials/dashboard.html            |  6 +-
 public/sass/pages/_dashboard.scss             | 35 ++++++----
 5 files changed, 80 insertions(+), 92 deletions(-)

diff --git a/public/app/features/dashboard/row/add_panel.html b/public/app/features/dashboard/row/add_panel.html
index 32c198258c3..d4876b0070d 100644
--- a/public/app/features/dashboard/row/add_panel.html
+++ b/public/app/features/dashboard/row/add_panel.html
@@ -1,9 +1,9 @@
-<div class="dash-row-options">
+<div class="dash-row-add-panel">
 
   <div class="gf-form-inline">
     <div class="gf-form">
-      <span class="gf-form-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()"></input>
+      <!-- <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>
     </div>
   </div>
 
@@ -17,42 +17,3 @@
   </div>
 
 </div>
-
-<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
-  <div class="gf-form-group">
-    <h5 class="section-heading">Options</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <span class="gf-form-label width-6">Title</span>
-        <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-6">Size</label>
-        <div class="gf-form-select-wrapper">
-          <select class="input-small gf-form-input" ng-model="ctrl.row.titleSize" ng-options="f for f in ctrl.fontSizes"></select>
-        </div>
-      </div>
-      <gf-form-switch class="gf-form" label="Show" checked="ctrl.row.showTitle">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <span class="gf-form-label width-6">Height</span>
-        <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.height'></input>
-      </div>
-    </div>
-  </div>
-
-  <h5 class="section-heading">Row Templating</h5>
-
-  <div class="gf-form-group">
-    <div class="gf-form">
-      <span class="gf-form-label">Repeat Row</span>
-      <div class="gf-form-select-wrapper max-width-10">
-        <select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
-          <option value=""></option>
-      </div>
-    </div>
-  </div>
-</div>
-
diff --git a/public/app/features/dashboard/row/options.html b/public/app/features/dashboard/row/options.html
index c4b38806c86..249652bb448 100644
--- a/public/app/features/dashboard/row/options.html
+++ b/public/app/features/dashboard/row/options.html
@@ -1,39 +1,38 @@
 <div class="dash-row-options">
+	<div class="gf-form-group section">
+		<h5 class="section-heading">Options</h5>
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<span class="gf-form-label width-6">Title</span>
+				<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
+			</div>
+			<div class="gf-form">
+				<label class="gf-form-label width-6">Size</label>
+				<div class="gf-form-select-wrapper">
+					<select class="input-small gf-form-input" ng-model="ctrl.row.titleSize" ng-options="f for f in ctrl.fontSizes"></select>
+				</div>
+			</div>
+			<gf-form-switch class="gf-form" label="Show" checked="ctrl.row.showTitle">
+			</gf-form-switch>
+		</div>
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<span class="gf-form-label width-6">Height</span>
+				<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.height'></input>
+			</div>
+		</div>
+	</div>
 
-  <div class="gf-form-group">
-    <h5 class="section-heading">Options</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <span class="gf-form-label width-6">Title</span>
-        <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-6">Size</label>
-        <div class="gf-form-select-wrapper">
-          <select class="input-small gf-form-input" ng-model="ctrl.row.titleSize" ng-options="f for f in ctrl.fontSizes"></select>
-        </div>
-      </div>
-      <gf-form-switch class="gf-form" label="Show" checked="ctrl.row.showTitle">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <span class="gf-form-label width-6">Height</span>
-        <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.height'></input>
-      </div>
-    </div>
-  </div>
+	<div class="gf-form-group section">
+		<h5 class="section-heading">Row Templating</h5>
 
-  <h5 class="section-heading">Row Templating</h5>
-
-  <div class="gf-form-group">
-    <div class="gf-form">
-      <span class="gf-form-label">Repeat Row</span>
-      <div class="gf-form-select-wrapper max-width-10">
-        <select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
-          <option value=""></option>
-      </div>
-    </div>
-  </div>
+		<div class="gf-form">
+			<span class="gf-form-label">Repeat Row</span>
+			<div class="gf-form-select-wrapper max-width-10">
+				<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
+					<option value=""></option>
+			</div>
+		</div>
+	</div>
 </div>
 
diff --git a/public/app/features/dashboard/row/row.ts b/public/app/features/dashboard/row/row.ts
index 2c234512c33..2a873f7a274 100644
--- a/public/app/features/dashboard/row/row.ts
+++ b/public/app/features/dashboard/row/row.ts
@@ -183,3 +183,22 @@ coreModule.directive('panelDropZone', function($timeout) {
     });
   };
 });
+
+coreModule.directive('rowHeight', function() {
+  return function(scope, element) {
+    scope.$watchGroup(['row.collapse', 'row.height'], function() {
+      element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height });
+    });
+
+    scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
+      var hasPanel = _.find(scope.row.panels, {id: info.panelId});
+      if (!hasPanel) {
+        element.hide();
+      }
+    });
+
+    scope.onAppEvent('panel-fullscreen-exit', function() {
+      element.show();
+    });
+  };
+});
diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html
index 8721e411b68..b605c736467 100644
--- a/public/app/partials/dashboard.html
+++ b/public/app/partials/dashboard.html
@@ -1,8 +1,7 @@
-<div dash-class ng-if="dashboard">
+<div dash-class ng-if="dashboard" >
 	<dashnav></dashnav>
 
 	<div class="dashboard-container">
-
 		<div dash-editor-view></div>
 		<dashboard-search></dashboard-search>
 		<div class="clearfix"></div>
@@ -11,9 +10,8 @@
 
 		<div class="clearfix"></div>
 
-    <dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
+    <dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard" row-height>
     </dash-row>
-
 	</div>
 
 	<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 75ea1939935..bc3a66f10f0 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -206,7 +206,8 @@ div.flot-text {
 //
 
 .dash-row {
-  border-left: 1px solid $dark-2;
+  border-left: 1px solid $dark-4;
+  display: block;
 }
 
 .dash-row-header {
@@ -214,7 +215,7 @@ div.flot-text {
   display: flex;
   flex-direction: row;
   margin-right: $panel-margin;
-  margin-left: $gf-form-margin;
+  margin-left: 0;
   border-bottom: 1px solid $dark-4;
 
   &:hover {
@@ -225,13 +226,16 @@ div.flot-text {
 }
 
 .dash-row-header-title {
+  border-top: 1px solid $dark-4;
   padding: 0.6rem;
 
   .dash-row-collapse-toggle {
-    font-size: $font-size-sm;
+    padding: 0 2px;
+    font-size: $font-size-xs;
     color: $text-muted;
     position: relative;
-    left: -5px;
+    left: -3px;
+    top: -1px;
   }
 
   &:hover {
@@ -272,7 +276,6 @@ div.flot-text {
   flex: 50;
 }
 
-
 .dash-edit-mode {
   .dash-row {
   }
@@ -281,12 +284,6 @@ div.flot-text {
   }
 }
 
-.dash-row-options {
-  background: $panel-bg;
-  margin: 0 $panel-margin*2 0 $panel-margin;
-  padding: $spacer*1.5;
-}
-
 .dash-row-options-close-btn {
   float: right;
   padding: 0;
@@ -303,6 +300,19 @@ div.flot-text {
   }
 }
 
+.dash-row-options {
+  background: $panel-bg;
+  margin: 0 0 $panel-margin 0;
+  padding: $spacer*1.5;
+}
+
+.dash-row-add-panel {
+  margin: 0;
+  padding: $panel-margin;
+  display: flex;
+  align-items: flex-start;
+}
+
 .add-panel-panels-scroll {
   width: 100%;
   overflow: hidden;
@@ -314,7 +324,8 @@ div.flot-text {
 }
 
 .add-panel-item {
-  background: $input-label-bg;
+  background: $panel-bg;
+  border: $panel-border;
   padding: $spacer;
   min-width: 9rem;
   max-width: 9rem;