mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
scrollable panels works better with perfect-scrollbar
This commit is contained in:
parent
68bd17bd0e
commit
85e81959f2
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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?) {
|
||||
|
@ -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', () => {
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import "~perfect-scrollbar/css/perfect-scrollbar.css";
|
||||
|
||||
/**
|
||||
* gemini-scrollbar
|
||||
* @version 1.5.2
|
||||
|
@ -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 {
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user