From e985a9cd7c786f89a2f1e74d406f6af3fd0f3925 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 1 Feb 2018 09:44:38 +0100
Subject: [PATCH] ux: fixed issue with zoom on graph caused scroll, fixes
 #10696

---
 public/app/core/components/scroll/scroll.ts   | 28 +++++++++++--------
 .../app/features/dashboard/dashnav/dashnav.ts |  3 +-
 .../features/dashboard/settings/settings.ts   |  6 +++-
 .../app/features/dashboard/view_state_srv.ts  |  2 ++
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts
index bf0bbfaec4b..99245ed3331 100644
--- a/public/app/core/components/scroll/scroll.ts
+++ b/public/app/core/components/scroll/scroll.ts
@@ -7,25 +7,29 @@ export function geminiScrollbar() {
     restrict: 'A',
     link: function(scope, elem, attrs) {
       let scrollbar = new PerfectScrollbar(elem[0]);
+      let lastPos = 0;
 
       appEvents.on(
-        'smooth-scroll-top',
-        () => {
-          elem.animate(
-            {
-              scrollTop: 0,
-            },
-            500
-          );
+        'dash-scroll',
+        evt => {
+          if (evt.restore) {
+            elem[0].scrollTop = lastPos;
+            return;
+          }
+
+          lastPos = elem[0].scrollTop;
+
+          if (evt.animate) {
+            elem.animate({ scrollTop: evt.pos }, 500);
+          } else {
+            elem[0].scrollTop = evt.pos;
+          }
         },
         scope
       );
 
       scope.$on('$routeChangeSuccess', () => {
-        elem[0].scrollTop = 0;
-      });
-
-      scope.$on('$routeUpdate', () => {
+        lastPos = 0;
         elem[0].scrollTop = 0;
       });
 
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index 17a5bc61696..628f09349d3 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -72,7 +72,8 @@ export class DashNavCtrl {
   }
 
   addPanel() {
-    appEvents.emit('smooth-scroll-top');
+    appEvents.emit('dash-scroll', { animate: true, evt: 0 });
+
     if (this.dashboard.panels.length > 0 && this.dashboard.panels[0].type === 'add-panel') {
       return; // Return if the "Add panel" exists already
     }
diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts
index 6231a7b7adf..9fbe04e9685 100755
--- a/public/app/features/dashboard/settings/settings.ts
+++ b/public/app/features/dashboard/settings/settings.ts
@@ -24,6 +24,9 @@ export class SettingsCtrl {
     this.$scope.$on('$destroy', () => {
       this.dashboard.updateSubmenuVisibility();
       this.$rootScope.$broadcast('refresh');
+      setTimeout(() => {
+        this.$rootScope.appEvent('dash-scroll', { restore: true });
+      });
     });
 
     this.canSaveAs = contextSrv.isEditor;
@@ -33,7 +36,8 @@ export class SettingsCtrl {
     this.buildSectionList();
     this.onRouteUpdated();
 
-    $rootScope.onAppEvent('$routeUpdate', this.onRouteUpdated.bind(this), $scope);
+    this.$rootScope.onAppEvent('$routeUpdate', this.onRouteUpdated.bind(this), $scope);
+    this.$rootScope.appEvent('dash-scroll', { animate: false, pos: 0 });
   }
 
   buildSectionList() {
diff --git a/public/app/features/dashboard/view_state_srv.ts b/public/app/features/dashboard/view_state_srv.ts
index 1699f48510f..148f64beab0 100644
--- a/public/app/features/dashboard/view_state_srv.ts
+++ b/public/app/features/dashboard/view_state_srv.ts
@@ -150,6 +150,7 @@ export class DashboardViewState {
 
     this.dashboard.setViewMode(ctrl.panel, false, false);
     this.$scope.appEvent('panel-fullscreen-exit', { panelId: ctrl.panel.id });
+    this.$scope.appEvent('dash-scroll', { restore: true });
 
     if (!render) {
       return false;
@@ -177,6 +178,7 @@ export class DashboardViewState {
 
     this.dashboard.setViewMode(ctrl.panel, true, ctrl.editMode);
     this.$scope.appEvent('panel-fullscreen-enter', { panelId: ctrl.panel.id });
+    this.$scope.appEvent('dash-scroll', { animate: false, pos: 0 });
   }
 
   registerPanel(panelScope) {