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

scrollable panels works better with perfect-scrollbar

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-22 14:46:17 +01:00
parent 68bd17bd0e
commit 85e81959f2
6 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -117,6 +117,8 @@
"brace": "^0.10.0",
"classnames": "^2.2.5",
"clipboard": "^1.7.1",
"d3": "^4.11.0",
"d3-scale-chromatic": "^1.1.1",
"eventemitter3": "^2.0.2",
"file-saver": "^1.3.3",
"gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
@ -125,6 +127,7 @@
"moment": "^2.18.1",
"mousetrap": "^1.6.0",
"ngreact": "^0.4.1",
"perfect-scrollbar": "^1.2.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
@ -134,8 +137,6 @@
"rxjs": "^5.4.3",
"tether": "^1.4.0",
"tether-drop": "https://github.com/torkelo/drop",
"tinycolor2": "^1.4.1",
"d3": "^4.11.0",
"d3-scale-chromatic": "^1.1.1"
"tinycolor2": "^1.4.1"
}
}

11
public/app/features/panel/panel_ctrl.ts
View File

@ -6,7 +6,7 @@ import Remarkable from 'remarkable';
import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants';
const TITLE_HEIGHT = 27;
const PANEL_BORDER = 12;
const PANEL_BORDER = 2;
import {Emitter} from 'app/core/core';
@ -172,16 +172,7 @@ export class PanelCtrl {
this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + ((this.panel.gridPos.h-1) * GRID_CELL_VMARGIN);
}
console.log(this.containerHeight);
this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
console.log(PANEL_BORDER + TITLE_HEIGHT);
}
setPanelHeight() {
// console.log('setPanelHeight');
// if (this.$scope.setPanelHeight) {
// this.$scope.setPanelHeight();
// }
}
render(payload?) {

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

@ -1,6 +1,6 @@
import angular from 'angular';
import Drop from 'tether-drop';
import GeminiScrollbar from 'gemini-scrollbar';
import PerfectScrollbar from 'perfect-scrollbar';
var module = angular.module('grafana.directives');
@ -86,6 +86,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
}
function panelHeightUpdated() {
panelContent.height(ctrl.height);
if (panelScrollbar) {
panelScrollbar.update();
}
@ -98,14 +99,13 @@ module.directive('grafanaPanel', function($rootScope, $document) {
panelContainer.addClass('panel-transparent', true);
}
if (ctrl.__proto__.constructor.scrollable) {
panelContent.addClass('panel-content--scrollable');
panelScrollbar = new GeminiScrollbar({ autoshow: false, element: panelContent[0] }).create();
}
// update scrollbar after mounting
ctrl.events.on('component-did-mount', () => {
panelHeightUpdated();
if (ctrl.__proto__.constructor.scrollable) {
panelScrollbar = new PerfectScrollbar(panelContent[0], {
minScrollbarLength: 20
});
}
});
ctrl.events.on('render', () => {

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

@ -1,3 +1,5 @@
@import "~perfect-scrollbar/css/perfect-scrollbar.css";
/**
* gemini-scrollbar
* @version 1.5.2

7
public/sass/pages/_dashboard.scss
View File

@ -44,11 +44,8 @@ div.flot-text {
.panel-content {
padding: 0px 10px 5px 10px;
height: calc(100% - 27px);
&--scrollable {
// Add space for scrollbar
padding-right: 10px;
}
position: relative;
overflow: hidden;
}
.panel-title-container {

4
yarn.lock
View File

@ -6955,6 +6955,10 @@ pend@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
perfect-scrollbar@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.2.0.tgz#ad23a2529c17f4535f21d1486f8bc3046e31a9d2"
performance-now@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"