3g0st
/
mastodon-docker-playground
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
signup-info-prompt
beatrix 2018-05-06 11:32:56 -04:00 committed by GitHub
parent 06770656eb 32974a58dc
commit 4480cd745f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/flavours/glitch/components/scrollable_list.js
View File

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