diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2018-05-06 11:32:56 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-05-06 11:32:56 -0400 |
commit | 4480cd745ffb4759d08bf83cad86ef42b9906a1f (patch) | |
tree | 338287dff7527893d5ce011fd4cc38138cb519b5 /app/javascript/flavours/glitch/components | |
parent | 06770656ebe36191a5f60895af187fb347e13510 (diff) | |
parent | 32974a58dcf5a8db39a9c0378f923a40d787cad3 (diff) |
Merge pull request #460 from ThibG/glitch-soc/features/do-not-scroll-when-mouse-over
Prevent timeline from moving when cursor is hovering over it
Diffstat (limited to 'app/javascript/flavours/glitch/components')
-rw-r--r-- | app/javascript/flavours/glitch/components/scrollable_list.js | 13 |
1 files changed, 11 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index df3ace4c1..b8281b1ee 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -35,6 +35,7 @@ export default class ScrollableList extends PureComponent { state = { fullscreen: null, + mouseOver: false, }; intersectionObserverWrapper = new IntersectionObserverWrapper(); @@ -85,7 +86,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if (someItemInserted && this.node.scrollTop > 0) { + if (someItemInserted && this.node.scrollTop > 0 || (this.state.mouseOver && !prevProps.isLoading)) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; @@ -147,6 +148,14 @@ export default class ScrollableList extends PureComponent { this.props.onScrollToBottom(); } + handleMouseEnter = () => { + this.setState({ mouseOver: true }); + } + + handleMouseLeave = () => { + this.setState({ mouseOver: false }); + } + render () { const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props; const { fullscreen } = this.state; @@ -157,7 +166,7 @@ export default class ScrollableList extends PureComponent { if (isLoading || childrenCount > 0 || !emptyMessage) { scrollableArea = ( - <div className={classNames('scrollable', { fullscreen })} ref={this.setRef}> + <div className={classNames('scrollable', { fullscreen })} ref={this.setRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <div role='feed' className='item-list'> {prepend} |