mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Prevent timeline from moving when cursor is hovering over it (fixes #7278) (#7327)

pull/456/head
ThibG 2018-05-03 12:09:11 +02:00 committed by Eugen Rochko
parent ab773e4d5f
commit 58852695c8
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/mastodon/components/scrollable_list.js
View File

@ -35,6 +35,7 @@ export default class ScrollableList extends PureComponent {
state = { state = {
fullscreen: null, fullscreen: null,
mouseOver: false,
}; };
intersectionObserverWrapper = new IntersectionObserverWrapper(); intersectionObserverWrapper = new IntersectionObserverWrapper();
@ -71,7 +72,7 @@ export default class ScrollableList extends PureComponent {
const someItemInserted = React.Children.count(prevProps.children) > 0 && const someItemInserted = React.Children.count(prevProps.children) > 0 &&
React.Children.count(prevProps.children) < React.Children.count(this.props.children) && React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
if (someItemInserted && this.node.scrollTop > 0) { if (someItemInserted && this.node.scrollTop > 0 || this.state.mouseOver) {
return this.node.scrollHeight - this.node.scrollTop; return this.node.scrollHeight - this.node.scrollTop;
} else { } else {
return null; return null;
@ -139,6 +140,14 @@ export default class ScrollableList extends PureComponent {
this.props.onLoadMore(); this.props.onLoadMore();
} }
handleMouseEnter = () => {
this.setState({ mouseOver: true });
}
handleMouseLeave = () => {
this.setState({ mouseOver: false });
}
render () { render () {
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage, onLoadMore } = this.props; const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage, onLoadMore } = this.props;
const { fullscreen } = this.state; const { fullscreen } = this.state;
@ -149,7 +158,7 @@ export default class ScrollableList extends PureComponent {
if (isLoading || childrenCount > 0 || !emptyMessage) { if (isLoading || childrenCount > 0 || !emptyMessage) {
scrollableArea = ( 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'> <div role='feed' className='item-list'>
{prepend} {prepend}