From 77d2ee9add2c45c0bd6ffbffff9ea2648c39e82e Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 27 Mar 2018 23:27:23 +0300 Subject: [PATCH 01/26] Initially move to baron scrollbar --- package.json | 1 + .../core/components/ScrollBar/ScrollBar.tsx | 31 +++-- public/app/core/components/scroll/scroll.ts | 37 ++++- public/app/core/components/search/search.html | 2 + public/app/features/panel/panel_directive.ts | 31 ++++- public/app/partials/dashboard.html | 22 +-- public/app/plugins/panel/graph/legend.ts | 48 +++++-- public/app/plugins/panel/graph/template.ts | 4 +- public/sass/components/_panel_add_panel.scss | 5 +- public/sass/components/_panel_graph.scss | 7 +- public/sass/components/_scrollbar.scss | 126 +++++++++++++++++- public/sass/components/_search.scss | 7 + public/views/index.template.html | 3 +- 13 files changed, 276 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 6dcfc16b82b..724bbffb6fa 100644 --- a/package.json +++ b/package.json @@ -136,6 +136,7 @@ "angular-route": "^1.6.6", "angular-sanitize": "^1.6.6", "babel-polyfill": "^6.26.0", + "baron": "^3.0.3", "brace": "^0.10.0", "classnames": "^2.2.5", "clipboard": "^1.7.1", diff --git a/public/app/core/components/ScrollBar/ScrollBar.tsx b/public/app/core/components/ScrollBar/ScrollBar.tsx index 7d9e015df94..a358dc1926a 100644 --- a/public/app/core/components/ScrollBar/ScrollBar.tsx +++ b/public/app/core/components/ScrollBar/ScrollBar.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import PerfectScrollbar from 'perfect-scrollbar'; +import baron from 'baron'; export interface Props { children: any; @@ -8,31 +8,36 @@ export interface Props { export default class ScrollBar extends React.Component { private container: any; - private ps: PerfectScrollbar; + private scrollbar: baron; constructor(props) { super(props); } componentDidMount() { - this.ps = new PerfectScrollbar(this.container, { - wheelPropagation: true, + this.scrollbar = baron({ + root: this.container.parentElement, + scroller: this.container, + bar: '.baron__bar', + barOnCls: '_scrollbar', + scrollingCls: '_scrolling', + track: '.baron__track', }); } componentDidUpdate() { - this.ps.update(); + this.scrollbar.update(); } componentWillUnmount() { - this.ps.destroy(); + this.scrollbar.dispose(); } // methods can be invoked by outside setScrollTop(top) { if (this.container) { this.container.scrollTop = top; - this.ps.update(); + this.scrollbar.update(); return true; } @@ -42,7 +47,7 @@ export default class ScrollBar extends React.Component { setScrollLeft(left) { if (this.container) { this.container.scrollLeft = left; - this.ps.update(); + this.scrollbar.update(); return true; } @@ -55,8 +60,14 @@ export default class ScrollBar extends React.Component { render() { return ( -
- {this.props.children} +
+
+ {this.props.children} +
+ +
+
+
); } diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index fbf5fd6cd37..ad8b4ed3d8e 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -1,15 +1,41 @@ -import PerfectScrollbar from 'perfect-scrollbar'; +import $ from 'jquery'; +import baron from 'baron'; import coreModule from 'app/core/core_module'; import appEvents from 'app/core/app_events'; +const scrollBarHTML = ` +
+
+
+`; + +const scrollRootClass = 'baron baron__root'; +const scrollerClass = 'baron__scroller'; + export function geminiScrollbar() { return { restrict: 'A', link: function(scope, elem, attrs) { - let scrollbar = new PerfectScrollbar(elem[0], { - wheelPropagation: true, - wheelSpeed: 3, + let scrollRoot = elem.parent(); + let scroller = elem; + + if (attrs.grafanaScrollbar && attrs.grafanaScrollbar === 'scrollonroot') { + scrollRoot = scroller; + } + + scrollRoot.addClass(scrollRootClass); + $(scrollBarHTML).appendTo(scrollRoot); + elem.addClass(scrollerClass); + + let scrollbar = baron({ + root: scrollRoot[0], + scroller: scroller[0], + bar: '.baron__bar', + barOnCls: '_scrollbar', + scrollingCls: '_scrolling', + track: '.baron__track', }); + let lastPos = 0; appEvents.on( @@ -37,7 +63,8 @@ export function geminiScrollbar() { }); scope.$on('$destroy', () => { - scrollbar.destroy(); + // scrollbar.destroy(); + scrollbar.dispose(); }); }, }; diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index acaf0730a6b..afb9e723cad 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -19,6 +19,7 @@
+
No dashboards matching your query were found.
+
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index dec7868a553..4edf293c801 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -1,6 +1,7 @@ import angular from 'angular'; +import $ from 'jquery'; import Drop from 'tether-drop'; -import PerfectScrollbar from 'perfect-scrollbar'; +import baron from 'baron'; var module = angular.module('grafana.directives'); @@ -86,6 +87,9 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { function panelHeightUpdated() { panelContent.css({ height: ctrl.height + 'px' }); + } + + function resizeScrollableContent() { if (panelScrollbar) { panelScrollbar.update(); } @@ -100,8 +104,26 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { // update scrollbar after mounting ctrl.events.on('component-did-mount', () => { if (ctrl.__proto__.constructor.scrollable) { - panelScrollbar = new PerfectScrollbar(panelContent[0], { - wheelPropagation: true, + const scrollRootClass = 'baron baron__root baron__clipper panel-content--scrollable'; + const scrollerClass = 'baron__scroller'; + const scrollBarHTML = ` +
+
+
+ `; + + let scrollRoot = panelContent; + let scroller = panelContent.find(':first-child').find(':first-child'); + scrollRoot.addClass(scrollRootClass); + $(scrollBarHTML).appendTo(scrollRoot); + scroller.addClass(scrollerClass); + + panelScrollbar = baron({ + root: scrollRoot[0], + scroller: scroller[0], + bar: '.baron__bar', + barOnCls: '_scrollbar', + scrollingCls: '_scrolling', }); } }); @@ -110,6 +132,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { ctrl.calculatePanelHeight(); panelHeightUpdated(); $timeout(() => { + resizeScrollableContent(); ctrl.render(); }); }); @@ -199,7 +222,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { } if (panelScrollbar) { - panelScrollbar.update(); + panelScrollbar.dispose(); } }); }, diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 210275d2200..a3d5a4439ee 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,18 +1,20 @@
-
- - +
+
+ + -
- - +
+ + - - + + +
diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index d1186ae0b1e..761671c356d 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -1,7 +1,7 @@ import angular from 'angular'; import _ from 'lodash'; import $ from 'jquery'; -import PerfectScrollbar from 'perfect-scrollbar'; +import baron from 'baron'; var module = angular.module('grafana.directives'); @@ -250,23 +250,53 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } function addScrollbar() { - const scrollbarOptions = { - // Number of pixels the content height can surpass the container height without enabling the scroll bar. - scrollYMarginOffset: 2, - suppressScrollX: true, - wheelPropagation: true, + const scrollRootClass = 'baron baron__root'; + const scrollerClass = 'baron__scroller'; + const scrollBarHTML = ` +
+
+
+ `; + + let scrollRoot = elem.parent(); + // let scroller = elem.find(':first-child').first(); + let scroller = elem; + + // clear existing scroll bar track to prevent duplication + elem + .parent() + .find('.baron__track') + .remove(); + + scrollRoot.addClass(scrollRootClass); + $(scrollBarHTML).appendTo(scrollRoot); + scroller.addClass(scrollerClass); + + // Fix .graph-legend-content max-height + // Couldn't find how to do it via CSS + const legendHeight = scrollRoot.height(); + elem.css('max-height', legendHeight); + + let scrollbarParams = { + root: scrollRoot[0], + scroller: scroller[0], + bar: '.baron__bar', + track: '.baron__track', + barOnCls: '_scrollbar', + scrollingCls: '_scrolling', }; if (!legendScrollbar) { - legendScrollbar = new PerfectScrollbar(elem[0], scrollbarOptions); + legendScrollbar = baron(scrollbarParams); } else { - legendScrollbar.update(); + destroyScrollbar(); + legendScrollbar = baron(scrollbarParams); } } function destroyScrollbar() { if (legendScrollbar) { - legendScrollbar.destroy(); + legendScrollbar.dispose(); legendScrollbar = undefined; } } diff --git a/public/app/plugins/panel/graph/template.ts b/public/app/plugins/panel/graph/template.ts index 0b9eb8227df..c897327fe1a 100644 --- a/public/app/plugins/panel/graph/template.ts +++ b/public/app/plugins/panel/graph/template.ts @@ -3,7 +3,9 @@ var template = `
-
+
+
+
`; diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss index 51754a54d92..ee5d757d841 100644 --- a/public/sass/components/_panel_add_panel.scss +++ b/public/sass/components/_panel_add_panel.scss @@ -1,5 +1,9 @@ .add-panel { height: 100%; + + .baron__root { + height: calc(100% - 43px); + } } .add-panel__header { @@ -39,7 +43,6 @@ flex-direction: row; flex-wrap: wrap; overflow: auto; - height: calc(100% - 43px); align-content: flex-start; justify-content: space-around; position: relative; diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index e15cd576367..5885b769564 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -53,7 +53,7 @@ max-height: 30%; margin: 0; text-align: center; - padding-top: 6px; + // padding-top: 6px; position: relative; .popover-content { @@ -61,6 +61,11 @@ } } +.graph-legend-content { + position: relative; + padding-top: 6px; +} + .graph-legend-icon { position: relative; padding-right: 4px; diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 42818e786f6..216ff1fa1c4 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -9,6 +9,11 @@ -ms-touch-action: auto; } +// ._scrollbar { +// overflow-x: hidden !important; +// overflow-y: auto; +// } + /* * Scrollbar rail styles */ @@ -104,13 +109,19 @@ // Srollbars // -::-webkit-scrollbar { - width: 8px; - height: 8px; -} +// ::-webkit-scrollbar { +// width: 8px; +// height: 8px; +// } -::-webkit-scrollbar:hover { - height: 8px; +// ::-webkit-scrollbar:hover { +// height: 8px; +// } + +::-webkit-scrollbar { + // Hide system scrollbar (Mac OS X) + width: 0; + height: 0; } ::-webkit-scrollbar-button:start:decrement, @@ -172,3 +183,106 @@ border-top: 1px solid $scrollbarBorder; border-left: 1px solid $scrollbarBorder; } + +// Baron styles + +.baron { + display: inline-block; + overflow: hidden; +} + +.baron__clipper { + position: relative; + overflow: hidden; + height: 100%; +} + +.baron__scroller { + overflow-y: scroll; + -ms-overflow-style: none; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + border: 0; + padding: 0; + width: 100%; + height: 100%; + -webkit-overflow-scrolling: touch; + /* remove line to customize scrollbar in iOs */ +} + +.baron__scroller::-webkit-scrollbar { + width: 0; + height: 0; +} + +.baron__track { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; +} + +.baron._scrollbar .baron__track { + display: block; +} + +.baron__free { + position: absolute; + top: 0; + bottom: 0; + right: 0; +} + +.baron__bar { + display: none; + position: absolute; + right: 0; + z-index: 1; + // width: 10px; + background: #999; + + // height: 15px; + width: 15px; + transition: background-color 0.2s linear, opacity 0.2s linear; + opacity: 0; +} + +.baron._scrollbar .baron__bar { + display: block; + + @include gradient-vertical($scrollbarBackground, $scrollbarBackground2); + border-radius: 6px; + width: 6px; + /* there must be 'right' for ps__thumb-y */ + right: 0px; + /* please don't change 'position' */ + position: absolute; + + // background-color: transparent; + // opacity: 0.6; + + &:hover, + &:focus { + // background-color: transparent; + opacity: 0.9; + } +} + +.baron._scrolling > .baron__track .baron__bar { + opacity: 0.6; +} + +.baron__control { + display: none; +} + +.baron.panel-content--scrollable { + // Width needs to be set to prevent content width issues + width: 100%; + + .baron__scroller { + padding-top: 1px; + } +} diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 47d4a926968..ba37d7ce98f 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -61,6 +61,8 @@ display: flex; flex-direction: column; flex-grow: 1; + + // overflow-y: scroll; } .search-dropdown__col_2 { @@ -99,6 +101,11 @@ } } +.search-results-scroller { + position: relative; + height: 100%; +} + .search-results-container { height: 100%; display: block; diff --git a/public/views/index.template.html b/public/views/index.template.html index 2d408f70f8c..4cb4a0d57ce 100644 --- a/public/views/index.template.html +++ b/public/views/index.template.html @@ -16,7 +16,7 @@ - + @@ -40,6 +40,7 @@
+
From efaf267deba548189e89e04a7557d48ebb46ca04 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Mon, 2 Apr 2018 20:47:09 +0300 Subject: [PATCH 02/26] scrollbar: fix legend rendering issues --- public/app/plugins/panel/graph/legend.ts | 19 ++++++------------- public/app/plugins/panel/graph/template.ts | 4 +--- public/sass/components/_panel_graph.scss | 7 ++++--- 3 files changed, 11 insertions(+), 19 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 761671c356d..1952f7241e7 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -238,8 +238,10 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { tbodyElem.append(tableHeaderElem); tbodyElem.append(seriesElements); elem.append(tbodyElem); + tbodyElem.wrap('
'); } else { - elem.append(seriesElements); + elem.append('
'); + elem.find('.graph-legend-content').append(seriesElements); } if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) { @@ -258,25 +260,16 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
`; - let scrollRoot = elem.parent(); - // let scroller = elem.find(':first-child').first(); - let scroller = elem; + let scrollRoot = elem; + let scroller = elem.find('.graph-legend-content'); // clear existing scroll bar track to prevent duplication - elem - .parent() - .find('.baron__track') - .remove(); + scrollRoot.find('.baron__track').remove(); scrollRoot.addClass(scrollRootClass); $(scrollBarHTML).appendTo(scrollRoot); scroller.addClass(scrollerClass); - // Fix .graph-legend-content max-height - // Couldn't find how to do it via CSS - const legendHeight = scrollRoot.height(); - elem.css('max-height', legendHeight); - let scrollbarParams = { root: scrollRoot[0], scroller: scroller[0], diff --git a/public/app/plugins/panel/graph/template.ts b/public/app/plugins/panel/graph/template.ts index c897327fe1a..0b9eb8227df 100644 --- a/public/app/plugins/panel/graph/template.ts +++ b/public/app/plugins/panel/graph/template.ts @@ -3,9 +3,7 @@ var template = `
-
-
-
+
`; diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 5885b769564..83747d6caaf 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -53,9 +53,11 @@ max-height: 30%; margin: 0; text-align: center; - // padding-top: 6px; + padding-top: 6px; position: relative; + height: 100%; + .popover-content { padding: 0; } @@ -63,7 +65,6 @@ .graph-legend-content { position: relative; - padding-top: 6px; } .graph-legend-icon { @@ -129,9 +130,9 @@ .graph-legend-table { tbody { display: block; + position: relative; overflow-y: auto; overflow-x: hidden; - height: 100%; padding-bottom: 1px; padding-right: 5px; padding-left: 5px; From 7b75b251b12752969bf926334f63e441745e52bd Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Mon, 2 Apr 2018 21:15:10 +0300 Subject: [PATCH 03/26] scrollbar: fix Firefox issue (white stripe on the right of scrollbar) --- public/sass/components/_scrollbar.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 216ff1fa1c4..ec6f64a13e4 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -189,6 +189,10 @@ .baron { display: inline-block; overflow: hidden; + + // Width needs to be set to prevent content width issues + // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar) + width: 99%; } .baron__clipper { @@ -280,7 +284,8 @@ .baron.panel-content--scrollable { // Width needs to be set to prevent content width issues - width: 100%; + // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar) + width: 99%; .baron__scroller { padding-top: 1px; From 3fcd2627110e180d3538eda4cc01d82f1c2cef84 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 3 Apr 2018 14:48:48 +0300 Subject: [PATCH 04/26] scrollbar: fix side menu on mobile devices --- public/sass/components/_scrollbar.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index ec6f64a13e4..776c85d96b5 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -192,7 +192,17 @@ // Width needs to be set to prevent content width issues // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar) - width: 99%; + min-width: 99%; +} + +// Fix for side menu on mobile devices +.sidemenu-open.sidemenu-open--xs { + .main-view.baron { + min-width: 0%; + } +} +.main-view.baron { + min-width: 99%; } .baron__clipper { From a265c77cf907d3522515d9818d6e77d127e70715 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 4 Apr 2018 14:51:46 +0300 Subject: [PATCH 05/26] scrollbar: fix Firefox scroll position restore --- public/app/features/dashboard/view_state_srv.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/app/features/dashboard/view_state_srv.ts b/public/app/features/dashboard/view_state_srv.ts index 576b8b6fce8..fa471b89989 100644 --- a/public/app/features/dashboard/view_state_srv.ts +++ b/public/app/features/dashboard/view_state_srv.ts @@ -196,9 +196,10 @@ export class DashboardViewState { this.oldTimeRange = ctrl.range; this.fullscreenPanel = panelScope; + // Firefox doesn't return scrollTop postion properly if 'dash-scroll' is emitted after setViewMode() + this.$scope.appEvent('dash-scroll', { animate: false, pos: 0 }); this.dashboard.setViewMode(ctrl.panel, true, ctrl.editMode); this.$scope.appEvent('panel-fullscreen-enter', { panelId: ctrl.panel.id }); - this.$scope.appEvent('dash-scroll', { animate: false, pos: 0 }); } registerPanel(panelScope) { From 6b598f34cdab793228c1ad0d94ecc3a9f85718b1 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 4 Apr 2018 19:00:28 +0300 Subject: [PATCH 06/26] scrollbar: fix 'legendScrollbar.destroy is not a function' error --- public/app/plugins/panel/graph/legend.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 1952f7241e7..c4ff5b31355 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -19,7 +19,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { scope.$on('$destroy', function() { if (legendScrollbar) { - legendScrollbar.destroy(); + legendScrollbar.dispose(); } }); From 4df4249aeadf16247350685eb92ec64f875f56b6 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 4 Apr 2018 19:21:17 +0300 Subject: [PATCH 07/26] scrollbar: fix dashboard width bug --- public/app/core/components/scroll/scroll.ts | 12 ++++++++++-- public/sass/components/_scrollbar.scss | 7 +------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index ad8b4ed3d8e..0eb1c68ab71 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -27,14 +27,17 @@ export function geminiScrollbar() { $(scrollBarHTML).appendTo(scrollRoot); elem.addClass(scrollerClass); - let scrollbar = baron({ + let scrollParams = { root: scrollRoot[0], scroller: scroller[0], bar: '.baron__bar', barOnCls: '_scrollbar', scrollingCls: '_scrolling', track: '.baron__track', - }); + direction: 'v', + }; + + let scrollbar = baron(scrollParams); let lastPos = 0; @@ -57,6 +60,11 @@ export function geminiScrollbar() { scope ); + appEvents.on('toggle-sidemenu', evt => { + // force updating dashboard width + scrollbar.scroll(); + }); + scope.$on('$routeChangeSuccess', () => { lastPos = 0; elem[0].scrollTop = 0; diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 776c85d96b5..7fb8ac6608c 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -196,13 +196,8 @@ } // Fix for side menu on mobile devices -.sidemenu-open.sidemenu-open--xs { - .main-view.baron { - min-width: 0%; - } -} .main-view.baron { - min-width: 99%; + min-width: unset; } .baron__clipper { From 175937a679393080d0f4276aa8a0090a44ce14c6 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 4 Apr 2018 19:26:29 +0300 Subject: [PATCH 08/26] scrollbar: remove perfect-scrollbar and add baron to package list --- package.json | 1 - yarn.lock | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 724bbffb6fa..e3c0db170b6 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,6 @@ "moment": "^2.18.1", "mousetrap": "^1.6.0", "mousetrap-global-bind": "^1.1.0", - "perfect-scrollbar": "^1.2.0", "prop-types": "^15.6.0", "react": "^16.2.0", "react-dom": "^16.2.0", diff --git a/yarn.lock b/yarn.lock index 2de60f03c27..1cc9ccc869c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1162,6 +1162,10 @@ balanced-match@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" +baron@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/baron/-/baron-3.0.3.tgz#0f0a08a567062882e130a0ecfd41a46d52103f4a" + base64-arraybuffer@0.1.5: version "0.1.5" resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8" @@ -7503,10 +7507,6 @@ 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" From b69316752a4c27b1a9011d0a0e81b36b6cc76d7e Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 4 Apr 2018 19:51:12 +0300 Subject: [PATCH 09/26] scrollbar: fix dashboard width updating for different modes --- public/app/core/components/grafana_app.ts | 1 + public/app/core/components/scroll/scroll.ts | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 798a40cb1bf..1e3f0cb9119 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -167,6 +167,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop if (sidemenuHidden) { sidemenuHidden = false; body.addClass('sidemenu-open'); + appEvents.emit('toggle-inactive-mode'); $timeout(function() { $rootScope.$broadcast('render'); }, 100); diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index 0eb1c68ab71..ebe105a4fee 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -60,10 +60,16 @@ export function geminiScrollbar() { scope ); - appEvents.on('toggle-sidemenu', evt => { - // force updating dashboard width + // force updating dashboard width + appEvents.on('toggle-sidemenu', forceUpdate); + appEvents.on('toggle-sidemenu-hidden', forceUpdate); + appEvents.on('toggle-view-mode', forceUpdate); + appEvents.on('toggle-kiosk-mode', forceUpdate); + appEvents.on('toggle-inactive-mode', forceUpdate); + + function forceUpdate() { scrollbar.scroll(); - }); + } scope.$on('$routeChangeSuccess', () => { lastPos = 0; From b4ef55f5d027014a43404658581409b4c8d82f63 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 5 Apr 2018 11:51:32 +0300 Subject: [PATCH 10/26] scrollbar: fix potential memory leaks in event handlers --- public/app/core/components/scroll/scroll.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index ebe105a4fee..12321bc4f5c 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -61,11 +61,11 @@ export function geminiScrollbar() { ); // force updating dashboard width - appEvents.on('toggle-sidemenu', forceUpdate); - appEvents.on('toggle-sidemenu-hidden', forceUpdate); - appEvents.on('toggle-view-mode', forceUpdate); - appEvents.on('toggle-kiosk-mode', forceUpdate); - appEvents.on('toggle-inactive-mode', forceUpdate); + appEvents.on('toggle-sidemenu', forceUpdate, scope); + appEvents.on('toggle-sidemenu-hidden', forceUpdate, scope); + appEvents.on('toggle-view-mode', forceUpdate, scope); + appEvents.on('toggle-kiosk-mode', forceUpdate, scope); + appEvents.on('toggle-inactive-mode', forceUpdate, scope); function forceUpdate() { scrollbar.scroll(); From fa43782299a6fde669d9ecd186eb1aa094db0067 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 5 Apr 2018 15:56:07 +0300 Subject: [PATCH 11/26] scrollbar: fix graph legend height --- public/app/plugins/panel/graph/legend.ts | 8 ++++---- public/app/plugins/panel/graph/template.ts | 4 +++- public/sass/components/_panel_graph.scss | 8 +++++++- public/sass/components/_scrollbar.scss | 4 ++-- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index c4ff5b31355..d3b548859de 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -238,10 +238,10 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { tbodyElem.append(tableHeaderElem); tbodyElem.append(seriesElements); elem.append(tbodyElem); - tbodyElem.wrap('
'); + tbodyElem.wrap('
'); } else { - elem.append('
'); - elem.find('.graph-legend-content').append(seriesElements); + elem.append('
'); + elem.find('.graph-legend-scroll').append(seriesElements); } if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) { @@ -261,7 +261,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { `; let scrollRoot = elem; - let scroller = elem.find('.graph-legend-content'); + let scroller = elem.find('.graph-legend-scroll'); // clear existing scroll bar track to prevent duplication scrollRoot.find('.baron__track').remove(); diff --git a/public/app/plugins/panel/graph/template.ts b/public/app/plugins/panel/graph/template.ts index 0b9eb8227df..c897327fe1a 100644 --- a/public/app/plugins/panel/graph/template.ts +++ b/public/app/plugins/panel/graph/template.ts @@ -3,7 +3,9 @@ var template = `
-
+
+
+
`; diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 83747d6caaf..cc5c601e0ea 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -49,6 +49,7 @@ } .graph-legend { + display: flex; flex: 0 1 auto; max-height: 30%; margin: 0; @@ -56,7 +57,8 @@ padding-top: 6px; position: relative; - height: 100%; + // fix for Firefox (white stripe on the right of scrollbar) + width: 99%; .popover-content { padding: 0; @@ -67,6 +69,10 @@ position: relative; } +.graph-legend-scroll { + position: relative; +} + .graph-legend-icon { position: relative; padding-right: 4px; diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 7fb8ac6608c..93b81fc1b4b 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -192,12 +192,12 @@ // Width needs to be set to prevent content width issues // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar) - min-width: 99%; + width: 99%; } // Fix for side menu on mobile devices .main-view.baron { - min-width: unset; + width: unset; } .baron__clipper { From 9f07ae72ee4bebc41ec06bc85793529bf045aa66 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 5 Apr 2018 16:47:20 +0300 Subject: [PATCH 12/26] scrollbar: fix search scroller in mobile view --- public/sass/components/_search.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index f54ac4b3d5c..8338a5d72ae 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -103,18 +103,20 @@ } .search-results-scroller { + display: flex; position: relative; - height: 100%; } .search-results-container { - height: 100%; display: block; padding: $spacer; position: relative; flex-grow: 10; margin-bottom: 1rem; + // Fix for search scroller in mobile view + height: unset; + .label-tag { margin-left: 6px; font-size: 11px; From d3d64337b48969d7f7367f8a5122ac3410833961 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 6 Apr 2018 20:00:03 +0300 Subject: [PATCH 13/26] scrollbar: styles cleanup --- public/app/core/components/scroll/scroll.ts | 1 - public/app/features/panel/panel_directive.ts | 2 ++ public/app/plugins/panel/graph/legend.ts | 5 ++--- public/sass/components/_panel_graph.scss | 5 ++++- public/sass/components/_scrollbar.scss | 9 ++------- 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index 12321bc4f5c..3f9865e6dce 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -77,7 +77,6 @@ export function geminiScrollbar() { }); scope.$on('$destroy', () => { - // scrollbar.destroy(); scrollbar.dispose(); }); }, diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 4edf293c801..90ff42f4ac6 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -125,6 +125,8 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { barOnCls: '_scrollbar', scrollingCls: '_scrolling', }); + + panelScrollbar.scroll(); } }); diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index f61df4d2683..752dc591147 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -18,9 +18,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { const legendRightDefaultWidth = 10; scope.$on('$destroy', function() { - if (legendScrollbar) { - legendScrollbar.dispose(); - } + destroyScrollbar(); }); ctrl.events.on('render-legend', () => { @@ -288,6 +286,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { destroyScrollbar(); legendScrollbar = baron(scrollbarParams); } + legendScrollbar.scroll(); } function destroyScrollbar() { diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index cc5c601e0ea..031192dd984 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -58,7 +58,7 @@ position: relative; // fix for Firefox (white stripe on the right of scrollbar) - width: 99%; + width: calc(100% - 1px); .popover-content { padding: 0; @@ -67,6 +67,9 @@ .graph-legend-content { position: relative; + + // fix for Firefox (white stripe on the right of scrollbar) + width: calc(100% - 1px); } .graph-legend-scroll { diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 93b81fc1b4b..51e061e54b9 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -189,10 +189,6 @@ .baron { display: inline-block; overflow: hidden; - - // Width needs to be set to prevent content width issues - // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar) - width: 99%; } // Fix for side menu on mobile devices @@ -203,7 +199,6 @@ .baron__clipper { position: relative; overflow: hidden; - height: 100%; } .baron__scroller { @@ -289,8 +284,8 @@ .baron.panel-content--scrollable { // Width needs to be set to prevent content width issues - // Set to 99% instead of 100% for fixing Firefox issue (white stripe on the right of scrollbar) - width: 99%; + // Set to less than 100% for fixing Firefox issue (white stripe on the right of scrollbar) + width: calc(100% - 2px); .baron__scroller { padding-top: 1px; From 41e5d66e399ea096bea99b5922722eb3c08b92b6 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 6 Apr 2018 20:31:44 +0300 Subject: [PATCH 14/26] scrollbar: fix add panel height bug --- public/app/features/dashboard/dashgrid/AddPanelPanel.tsx | 2 +- public/sass/components/_panel_add_panel.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx index aeb840c317a..98d1657f4bd 100644 --- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx +++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx @@ -103,7 +103,7 @@ export class AddPanelPanel extends React.Component +
diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss index ee5d757d841..4a17438ffeb 100644 --- a/public/sass/components/_panel_add_panel.scss +++ b/public/sass/components/_panel_add_panel.scss @@ -1,3 +1,7 @@ +.add-panel-container { + height: 100%; +} + .add-panel { height: 100%; From d9ba16f550afca4112fcab6a0641f164608e91d5 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Mon, 9 Apr 2018 14:21:20 +0300 Subject: [PATCH 15/26] scrollbar: fix phantomjs rendering error --- public/sass/components/_scrollbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 51e061e54b9..4bd0807bb0b 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -187,7 +187,7 @@ // Baron styles .baron { - display: inline-block; + // display: inline-block; // this brakes phantomjs rendering (width becomes 0) overflow: hidden; } From 25ec7b5b027fbd99a7dd5c4f446d9a4f5e2c44ec Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 11 Apr 2018 14:30:39 +0200 Subject: [PATCH 16/26] scrollbar: use native scroll for page --- .../app/core/components/scroll/page_scroll.ts | 37 +++++++++++++++++++ public/app/core/core.ts | 2 + public/app/partials/dashboard.html | 4 +- public/sass/components/_panel_graph.scss | 1 + public/sass/components/_scrollbar.scss | 20 ++++------ public/views/index.template.html | 3 +- 6 files changed, 50 insertions(+), 17 deletions(-) create mode 100644 public/app/core/components/scroll/page_scroll.ts diff --git a/public/app/core/components/scroll/page_scroll.ts b/public/app/core/components/scroll/page_scroll.ts new file mode 100644 index 00000000000..4782ad6d060 --- /dev/null +++ b/public/app/core/components/scroll/page_scroll.ts @@ -0,0 +1,37 @@ +import coreModule from 'app/core/core_module'; +import appEvents from 'app/core/app_events'; + +export function pageScrollbar() { + return { + restrict: 'A', + link: function(scope, elem, attrs) { + let lastPos = 0; + + appEvents.on( + 'dash-scroll', + evt => { + if (evt.restore) { + elem[0].scrollTop = lastPos; + return; + } + + lastPos = elem[0].scrollTop; + + if (evt.animate) { + elem.animate({ scrollTop: evt.pos }, 500); + } else { + elem[0].scrollTop = evt.pos; + } + }, + scope + ); + + scope.$on('$routeChangeSuccess', () => { + lastPos = 0; + elem[0].scrollTop = 0; + }); + }, + }; +} + +coreModule.directive('pageScrollbar', pageScrollbar); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 353d8762a9a..fb7021fe883 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -47,6 +47,7 @@ import { NavModelSrv, NavModel } from './nav_model_srv'; import { userPicker } from './components/user_picker'; import { teamPicker } from './components/team_picker'; import { geminiScrollbar } from './components/scroll/scroll'; +import { pageScrollbar } from './components/scroll/page_scroll'; import { gfPageDirective } from './components/gf_page'; import { orgSwitcher } from './components/org_switcher'; import { profiler } from './profiler'; @@ -85,6 +86,7 @@ export { userPicker, teamPicker, geminiScrollbar, + pageScrollbar, gfPageDirective, orgSwitcher, manageDashboardsDirective, diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index a3d5a4439ee..d07127b0115 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,8 +1,8 @@
-
-
+
+
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 031192dd984..a19e0072518 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -74,6 +74,7 @@ .graph-legend-scroll { position: relative; + overflow: auto !important; } .graph-legend-icon { diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 4bd0807bb0b..d8d698e73a6 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -106,22 +106,16 @@ opacity: 0.9; } -// Srollbars +// Scrollbars // -// ::-webkit-scrollbar { -// width: 8px; -// height: 8px; -// } - -// ::-webkit-scrollbar:hover { -// height: 8px; -// } - ::-webkit-scrollbar { - // Hide system scrollbar (Mac OS X) - width: 0; - height: 0; + width: 8px; + height: 8px; +} + +::-webkit-scrollbar:hover { + height: 8px; } ::-webkit-scrollbar-button:start:decrement, diff --git a/public/views/index.template.html b/public/views/index.template.html index 4cb4a0d57ce..9f151527b88 100644 --- a/public/views/index.template.html +++ b/public/views/index.template.html @@ -40,8 +40,7 @@
- -
+