Merge remote-tracking branch 'upstream/11053-remove-native-scrollbar' into…

Merge remote-tracking branch 'upstream/11053-remove-native-scrollbar' into 11053-remove-native-scrollbar

public/app/core/components/scroll/page_scroll.ts

@@ -29,7 +29,11 @@ export function pageScrollbar() {
       scope.$on('$routeChangeSuccess', () => {
       scope.$on('$routeChangeSuccess', () => {
         lastPos = 0;
         lastPos = 0;
         elem[0].scrollTop = 0;
         elem[0].scrollTop = 0;
+        elem[0].focus();
       });
       });
+
+      elem[0].tabIndex = -1;
+      elem[0].focus();
     },
     },
   };
   };
 }
 }

public/app/features/panel/panel_directive.ts

@@ -113,7 +113,8 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
           `;
           `;
 
 
           let scrollRoot = panelContent;
           let scrollRoot = panelContent;
-          let scroller = panelContent.find(':first-child').find(':first-child');
+          let scroller = panelContent.find(':first').find(':first');
+
           scrollRoot.addClass(scrollRootClass);
           scrollRoot.addClass(scrollRootClass);
           $(scrollBarHTML).appendTo(scrollRoot);
           $(scrollBarHTML).appendTo(scrollRoot);
           scroller.addClass(scrollerClass);
           scroller.addClass(scrollerClass);

public/app/plugins/panel/dashlist/module.html

-<div class="dashlist" ng-repeat="group in ctrl.groups">
-  <div class="dashlist-section" ng-if="group.show">
-    <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
-      {{group.header}}
-    </h6>
-    <div class="dashlist-item" ng-repeat="dash in group.list">
-      <a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}">
-        <span class="dashlist-title">
-          {{dash.title}}
-        </span>
-        <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
-          <i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
-        </span>
-      </a>
+<div>
+  <div class="dashlist" ng-repeat="group in ctrl.groups">
+    <div class="dashlist-section" ng-if="group.show">
+      <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
+        {{group.header}}
+      </h6>
+      <div class="dashlist-item" ng-repeat="dash in group.list">
+        <a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}">
+          <span class="dashlist-title">
+            {{dash.title}}
+          </span>
+          <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
+            <i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
+          </span>
+        </a>
+      </div>
     </div>
     </div>
   </div>
   </div>
 </div>
 </div>

public/sass/components/_scrollbar.scss

@@ -268,10 +268,14 @@
   }
   }
 }
 }
 
 
-.baron._scrolling > .baron__track .baron__bar {
+.panel-hover-highlight .baron__track .baron__bar {
   opacity: 0.6;
   opacity: 0.6;
 }
 }
 
 
+.baron._scrolling > .baron__track .baron__bar {
+  opacity: 0.9;
+}
+
 .baron__control {
 .baron__control {
   display: none;
   display: none;
 }
 }

public/views/index.template.html

@@ -40,7 +40,7 @@
     </div>
     </div>
 
 
     <div class="main-view">
     <div class="main-view">
-      <div class="scroll-canvas">
+      <div class="scroll-canvas" page-scrollbar>
         <div ng-view></div>
         <div ng-view></div>
 
 
         <footer class="footer">
         <footer class="footer">