From 45fc9c1860504913da9e231446ad7fac39f271dd Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Wed, 23 Jan 2019 14:57:19 +0100 Subject: [PATCH 1/3] fix: Enable -webkit-scrollbar related css when there's no overlay scrollbar #14807 --- public/app/app.ts | 2 + public/app/core/utils/scrollbar.ts | 40 +++++++ public/sass/components/_scrollbar.scss | 145 ++++++++++++------------- 3 files changed, 114 insertions(+), 73 deletions(-) create mode 100644 public/app/core/utils/scrollbar.ts diff --git a/public/app/app.ts b/public/app/app.ts index 2b94ec0fe33..03f332e357b 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -19,6 +19,7 @@ import angular from 'angular'; import config from 'app/core/config'; import _ from 'lodash'; import moment from 'moment'; +import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar'; // add move to lodash for backward compatabiltiy _.move = (array, fromIndex, toIndex) => { @@ -45,6 +46,7 @@ export class GrafanaApp { preBootModules: any[]; constructor() { + addClassIfNoOverlayScrollbar('no-overlay-scrollbar'); this.preBootModules = []; this.registerFunctions = {}; this.ngModuleDependencies = []; diff --git a/public/app/core/utils/scrollbar.ts b/public/app/core/utils/scrollbar.ts new file mode 100644 index 00000000000..0c7ff391fec --- /dev/null +++ b/public/app/core/utils/scrollbar.ts @@ -0,0 +1,40 @@ +// Slightly modified: https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js +// No "dom-css" dependancy +let scrollbarWidth = null; + +export default function getScrollbarWidth() { + if (scrollbarWidth !== null) { + return scrollbarWidth; + } + /* istanbul ignore else */ + if (typeof document !== 'undefined') { + const div = document.createElement('div'); + const newStyles = { + width: '100px', + height: '100px', + position: 'absolute', + top: '-9999px', + overflow: 'scroll', + MsOverflowStyle: 'scrollbar' + }; + + Object.keys(newStyles).map(style => { + div.style[style] = newStyles[style]; + }); + + document.body.appendChild(div); + scrollbarWidth = (div.offsetWidth - div.clientWidth); + document.body.removeChild(div); + } else { + scrollbarWidth = 0; + } + return scrollbarWidth || 0; +} + +export const hasNoOverlayScrollbars = getScrollbarWidth() > 0; + +export const addClassIfNoOverlayScrollbar = (classname: string, htmlElement: HTMLElement = document.body) => { + if (hasNoOverlayScrollbars) { + htmlElement.classList.add(classname); + } +}; diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index a7ecb73b786..d57e90bce32 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -106,80 +106,79 @@ opacity: 0.9; } -// // Scrollbars -// // -// -// ::-webkit-scrollbar { -// width: 8px; -// height: 8px; -// } -// -// ::-webkit-scrollbar:hover { -// height: 8px; -// } -// -// ::-webkit-scrollbar-button:start:decrement, -// ::-webkit-scrollbar-button:end:increment { -// display: none; -// } -// ::-webkit-scrollbar-button:horizontal:decrement { -// display: none; -// } -// ::-webkit-scrollbar-button:horizontal:increment { -// display: none; -// } -// ::-webkit-scrollbar-button:vertical:decrement { -// display: none; -// } -// ::-webkit-scrollbar-button:vertical:increment { -// display: none; -// } -// ::-webkit-scrollbar-button:horizontal:decrement:active { -// background-image: none; -// } -// ::-webkit-scrollbar-button:horizontal:increment:active { -// background-image: none; -// } -// ::-webkit-scrollbar-button:vertical:decrement:active { -// background-image: none; -// } -// ::-webkit-scrollbar-button:vertical:increment:active { -// background-image: none; -// } -// ::-webkit-scrollbar-track-piece { -// background-color: transparent; -// } -// -// ::-webkit-scrollbar-thumb:vertical { -// height: 50px; -// background: -webkit-gradient( -// linear, -// left top, -// right top, -// color-stop(0%, $scrollbarBackground), -// color-stop(100%, $scrollbarBackground2) -// ); -// border: 1px solid $scrollbarBorder; -// border-top: 1px solid $scrollbarBorder; -// border-left: 1px solid $scrollbarBorder; -// } -// -// ::-webkit-scrollbar-thumb:horizontal { -// width: 50px; -// background: -webkit-gradient( -// linear, -// left top, -// left bottom, -// color-stop(0%, $scrollbarBackground), -// color-stop(100%, $scrollbarBackground2) -// ); -// border: 1px solid $scrollbarBorder; -// border-top: 1px solid $scrollbarBorder; -// border-left: 1px solid $scrollbarBorder; -// } -// -// Baron styles +// Scrollbars +.no-overlay-scrollbar { + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + ::-webkit-scrollbar:hover { + height: 8px; + } + + ::-webkit-scrollbar-button:start:decrement, + ::-webkit-scrollbar-button:end:increment { + display: none; + } + ::-webkit-scrollbar-button:horizontal:decrement { + display: none; + } + ::-webkit-scrollbar-button:horizontal:increment { + display: none; + } + ::-webkit-scrollbar-button:vertical:decrement { + display: none; + } + ::-webkit-scrollbar-button:vertical:increment { + display: none; + } + ::-webkit-scrollbar-button:horizontal:decrement:active { + background-image: none; + } + ::-webkit-scrollbar-button:horizontal:increment:active { + background-image: none; + } + ::-webkit-scrollbar-button:vertical:decrement:active { + background-image: none; + } + ::-webkit-scrollbar-button:vertical:increment:active { + background-image: none; + } + ::-webkit-scrollbar-track-piece { + background-color: transparent; + } + + ::-webkit-scrollbar-thumb:vertical { + height: 50px; + background: -webkit-gradient( + linear, + left top, + right top, + color-stop(0%, $scrollbarBackground), + color-stop(100%, $scrollbarBackground2) + ); + border: 1px solid $scrollbarBorder; + border-top: 1px solid $scrollbarBorder; + border-left: 1px solid $scrollbarBorder; + } + + ::-webkit-scrollbar-thumb:horizontal { + width: 50px; + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0%, $scrollbarBackground), + color-stop(100%, $scrollbarBackground2) + ); + border: 1px solid $scrollbarBorder; + border-top: 1px solid $scrollbarBorder; + border-left: 1px solid $scrollbarBorder; + } +} + +// Baron styles .baron { // display: inline-block; // this brakes phantomjs rendering (width becomes 0) overflow: hidden; From a91037fb50ade3f5063c3147bfbb78c81a4f8c47 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Wed, 23 Jan 2019 15:00:07 +0100 Subject: [PATCH 2/3] chore: Remove comment and unneeded export --- public/app/core/utils/scrollbar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/core/utils/scrollbar.ts b/public/app/core/utils/scrollbar.ts index 0c7ff391fec..93b706d06c8 100644 --- a/public/app/core/utils/scrollbar.ts +++ b/public/app/core/utils/scrollbar.ts @@ -6,7 +6,7 @@ export default function getScrollbarWidth() { if (scrollbarWidth !== null) { return scrollbarWidth; } - /* istanbul ignore else */ + if (typeof document !== 'undefined') { const div = document.createElement('div'); const newStyles = { @@ -31,7 +31,7 @@ export default function getScrollbarWidth() { return scrollbarWidth || 0; } -export const hasNoOverlayScrollbars = getScrollbarWidth() > 0; +const hasNoOverlayScrollbars = getScrollbarWidth() > 0; export const addClassIfNoOverlayScrollbar = (classname: string, htmlElement: HTMLElement = document.body) => { if (hasNoOverlayScrollbars) { From cf44c0cf87660b3b2ee1269f2b14f8c6b83f70b7 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Thu, 24 Jan 2019 12:51:11 +0100 Subject: [PATCH 3/3] chore: Better comment --- public/app/core/utils/scrollbar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/core/utils/scrollbar.ts b/public/app/core/utils/scrollbar.ts index 93b706d06c8..b1b098156ef 100644 --- a/public/app/core/utils/scrollbar.ts +++ b/public/app/core/utils/scrollbar.ts @@ -1,5 +1,5 @@ -// Slightly modified: https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js -// No "dom-css" dependancy +// Slightly modified, but without dependancies: +// https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js let scrollbarWidth = null; export default function getScrollbarWidth() {