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..b1b098156ef --- /dev/null +++ b/public/app/core/utils/scrollbar.ts @@ -0,0 +1,40 @@ +// 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() { + if (scrollbarWidth !== null) { + return scrollbarWidth; + } + + 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; +} + +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;