mirror of
https://github.com/Radarr/Radarr.git
synced 2024-09-11 20:12:41 +02:00
New: Wider and taller scroll bar for the click to scrollers out there
This commit is contained in:
parent
a3e312b368
commit
6a68e5ca92
@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.thumb {
|
||||
min-height: 50px;
|
||||
min-height: 100px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
background-color: $scrollbarBackgroundColor;
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user