mirror/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr synced 2024-12-27 02:09:59 +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 { .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;

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 { 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}

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

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