removing gemini scrollbar and replacing with perfect scrollbar, muuuch better

package.json

@@ -121,7 +121,6 @@
     "d3-scale-chromatic": "^1.1.1",
     "eventemitter3": "^2.0.2",
     "file-saver": "^1.3.3",
-    "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",

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

@@ -1,20 +1,20 @@
-import GeminiScrollbar from 'gemini-scrollbar';
+import PerfectScrollbar from 'perfect-scrollbar';
 import coreModule from 'app/core/core_module';
 
 export function geminiScrollbar() {
   return {
     restrict: 'A',
     link: function(scope, elem, attrs) {
-      var myScrollbar = new GeminiScrollbar({
+
-        autoshow: false,
+      let scrollbar = new PerfectScrollbar(elem[0]);
-        element: elem[0]
+      console.log('scrllbar!');
-      }).create();
 
       scope.$on('$destroy', () => {
-        myScrollbar.destroy();
+        scrollbar.destroy();
       });
+
     }
   };
 }
 
-coreModule.directive('geminiScrollbar', geminiScrollbar);
+coreModule.directive('grafanaScrollbar', geminiScrollbar);

public/app/core/components/search/search.html

@@ -40,7 +40,6 @@
 	</div>
 
 	<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
-		<div gemini-scrollbar>
 		<div class="search-results-container" ng-if="ctrl.tagsMode">
 			<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
 																												ng-class="{'selected': $index === ctrl.selectedIndex }"
@@ -52,7 +51,7 @@
 			</div>
 		</div>
 
-			<div class="search-results-container" ng-if="!ctrl.tagsMode">
+		<div class="search-results-container" ng-if="!ctrl.tagsMode" grafana-scrollbar>
 			<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
 
 			<div ng-repeat="section in ctrl.results" class="search-section">
@@ -87,7 +86,6 @@
 				</div>
 			</div>
 		</div>
-		</div>
 
 		<div class="search-button-row">
 			<a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
@@ -95,4 +93,5 @@
 			</a>
 		</div>
 	</div>
+</div>
 

public/app/features/admin/partials/configuration_home.html

@@ -1,5 +1,4 @@
-<div class="scroll-canvas">
+<div class="scroll-canvas" grafana-scrollbar>
-  <div gemini-scrollbar>
 	<navbar model="ctrl.navModel"></navbar>
 	<div class="page-container">
 		<div class="page-header">
@@ -32,4 +31,3 @@
 			</ol>
 		</section>
 	</div>
-  </div>

public/app/features/panel/panel_directive.ts

@@ -102,9 +102,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       // update scrollbar after mounting
       ctrl.events.on('component-did-mount', () => {
         if (ctrl.__proto__.constructor.scrollable) {
-          panelScrollbar = new PerfectScrollbar(panelContent[0], {
+          panelScrollbar = new PerfectScrollbar(panelContent[0]);
-            minScrollbarLength: 20
-          });
         }
       });
 
@@ -191,6 +189,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         if (infoDrop) {
           infoDrop.destroy();
         }
+
+        if (panelScrollbar) {
+          panelScrollbar.update();
+        }
       });
     }
   };

public/app/features/plugins/partials/ds_edit.html

@@ -1,5 +1,4 @@
-<div class="scroll-canvas">
+<div class="scroll-canvas" grafana-scrollbar>
-	<div gemini-scrollbar>
 	<navbar model="ctrl.navModel"></navbar>
 	<div class="page-container">
 		<div class="page-header">
@@ -87,4 +86,3 @@
 		</div>
 	</div>
 </div>
-</div>

public/app/features/plugins/partials/ds_list.html

@@ -1,5 +1,4 @@
-<div class="scroll-canvas">
+<div class="scroll-canvas" grafana-scrollbar>
-  <div gemini-scrollbar>
 	<navbar model="ctrl.navModel"></navbar>
 	<div class="page-container">
 		<div class="page-header">
@@ -47,5 +46,4 @@
 		</div>
 	</div>
 </div>
-</div>
 

public/app/features/plugins/partials/plugin_list.html

@@ -1,6 +1,4 @@
-<div class="scroll-canvas">
+<div class="scroll-canvas" grafana-scrollbar>
-  <div gemini-scrollbar>
-
 	<navbar model="ctrl.navModel"></navbar>
 
 	<div class="page-container">
@@ -65,4 +63,3 @@
 		</section>
 	</div>
 </div>
-</div>

public/app/partials/dashboard.html

@@ -1,8 +1,7 @@
 <div dash-class ng-if="ctrl.dashboard">
 	<dashnav dashboard="ctrl.dashboard"></dashnav>
 
-	<div class="scroll-canvas scroll-canvas--dashboard">
+	<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
-		<div gemini-scrollbar>
 		<div dash-editor-view class="dash-edit-view"></div>
 		<div class="dashboard-container">
 
@@ -15,4 +14,3 @@
 		</div>
 	</div>
 </div>
-</div>

public/sass/components/_scrollbar.scss

@@ -1,5 +1,23 @@
 @import "~perfect-scrollbar/css/perfect-scrollbar.css";
 
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus {
+  background-color: transparent;
+  opacity: 0.9;
+}
+
+.ps__thumb-y {
+  @include gradient-vertical($blue, lighten($blue, 20%));
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y {
+  background-color: #999;
+  width: 6px;
+}
+
 /**
  * gemini-scrollbar
  * @version 1.5.2

public/sass/components/_search.scss

@@ -79,6 +79,7 @@
   height: 100%;
   display: block;
   padding: $spacer;
+  position: relative;
   flex-grow: 10;
 
   .selected {