IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues 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
commit a7b486d998
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 114 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/app.ts
View File

@ -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 = [];

40
public/app/core/utils/scrollbar.ts Normal file
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);
}
};

145
public/sass/components/_scrollbar.scss
View File

@ -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;