IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

removing gemini scrollbar and replacing with perfect scrollbar, muuuch better

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-23 11:12:32 +01:00
parent 856a0393ab
commit f18f1a1093
11 changed files with 286 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

14
public/app/core/components/scroll/scroll.ts
View File

@ -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,
element: elem[0]
}).create();
let scrollbar = new PerfectScrollbar(elem[0]);
console.log('scrllbar!');
scope.$on('$destroy', () => {
myScrollbar.destroy();
scrollbar.destroy();
});
}
};
}
coreModule.directive('geminiScrollbar', geminiScrollbar);
coreModule.directive('grafanaScrollbar', geminiScrollbar);

5
public/app/core/components/search/search.html
View File

@ -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>

4
public/app/features/admin/partials/configuration_home.html
View File

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

8
public/app/features/panel/panel_directive.ts
View File

@ -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], {
minScrollbarLength: 20
});
panelScrollbar = new PerfectScrollbar(panelContent[0]);
}
});
@ -191,6 +189,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
if (infoDrop) {
infoDrop.destroy();
}
if (panelScrollbar) {
panelScrollbar.update();
}
});
}
};

4
public/app/features/plugins/partials/ds_edit.html
View File

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

4
public/app/features/plugins/partials/ds_list.html
View File

@ -1,5 +1,4 @@
<div class="scroll-canvas">
<div gemini-scrollbar>
<div class="scroll-canvas" grafana-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
@ -46,6 +45,5 @@
<em>No data sources defined</em>
</div>
</div>
</div>
</div>

5
public/app/features/plugins/partials/plugin_list.html
View File

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

4
public/app/partials/dashboard.html
View File

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

18
public/sass/components/_scrollbar.scss
View File

@ -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

1
public/sass/components/_search.scss
View File

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