feat(UX): revived dash-edit-mode branch, #6099

public/app/core/directives/plugin_component.ts

@@ -58,7 +58,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     var componentInfo: any = {
       name: 'panel-plugin-' + scope.panel.type,
       bindings: {dashboard: "=", panel: "=", row: "="},
-      attrs: {dashboard: "dashboard", panel: "panel", row: "row"},
+      attrs: {dashboard: "ctrl.dashboard", panel: "panel", row: "ctrl.row"},
     };
 
     var panelElemName = 'panel-' + scope.panel.type;

public/app/core/filters/filters.ts

@@ -60,8 +60,8 @@ coreModule.filter('noXml', function() {
 coreModule.filter('interpolateTemplateVars', function (templateSrv) {
   var filterFunc: any = function(text, scope) {
     var scopedVars;
-    if (scope.ctrl && scope.ctrl.panel) {
-      scopedVars = scope.ctrl.panel.scopedVars;
+    if (scope.ctrl) {
+      scopedVars = (scope.ctrl.panel || scope.ctrl.row).scopedVars;
     } else {
       scopedVars = scope.row.scopedVars;
     }

public/app/core/routes/dashboard_loaders.js

@@ -31,7 +31,7 @@ function (coreModule) {
       meta: { canStar: false, canShare: false },
       dashboard: {
         title: "New dashboard",
-        rows: [{ height: '250px', panels:[] }]
+        rows: [{title: 'Dashboard Row', height: '250px', panels:[] }]
       },
     }, $scope);
   });

public/app/features/dashboard/all.js

@@ -22,4 +22,5 @@ define([
   './export/export_modal',
   './dash_list_ctrl',
   './ad_hoc_filters',
+  './row/row',
 ], function () {});

public/app/features/dashboard/dashboard_ctrl.ts

@@ -41,6 +41,7 @@ export class DashboardCtrl {
       $scope.setupDashboardInternal = function(data) {
         var dashboard = dashboardSrv.create(data.dashboard, data.meta);
         dashboardSrv.setCurrent(dashboard);
+        dashboard.editMode = true;
 
         // init services
         timeSrv.init(dashboard);

public/app/features/dashboard/dashnav/dashnav.html

@@ -62,8 +62,8 @@
 		</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>
+		<a ng-click="dashboard.editMode = true;"  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 = false;" 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>
 

public/app/features/dashboard/row/row.html

@@ -0,0 +1,87 @@
+<div class="dash-row-handle-column" ng-if="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&#45;toggle" data&#45;toggle="dropdown"> -->
+			<!-- 	<i class="fa fa&#45;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>
+				</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-chevron" 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 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="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>
+		</div>
+
+		<div class="clearfix"></div>
+	</div>
+</div>
+

public/app/features/dashboard/row/row.ts

@@ -0,0 +1,73 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import coreModule from 'app/core/core_module';
+
+export class DashRowCtrl {
+  showTitle: boolean;
+
+   /** @ngInject */
+  constructor(private $scope, private $rootScope) {
+    this.showTitle = true;
+    this.-
+  }
+
+}
+
+
+export function rowDirective() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/dashboard/row/row.html',
+    controller: DashRowCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      dashboard: "=",
+      row: "=",
+    }
+  };
+}
+
+coreModule.directive('dashRow', rowDirective);
+
+
+coreModule.directive('panelWidth', function($rootScope) {
+
+  return function(scope, element) {
+    var fullscreen = false;
+
+    function updateWidth() {
+      if (!fullscreen) {
+        element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
+      }
+    }
+
+    $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
+      fullscreen = true;
+
+      if (scope.panel.id !== info.panelId) {
+        element.hide();
+      } else {
+        element[0].style.width = '100%';
+      }
+    }, scope);
+
+    $rootScope.onAppEvent('panel-fullscreen-exit', function(evt, info) {
+      fullscreen = false;
+
+      if (scope.panel.id !== info.panelId) {
+        element.show();
+      }
+
+      updateWidth();
+    }, scope);
+
+    scope.$watch('ctrl.panel.span', updateWidth);
+
+    if (fullscreen) {
+      element.hide();
+    }
+  };
+});
+

public/app/features/dashboard/rowCtrl.js

@@ -146,45 +146,6 @@ function (angular, _, config) {
     };
   });
 
-  module.directive('panelWidth', function() {
-
-    return function(scope, element) {
-      var fullscreen = false;
-
-      function updateWidth() {
-        if (!fullscreen) {
-          element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
-        }
-      }
-
-      scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
-        fullscreen = true;
-
-        if (scope.panel.id !== info.panelId) {
-          element.hide();
-        } else {
-          element[0].style.width = '100%';
-        }
-      });
-
-      scope.onAppEvent('panel-fullscreen-exit', function(evt, info) {
-        fullscreen = false;
-
-        if (scope.panel.id !== info.panelId) {
-          element.show();
-        }
-
-        updateWidth();
-      });
-
-      scope.$watch('panel.span', updateWidth);
-
-      if (fullscreen) {
-        element.hide();
-      }
-    };
-  });
-
   module.directive('panelDropZone', function() {
     return function(scope, element) {
       scope.$on("ANGULAR_DRAG_START", function() {

public/app/partials/dashboard.html

@@ -11,83 +11,9 @@
 
 		<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 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" 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">
-						<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>
-						</li>
-					</ul>
-				</div>
-				<div class="dash-row-header-chevron">
-					<a class="pointer" ng-click="row.collapse = !row.collapse">
-						<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>
+    <dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
+    </dash-row>
 
-			<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>
-				</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">

public/sass/pages/_dashboard.scss

@@ -205,17 +205,43 @@ div.flot-text {
 // Dashboard row header
 //
 
+.dash-row {
+  display: flex;
+}
+
+.dash-row-handle-column {
+  width: 2rem;
+  background: $page-bg;
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-row-move-handle {
+  background: url($btn-drag-image) no-repeat 50% 50%;
+  background-size: 8px;
+  flex-grow: 1;
+  cursor: move;
+}
+
+.dash-row-resize-handle {
+}
+
+.dash-row-content {
+  flex-grow: 1;
+}
+
 .dash-row-header {
   display: flex;
   flex-direction: row;
   text-align: left;
   align-items: center;
+  background: $page-bg;
+  margin-right: $panel-margin;
 }
 
 .dash-row-header-title {
-  font-size: $font-size-h3;
   font-family: $headings-font-family;
-  padding: $spacer $spacer $spacer $spacer/2;
+  padding: 0.7rem;
 }
 
 .dash-row-header-settings {
@@ -226,34 +252,24 @@ div.flot-text {
   flex-grow: 100;
   text-align: right;
   margin-right: 0.6rem;
+  font-size: $font-size-sm;
+  line-height: 2.5rem;
+  a {
+    color: $text-muted;
+  }
+  &:hover a {
+    color: $link-color;
+  }
 }
 
-.dash-row-header-collapse-toggle {
-  flex-grow: 100;
-  text-align: right;
-  display: none;
-  margin-right: $spacer/2;
-}
 
 .dash-edit-mode {
-//   .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 {
+    margin-bottom: $spacer;
+  }
 
-  .dash-row-header-collapse-toggle,
-  .dash-row-header-settings {
-    display: block;
+  .panels-wrapper {
+    padding: $panel-margin*2 0 0 $panel-margin;
   }
 }