diff --git a/package.json b/package.json index 8488f7b1b0b..02576cdcbef 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 1aa53438b7e..7e532b20223 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -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?) { diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 959ec80f085..ba70990126c 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -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', () => { diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index ba59d66fa49..70aca85681e 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -1,3 +1,5 @@ +@import "~perfect-scrollbar/css/perfect-scrollbar.css"; + /** * gemini-scrollbar * @version 1.5.2 diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 65a2fd9a323..c278bdf0437 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -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 { diff --git a/yarn.lock b/yarn.lock index 662152a2271..45af6e014bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"