From a7e8e64d7839135f856ef3a2ce24629333ebfb0e Mon Sep 17 00:00:00 2001
From: Matt Toback <matt@raintank.io>
Date: Fri, 15 Apr 2016 19:52:18 -0400
Subject: [PATCH] The beginnings of the build mode and rows

---
 public/app/core/directives/dash_class.js      |  2 -
 .../features/dashboard/dashnav/dashnav.html   |  4 ++
 public/app/features/dashboard/keybindings.js  |  2 +-
 .../features/dashboard/partials/settings.html |  5 +--
 public/app/features/dashboard/rowCtrl.js      |  5 +++
 public/app/partials/dashboard.html            |  9 ++--
 public/sass/_variables.dark.scss              |  4 ++
 public/sass/_variables.light.scss             |  4 ++
 public/sass/pages/_dashboard.scss             | 42 ++++++++++++++++---
 9 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js
index 13911712e37..91836e34150 100644
--- a/public/app/core/directives/dash_class.js
+++ b/public/app/core/directives/dash_class.js
@@ -10,8 +10,6 @@ function (_, $, coreModule) {
     return {
       link: function($scope, elem) {
 
-        var lastHideControlsVal;
-
         $scope.onAppEvent('panel-fullscreen-enter', function() {
           elem.toggleClass('panel-in-fullscreen', true);
         });
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
index 9afd152d8aa..927a3fd7d3b 100644
--- a/public/app/features/dashboard/dashnav/dashnav.html
+++ b/public/app/features/dashboard/dashnav/dashnav.html
@@ -51,6 +51,10 @@
 			<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
 		</ul>
 	</li>
+	<li>
+		<a ng-click="dashboard.editMode()"  ng-show="!dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom"><i class="fa fa-wrench"></i></a>
+		<a ng-click="!dashboard.editMode()" ng-show="dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom" style="color: #33B5E5;"><i class="fa fa-wrench fa-wrench-close" style="color: #33B5E5;"></i> Leave Build Mode </a>
+	</li>
 </ul>
 
 <ul class="nav dash-playlist-actions" ng-if="playlistSrv">
diff --git a/public/app/features/dashboard/keybindings.js b/public/app/features/dashboard/keybindings.js
index 332a1e3a996..2ce1d27e65e 100644
--- a/public/app/features/dashboard/keybindings.js
+++ b/public/app/features/dashboard/keybindings.js
@@ -43,7 +43,7 @@ function(angular, $) {
         scope.broadcastRefresh();
       }, { inputDisabled: true });
 
-      keyboardManager.bind('ctrl+e', function() {
+      keyboardManager.bind('ctrl+b', function() {
         scope.dashboard.editMode = !scope.dashboard.editMode;
       }, { inputDisabled: true });
 
diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html
index 56fd57a423f..a336ea7e6f5 100644
--- a/public/app/features/dashboard/partials/settings.html
+++ b/public/app/features/dashboard/partials/settings.html
@@ -49,8 +49,8 @@
                         label-class="width-10">
         </gf-form-switch>
         <gf-form-switch class="gf-form"
-                        label="Edit Mode"
-                        tooltip="Enable edit mode. Shortcut: CTRL+E"
+                        label="Build Mode"
+                        tooltip="Enable build mode. Shortcut: CTRL+B"
                         checked="dashboard.editMode"
                         label-class="width-10">
         </gf-form-switch>
@@ -125,4 +125,3 @@
 		</div>
 	</div>
 </div>
-
diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js
index 5607f1eecac..3dd145a463e 100644
--- a/public/app/features/dashboard/rowCtrl.js
+++ b/public/app/features/dashboard/rowCtrl.js
@@ -32,6 +32,11 @@ function (angular, _, config) {
       row.collapse = row.collapse ? false : true;
     };
 
+    $scope.settingsHover = function(row) {
+        // Shows/hides the settings button on hover
+      return row.hoverSettings = ! row.hoverSettings;
+    };
+
     $scope.addPanel = function(panel) {
       $scope.dashboard.addPanel(panel, $scope.row);
     };
diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html
index 3e47370dd88..1c92f85cf63 100644
--- a/public/app/partials/dashboard.html
+++ b/public/app/partials/dashboard.html
@@ -12,10 +12,10 @@
 		<div class="clearfix"></div>
 
 		<div class="dash-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
-			<div class="dash-row-header" ng-if="row.showTitle || dashboard.editMode">
+			<div class="dash-row-header pointer" ng-click="toggleRow(row)" ng-if="row.showTitle || dashboard.editMode" ng-mouseenter="settingsHover(row)" ng-mouseleave="settingsHover(row)">
 				<div class="dash-row-header-title" ng-bind="row.title | interpolateTemplateVars:this"></div>
 				<div class="dash-row-header-settings dropdown">
-					<a class="pointer dropdown-toggle" data-toggle="dropdown">
+					<a class="pointer dropdown-toggle" data-toggle="dropdown" ng-show="row.hoverSettings || dashboard.editMode">
 						<i class="fa fa-cog"></i>
 					</a>
 					<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
@@ -63,9 +63,10 @@
 						</li>
 					</ul>
 				</div>
-				<div class="dash-row-header-collapse-toggle">
+				<div class="dash-row-header-chevron">
 					<a class="pointer" ng-click="row.collapse = !row.collapse">
-						<i class="fa fa-chevron-down"></i>
+						<i class="fa fa-chevron-down" ng-show="!row.collapse"></i>
+						<i class="fa fa-chevron-right" ng-show="row.collapse"></i>
 					</a>
 				</div>
 			</div>
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 560f2d2dab1..7013753c8a9 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -268,3 +268,7 @@ $checkboxImageUrl: '../img/checkbox.png';
 $card-background: linear-gradient(135deg, #2f2f2f, #262626);
 $card-background-hover: linear-gradient(135deg, #343434, #262626);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
+
+// dash row
+$dash-row-background: linear-gradient(135deg, #262626, #292929);
+$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index a7b5c72af2b..46208330375 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -292,3 +292,7 @@ $checkboxImageUrl: '../img/checkbox_white.png';
 $card-background: linear-gradient(135deg, $gray-5, $gray-6);
 $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
+
+// dash row
+$dash-row-background: linear-gradient(135deg, $gray-5, $gray-6);
+$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 435734b8198..b045e0483de 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -217,32 +217,62 @@ div.flot-text {
   display: flex;
   flex-direction: row;
   text-align: left;
+  align-items: center;
 }
 
 .dash-row-header-title {
   font-size: $font-size-h3;
   font-family: $headings-font-family;
-  padding: $spacer $spacer*2;
+  padding: $spacer $spacer $spacer $spacer/2;
 }
 
 .dash-row-header-settings {
-  display: none;
+  display: block;
+}
+
+.dash-row-header-chevron {
+  flex-grow: 100;
+  text-align: right;
+  margin-right: 0.6rem;
 }
 
 .dash-row-header-collapse-toggle {
   flex-grow: 100;
   text-align: right;
   display: none;
+  margin-right: $spacer/2;
 }
 
 .dash-edit-mode {
-  .dash-row {
-    background-color: $dark-5;
-    padding: 0 $spacer $spacer $spacer;
-  }
+//   .dash-row {
+//     background: $dash-row-background;
+//     box-shadow: $dash-row-shadow;
+//     padding: 0 ($spacer/4) ($spacer/2) ($spacer/4);
+//     margin-bottom: $spacer;
+// }
+
+.dash-row {
+  background: lighten($body-bg, 1%);
+  box-shadow: inset 15px 0px 0px 0px #262626;
+  padding: 0 ($spacer/4) ($spacer/2) ($spacer*2);
+  margin-left: 5px;
+  margin-bottom: $spacer;
+}
 
   .dash-row-header-collapse-toggle,
   .dash-row-header-settings {
     display: block;
   }
 }
+
+.fa.fa-wrench-close:after {
+  content: "";
+  position: absolute;
+  width: .22rem;
+  height: 33.421356%;
+  top: 19px;
+  display: block;
+  background: #33B5E5;
+  left: 181px;
+  transform: translate(-50%, 0) rotate(-45deg);
+}