mirror/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr synced 2024-12-26 09:49:00 +00:00
Code Issues Releases Wiki Activity

New: Wider and taller scroll bar for the click to scrollers out there

Browse source
This commit is contained in:
Mark McDowall 2019-07-04 19:53:18 -07:00 committed by Qstick
parent a3e312b368
commit 6a68e5ca92
3 changed files with 49 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Components/Scroller/OverlayScroller.css
View file

@ -3,7 +3,7 @@
}
.thumb {
min-height: 50px;
min-height: 100px;
border: 1px solid transparent;
border-radius: 5px;
background-color: $scrollbarBackgroundColor;

46
frontend/src/Components/Scroller/OverlayScroller.js
View file

@ -4,6 +4,8 @@ import { Scrollbars } from 'react-custom-scrollbars';
import { scrollDirections } from 'Helpers/Props';
import styles from './OverlayScroller.css';
const SCROLLBAR_SIZE = 10;
class OverlayScroller extends Component {
//
@ -21,7 +23,11 @@ class OverlayScroller extends Component {
scrollTop
} = this.props;
if (!this._isScrolling && scrollTop != null && scrollTop !== prevProps.scrollTop) {
if (
!this._isScrolling &&
scrollTop != null &&
scrollTop !== prevProps.scrollTop
) {
this._scroller.scrollTop(scrollTop);
}
}
@ -42,6 +48,42 @@ class OverlayScroller extends Component {
);
}
_renderTrackHorizontal = ({ style, props }) => {
const finalStyle = {
...style,
right: 2,
bottom: 2,
left: 2,
borderRadius: 3,
height: SCROLLBAR_SIZE
};
return (
<div
style={finalStyle}
{...props}
/>
);
}
_renderTrackVertical = ({ style, props }) => {
const finalStyle = {
...style,
right: 2,
bottom: 2,
top: 2,
borderRadius: 3,
width: SCROLLBAR_SIZE
};
return (
<div
style={finalStyle}
{...props}
/>
);
}
_renderView = (props) => {
return (
<div
@ -91,6 +133,8 @@ class OverlayScroller extends Component {
ref={this._setScrollRef}
autoHide={autoHide}
hideTracksWhenNotNeeded={autoScroll}
renderTrackHorizontal={this._renderTrackHorizontal}
renderTrackVertical={this._renderTrackVertical}
renderThumbHorizontal={this._renderThumb}
renderThumbVertical={this._renderThumb}
renderView={this._renderView}

6
frontend/src/Styles/Mixins/scroller.css
View file

@ -1,7 +1,7 @@
@define-mixin scrollbar {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
}
@ -13,7 +13,7 @@
@define-mixin scrollbarThumb {
&::-webkit-scrollbar-thumb {
min-height: 50px;
min-height: 100px;
border: 1px solid transparent;
border-radius: 5px;
background-color: $scrollbarBackgroundColor;