public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #15040 from grafana/14807-enable-webit-scrollbar-styles

Browse Source 
Re-enable webit-prefixed scrollbar styles
This commit is contained in:
Torkel Ödegaard
2019-01-28 17:51:39 +01:00
committed by GitHub
parent adf08bf222 cf44c0cf87
commit a7b486d998
3 changed files with 114 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/app.ts
+2
View File
@@ -19,6 +19,7 @@ import angular from 'angular';
import config from 'app/core/config'; import config from 'app/core/config';
import _ from 'lodash'; import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar';
// add move to lodash for backward compatabiltiy // add move to lodash for backward compatabiltiy
_.move = (array, fromIndex, toIndex) => { _.move = (array, fromIndex, toIndex) => {
@@ -45,6 +46,7 @@ export class GrafanaApp {
preBootModules: any[]; preBootModules: any[];
constructor() { constructor() {
addClassIfNoOverlayScrollbar('no-overlay-scrollbar');
this.preBootModules = []; this.preBootModules = [];
this.registerFunctions = {}; this.registerFunctions = {};
this.ngModuleDependencies = []; this.ngModuleDependencies = [];
public/app/core/utils/scrollbar.ts
+40
View File
@@ -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);
}
};
public/sass/components/_scrollbar.scss
+72 -73
View File
@@ -106,80 +106,79 @@
opacity: 0.9; opacity: 0.9;
} }
// // Scrollbars // Scrollbars
// // .no-overlay-scrollbar {
// ::-webkit-scrollbar {
// ::-webkit-scrollbar { width: 8px;
// width: 8px; height: 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
::-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 { .baron {
// display: inline-block; // this brakes phantomjs rendering (width becomes 0) // display: inline-block; // this brakes phantomjs rendering (width becomes 0)
overflow: hidden; overflow: hidden;