poc(editmode): experimental edit mode

public/app/core/directives/dash_class.js

@@ -20,17 +20,13 @@ function (_, $, coreModule) {
           elem.toggleClass('panel-in-fullscreen', false);
         });
 
-        $scope.$watch('dashboard.hideControls', function() {
+        $scope.$watch('dashboard.editMode', function() {
           if (!$scope.dashboard) {
             return;
           }
 
-          var hideControls = $scope.dashboard.hideControls || $scope.playlist_active;
-
-          if (lastHideControlsVal !== hideControls) {
-            elem.toggleClass('hide-controls', hideControls);
-            lastHideControlsVal = hideControls;
-          }
+          var editMode = $scope.dashboard.editMode;
+          elem.toggleClass('dash-edit-mode', editMode === true);
         });
 
         $scope.$watch('playlistSrv', function(newValue) {

public/app/features/dashboard/keybindings.js

@@ -43,9 +43,8 @@ function(angular, $) {
         scope.broadcastRefresh();
       }, { inputDisabled: true });
 
-      keyboardManager.bind('ctrl+h', function() {
-        var current = scope.dashboard.hideControls;
-        scope.dashboard.hideControls = !current;
+      keyboardManager.bind('ctrl+e', function() {
+        scope.dashboard.editMode = !scope.dashboard.editMode;
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+s', function(evt) {

public/app/features/dashboard/partials/settings.html

@@ -49,9 +49,9 @@
                         label-class="width-10">
         </gf-form-switch>
         <gf-form-switch class="gf-form"
-                        label="Hide Controls"
-                        tooltip="Hide row controls. Shortcut: CTRL+H"
-                        checked="dashboard.hideControls"
+                        label="Edit Mode"
+                        tooltip="Enable edit mode. Shortcut: CTRL+E"
+                        checked="dashboard.editMode"
                         label-class="width-10">
         </gf-form-switch>
         <gf-form-switch class="gf-form"

public/app/partials/dashboard.html

@@ -11,99 +11,89 @@
 
 		<div class="clearfix"></div>
 
-		<div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
-			<div class="row-control">
-				<div class="row-control-inner">
-					<div class="row-close" ng-show="row.collapse" data-placement="bottom" >
-						<div class="row-close-buttons">
-							<span class="row-button" ng-click="toggleRow(row)">
-								<i bs-tooltip="'Expand row'" data-placement="right" class="fa fa-caret-left pointer" ></i>
-							</span>
-						</div>
-						<div class="row-text pointer" ng-click="toggleRow(row)" ng-bind="row.title | interpolateTemplateVars:this"></div>
-					</div>
-					<div class="row-open" ng-show="!row.collapse">
-						<div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
-							<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
-								<i class="fa fa-bars"></i>
-							</span>
-							<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
-								<li>
-									<a ng-click="toggleRow(row)">Collapse row</a>
-								</li>
-								<li class="dropdown-submenu">
-									<a href="javascript:void(0);">Add Panel</a>
-									<ul class="dropdown-menu">
-										<li bindonce ng-repeat="(key, value) in panels">
-											<a ng-click="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-submenu">
-									<a href="javascript:void(0);">Move</a>
-									<ul class="dropdown-menu">
-										<li><a ng-click="moveRow('up')">Up</a></li>
-										<li><a ng-click="moveRow('down')">Down</a></li>
-										<li><a ng-click="moveRow('top')">To top</a></li>
-										<li><a ng-click="moveRow('bottom')">To Bottom</a></li>
-									</ul>
-								</li>
-								<li>
-									<a ng-click="editRow()">Row editor</a>
-								</li>
-								<li>
-									<a ng-click="deleteRow()">Delete row</a>
+		<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-title" ng-bind="row.title | interpolateTemplateVars:this"></div>
+				<div class="dash-row-header-settings dropdown">
+					<a class="pointer dropdown-toggle" data-toggle="dropdown">
+						<i class="fa fa-cog"></i>
+					</a>
+					<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
+						<li>
+							<a ng-click="toggleRow(row)">Collapse row</a>
+						</li>
+						<li class="dropdown-submenu">
+							<a href="javascript:void(0);">Add Panel</a>
+							<ul class="dropdown-menu">
+								<li bindonce ng-repeat="(key, value) in panels">
+									<a ng-click="addPanelDefault(key)" bo-text="value.name"></a>
 								</li>
 							</ul>
-						</div>
-					</div>
+						</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-submenu">
+							<a href="javascript:void(0);">Move</a>
+							<ul class="dropdown-menu">
+								<li><a ng-click="moveRow('up')">Up</a></li>
+								<li><a ng-click="moveRow('down')">Down</a></li>
+								<li><a ng-click="moveRow('top')">To top</a></li>
+								<li><a ng-click="moveRow('bottom')">To Bottom</a></li>
+							</ul>
+						</li>
+						<li>
+							<a ng-click="editRow()">Row editor</a>
+						</li>
+						<li>
+							<a ng-click="deleteRow()">Delete row</a>
+						</li>
+					</ul>
 				</div>
+				<div class="dash-row-header-collapse-toggle">
+					<a class="pointer" ng-click="row.collapse = !row.collapse">
+						<i class="fa fa-chevron-down"></i>
+					</a>
+				</div>
+			</div>
 
-				<div class="panels-wrapper" ng-if="!row.collapse">
-					<div class="row-text pointer" ng-click="toggleRow(row)" ng-if="row.showTitle" ng-bind="row.title | interpolateTemplateVars:this">
-					</div>
-
-					<div ng-repeat="panel in row.panels track by panel.id" class="panel" ui-draggable="!dashboard.meta.fullscreen" drag="panel.id"
-						ui-on-drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
-						<plugin-component type="panel" class="panel-margin">
-						</plugin-component>
-					</div>
+			<div class="panels-wrapper" ng-if="!row.collapse">
+				<div ng-repeat="panel in row.panels track by panel.id" class="panel" ui-draggable="!dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
+					<plugin-component type="panel" class="panel-margin">
+					</plugin-component>
+				</div>
 
-					<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" data-drop="true">
-						<div class="panel-container" style="background: transparent">
-							<div style="text-align: center">
-								<em>Drop here</em>
-							</div>
+				<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" data-drop="true">
+					<div class="panel-container" style="background: transparent">
+						<div style="text-align: center">
+							<em>Drop here</em>
 						</div>
 					</div>
-
-					<div class="clearfix"></div>
 				</div>
+
+				<div class="clearfix"></div>
 			</div>
 		</div>
+	</div>
 
-		<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
-			<div class="span12" style="text-align:right;">
-				<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small">
-					<span><i class="fa fa-plus"></i> ADD ROW</span>
-				</span>
-			</div>
+	<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
+		<div class="span12" style="text-align:right;">
+			<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small">
+				<span><i class="fa fa-plus"></i> ADD ROW</span>
+			</span>
 		</div>
 	</div>
 </div>

public/sass/pages/_dashboard.scss

@@ -13,85 +13,6 @@
   color: $variable;
 }
 
-.row-tab {
-  .dropdown-menu-right {
-    top: 0;
-    left: 33px;
-  }
-}
-
-.row-tab-button {
-  padding: 0px;
-  cursor: pointer;
-  vertical-align: middle;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  display: inline-block;
-  line-height: 30px;
-  background: $btn-success-bg;
-  color: rgba(255,255,255,.90);
-}
-
-.row-button {
-  width: 24px;
-  float: left;
-  cursor: pointer;
-  line-height: 31px;
-  background-color: $blue-dark;
-}
-
-.row-text {
-  white-space: nowrap;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 0.9em;
-  text-align: center;
-  line-height: 31px;
-  height: 31px;
-}
-
-.row-close {
-  padding: 0px;
-  margin: 0px;
-  background: $panel-bg;
-  text-align: center;
-}
-
-.row-close-buttons {
-  position: absolute;
-  left: 0;
-}
-
-.row-open {
-  margin-top: 5px;
-  left: -30px;
-  position: absolute;
-  z-index: 100;
-  transition: .10s left;
-  transition-delay: .10s;
-
-  &:hover {
-    left: -12px;
-  }
-}
-
-.row-control-inner {
-  padding:0px;
-  margin:0px;
-  position:relative;
-}
-
-.hide-controls {
-  padding: 0;
-  .row-tab {
-    display: none;
-  }
-  .add-row-panel-hint {
-    display: none;
-  }
-}
-
 .playlist-active {
   .add-row-panel-hint,
   .dashnav-refresh-action,
@@ -287,3 +208,41 @@ div.flot-text {
     padding: 0.5rem .5rem .2rem .5rem;
   }
 }
+
+//
+// Dashboard row header
+//
+
+.dash-row-header {
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+}
+
+.dash-row-header-title {
+  font-size: $font-size-h3;
+  font-family: $headings-font-family;
+  padding: $spacer $spacer*2;
+}
+
+.dash-row-header-settings {
+  display: none;
+}
+
+.dash-row-header-collapse-toggle {
+  flex-grow: 100;
+  text-align: right;
+  display: none;
+}
+
+.dash-edit-mode {
+  .dash-row {
+    background-color: $dark-5;
+    padding: 0 $spacer $spacer $spacer;
+  }
+
+  .dash-row-header-collapse-toggle,
+  .dash-row-header-settings {
+    display: block;
+  }
+}