ux(dashboard): worked on single row edit mode, #6442

public/app/features/dashboard/model.ts

@@ -192,6 +192,7 @@ export class DashboardModel {
 
 
     this.editMode = !this.editMode;
     this.editMode = !this.editMode;
     this.updateSubmenuVisibility();
     this.updateSubmenuVisibility();
+    this.events.emit('edit-mode-changed', this.editMode);
   }
   }
 
 
   setPanelFocus(id) {
   setPanelFocus(id) {

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

@@ -93,7 +93,7 @@ export class AddPanelCtrl {
       isNew: true,
       isNew: true,
     };
     };
 
 
-    this.rowCtrl.dropView = 0;
+    this.rowCtrl.closeDropView();
     this.dashboard.addPanel(panel, this.row);
     this.dashboard.addPanel(panel, this.row);
     this.$timeout(() => {
     this.$timeout(() => {
       this.$rootScope.$broadcast('render');
       this.$rootScope.$broadcast('render');

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

-<div ng-if="ctrl.dashboard.editMode">
+<div ng-if="ctrl.editMode">
   <div class="dash-row-header">
   <div class="dash-row-header">
     <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
     <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
       <span class="dash-row-collapse-toggle pointer">
       <span class="dash-row-collapse-toggle pointer">
@@ -40,7 +40,7 @@
   </div>
   </div>
 </div>
 </div>
 
 
-<div ng-if="!ctrl.dashboard.editMode">
+<div ng-if="!ctrl.editMode">
   <div class="row-open">
   <div class="row-open">
     <div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
     <div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
       <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
       <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">

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

@@ -12,6 +12,7 @@ export class DashRowCtrl {
   dashboard: any;
   dashboard: any;
   row: any;
   row: any;
   dropView: number;
   dropView: number;
+  editMode: boolean;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
   constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
@@ -21,6 +22,12 @@ export class DashRowCtrl {
       this.dropView = 1;
       this.dropView = 1;
       delete this.row.isNew;
       delete this.row.isNew;
     }
     }
+
+    this.dashboard.events.on('edit-mode-changed', this.editModeChanged.bind(this), $scope);
+  }
+
+  editModeChanged() {
+    this.editMode = this.dashboard.editMode;
   }
   }
 
 
   onDrop(panelId, dropTarget) {
   onDrop(panelId, dropTarget) {
@@ -107,15 +114,20 @@ export class DashRowCtrl {
   }
   }
 
 
   onMenuAddPanel() {
   onMenuAddPanel() {
-    this.dashboard.toggleEditMode();
+    this.editMode = true;
     this.dropView = 1;
     this.dropView = 1;
   }
   }
 
 
   onMenuRowOptions() {
   onMenuRowOptions() {
-    this.dashboard.toggleEditMode();
+    this.editMode = true;
     this.dropView = 2;
     this.dropView = 2;
   }
   }
 
 
+  closeDropView() {
+    this.dropView = 0;
+    this.editMode = this.dashboard.editMode;
+  }
+
   onMenuDeleteRow() {
   onMenuDeleteRow() {
     this.dashboard.removeRow(this.row);
     this.dashboard.removeRow(this.row);
   }
   }
@@ -208,7 +220,7 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
     }
 
 
     function updateState() {
     function updateState() {
-      if (scope.ctrl.dashboard.editMode) {
+      if (scope.ctrl.editMode) {
         if (row.panels.length === 0 && indrag === false) {
         if (row.panels.length === 0 && indrag === false) {
           return showPanel(12, 'Empty Space');
           return showPanel(12, 'Empty Space');
         }
         }
@@ -234,8 +246,7 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
     }
 
 
     row.events.on('span-changed', updateState, scope);
     row.events.on('span-changed', updateState, scope);
-
-    scope.$watchGroup(['ctrl.dashboard.editMode'], updateState);
+    scope.$watchGroup(['ctrl.editMode'], updateState);
 
 
     scope.$on("ANGULAR_DRAG_START", function() {
     scope.$on("ANGULAR_DRAG_START", function() {
       indrag = true;
       indrag = true;