The beginnings of the build mode and rows

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

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">

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

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>
-

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

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>

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

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

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