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 {
|
.thumb {
|
||||||
min-height: 50px;
|
min-height: 100px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: $scrollbarBackgroundColor;
|
background-color: $scrollbarBackgroundColor;
|
||||||
|
@ -4,6 +4,8 @@ import { Scrollbars } from 'react-custom-scrollbars';
|
|||||||
import { scrollDirections } from 'Helpers/Props';
|
import { scrollDirections } from 'Helpers/Props';
|
||||||
import styles from './OverlayScroller.css';
|
import styles from './OverlayScroller.css';
|
||||||
|
|
||||||
|
const SCROLLBAR_SIZE = 10;
|
||||||
|
|
||||||
class OverlayScroller extends Component {
|
class OverlayScroller extends Component {
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -21,7 +23,11 @@ class OverlayScroller extends Component {
|
|||||||
scrollTop
|
scrollTop
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
if (!this._isScrolling && scrollTop != null && scrollTop !== prevProps.scrollTop) {
|
if (
|
||||||
|
!this._isScrolling &&
|
||||||
|
scrollTop != null &&
|
||||||
|
scrollTop !== prevProps.scrollTop
|
||||||
|
) {
|
||||||
this._scroller.scrollTop(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) => {
|
_renderView = (props) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -91,6 +133,8 @@ class OverlayScroller extends Component {
|
|||||||
ref={this._setScrollRef}
|
ref={this._setScrollRef}
|
||||||
autoHide={autoHide}
|
autoHide={autoHide}
|
||||||
hideTracksWhenNotNeeded={autoScroll}
|
hideTracksWhenNotNeeded={autoScroll}
|
||||||
|
renderTrackHorizontal={this._renderTrackHorizontal}
|
||||||
|
renderTrackVertical={this._renderTrackVertical}
|
||||||
renderThumbHorizontal={this._renderThumb}
|
renderThumbHorizontal={this._renderThumb}
|
||||||
renderThumbVertical={this._renderThumb}
|
renderThumbVertical={this._renderThumb}
|
||||||
renderView={this._renderView}
|
renderView={this._renderView}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@define-mixin scrollbar {
|
@define-mixin scrollbar {
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 10px;
|
||||||
height: 6px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
@define-mixin scrollbarThumb {
|
@define-mixin scrollbarThumb {
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
min-height: 50px;
|
min-height: 100px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: $scrollbarBackgroundColor;
|
background-color: $scrollbarBackgroundColor;
|
||||||
|
Loading…
Reference in New Issue
Block a user