From 075c72252707a217ed29338590147b01996ea3d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 2 Nov 2016 22:24:08 +0100
Subject: [PATCH] ux(dashboard): worked on single row edit mode, #6442

---
 public/app/features/dashboard/model.ts        |  1 +
 .../app/features/dashboard/row/add_panel.ts   |  2 +-
 public/app/features/dashboard/row/row.html    |  4 ++--
 public/app/features/dashboard/row/row_ctrl.ts | 21 ++++++++++++++-----
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts
index 99c2eef7660..a6091cbf49e 100644
--- a/public/app/features/dashboard/model.ts
+++ b/public/app/features/dashboard/model.ts
@@ -192,6 +192,7 @@ export class DashboardModel {
 
     this.editMode = !this.editMode;
     this.updateSubmenuVisibility();
+    this.events.emit('edit-mode-changed', this.editMode);
   }
 
   setPanelFocus(id) {
diff --git a/public/app/features/dashboard/row/add_panel.ts b/public/app/features/dashboard/row/add_panel.ts
index b85e33e09c6..f89da910612 100644
--- a/public/app/features/dashboard/row/add_panel.ts
+++ b/public/app/features/dashboard/row/add_panel.ts
@@ -93,7 +93,7 @@ export class AddPanelCtrl {
       isNew: true,
     };
 
-    this.rowCtrl.dropView = 0;
+    this.rowCtrl.closeDropView();
     this.dashboard.addPanel(panel, this.row);
     this.$timeout(() => {
       this.$rootScope.$broadcast('render');
diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html
index 6323c3288f6..85ce4fe73ed 100644
--- a/public/app/features/dashboard/row/row.html
+++ b/public/app/features/dashboard/row/row.html
@@ -1,4 +1,4 @@
-<div ng-if="ctrl.dashboard.editMode">
+<div ng-if="ctrl.editMode">
   <div class="dash-row-header">
     <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
       <span class="dash-row-collapse-toggle pointer">
@@ -40,7 +40,7 @@
   </div>
 </div>
 
-<div ng-if="!ctrl.dashboard.editMode">
+<div ng-if="!ctrl.editMode">
   <div class="row-open">
     <div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
       <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
diff --git a/public/app/features/dashboard/row/row_ctrl.ts b/public/app/features/dashboard/row/row_ctrl.ts
index f1169157ccc..8411f43549e 100644
--- a/public/app/features/dashboard/row/row_ctrl.ts
+++ b/public/app/features/dashboard/row/row_ctrl.ts
@@ -12,6 +12,7 @@ export class DashRowCtrl {
   dashboard: any;
   row: any;
   dropView: number;
+  editMode: boolean;
 
   /** @ngInject */
   constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
@@ -21,6 +22,12 @@ export class DashRowCtrl {
       this.dropView = 1;
       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) {
@@ -107,15 +114,20 @@ export class DashRowCtrl {
   }
 
   onMenuAddPanel() {
-    this.dashboard.toggleEditMode();
+    this.editMode = true;
     this.dropView = 1;
   }
 
   onMenuRowOptions() {
-    this.dashboard.toggleEditMode();
+    this.editMode = true;
     this.dropView = 2;
   }
 
+  closeDropView() {
+    this.dropView = 0;
+    this.editMode = this.dashboard.editMode;
+  }
+
   onMenuDeleteRow() {
     this.dashboard.removeRow(this.row);
   }
@@ -208,7 +220,7 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
 
     function updateState() {
-      if (scope.ctrl.dashboard.editMode) {
+      if (scope.ctrl.editMode) {
         if (row.panels.length === 0 && indrag === false) {
           return showPanel(12, 'Empty Space');
         }
@@ -234,8 +246,7 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
 
     row.events.on('span-changed', updateState, scope);
-
-    scope.$watchGroup(['ctrl.dashboard.editMode'], updateState);
+    scope.$watchGroup(['ctrl.editMode'], updateState);
 
     scope.$on("ANGULAR_DRAG_START", function() {
       indrag = true;