diff options
Diffstat (limited to 'app')
3 files changed, 56 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 928c49737..df3ace4c1 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -65,6 +65,22 @@ export default class ScrollableList extends PureComponent { this.handleScroll(); } + getScrollPosition = () => { + if (this.node && this.node.scrollTop > 0) { + return {height: this.node.scrollHeight, top: this.node.scrollTop}; + } else { + return null; + } + } + + updateScrollBottom = (snapshot) => { + const newScrollTop = this.node.scrollHeight - snapshot; + + if (this.node.scrollTop !== newScrollTop) { + this.node.scrollTop = newScrollTop; + } + } + getSnapshotBeforeUpdate (prevProps, prevState) { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && @@ -79,13 +95,7 @@ export default class ScrollableList extends PureComponent { componentDidUpdate (prevProps, prevState, snapshot) { // Reset the scroll position when a new child comes in in order not to // jerk the scrollbar around if you're already scrolled down the page. - if (snapshot !== null) { - const newScrollTop = this.node.scrollHeight - snapshot; - - if (this.node.scrollTop !== newScrollTop) { - this.node.scrollTop = newScrollTop; - } - } + if (snapshot !== null) this.updateScrollBottom(snapshot); } componentWillUnmount () { @@ -160,7 +170,7 @@ export default class ScrollableList extends PureComponent { intersectionObserverWrapper={this.intersectionObserverWrapper} saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null} > - {child} + {React.cloneElement(child, {getScrollPosition: this.getScrollPosition, updateScrollBottom: this.updateScrollBottom})} </IntersectionObserverArticleContainer> ))} diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index eb621d5d7..cf82c9ac6 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -45,10 +45,13 @@ export default class Status extends ImmutablePureComponent { withDismiss: PropTypes.bool, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, + getScrollPosition: PropTypes.func, + updateScrollBottom: PropTypes.func, }; state = { isExpanded: null, + autoCollapsed: false, } // Avoid checking props that are functions (and whose equality will always @@ -134,7 +137,31 @@ export default class Status extends ImmutablePureComponent { default: return false; } - }()) this.setExpansion(false); + }()) { + this.setExpansion(false); + // Hack to fix timeline jumps on second rendering when auto-collapsing + this.setState({ autoCollapsed: true }); + } + } + + getSnapshotBeforeUpdate (prevProps, prevState) { + if (this.props.getScrollPosition) { + return this.props.getScrollPosition(); + } else { + return null; + } + } + + // Hack to fix timeline jumps on second rendering when auto-collapsing + componentDidUpdate (prevProps, prevState, snapshot) { + if (this.state.autoCollapsed) { + this.setState({ autoCollapsed: false }); + if (snapshot !== null && this.props.updateScrollBottom) { + if (this.node.offsetTop < snapshot.top) { + this.props.updateScrollBottom(snapshot.height - snapshot.top); + } + } + } } // `setExpansion()` sets the value of `isExpanded` in our state. It takes diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.js b/app/javascript/flavours/glitch/features/notifications/components/notification.js index cc77426d3..6fc7173ed 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notification.js +++ b/app/javascript/flavours/glitch/features/notifications/components/notification.js @@ -16,6 +16,8 @@ export default class Notification extends ImmutablePureComponent { onMoveUp: PropTypes.func.isRequired, onMoveDown: PropTypes.func.isRequired, onMention: PropTypes.func.isRequired, + getScrollPosition: PropTypes.func, + updateScrollBottom: PropTypes.func, }; render () { @@ -25,6 +27,8 @@ export default class Notification extends ImmutablePureComponent { onMoveDown, onMoveUp, onMention, + getScrollPosition, + updateScrollBottom, } = this.props; switch(notification.get('type')) { @@ -50,6 +54,8 @@ export default class Notification extends ImmutablePureComponent { onMoveDown={onMoveDown} onMoveUp={onMoveUp} onMention={onMention} + getScrollPosition={getScrollPosition} + updateScrollBottom={updateScrollBottom} withDismiss /> ); @@ -66,6 +72,8 @@ export default class Notification extends ImmutablePureComponent { onMoveDown={onMoveDown} onMoveUp={onMoveUp} onMention={onMention} + getScrollPosition={getScrollPosition} + updateScrollBottom={updateScrollBottom} withDismiss /> ); @@ -82,6 +90,8 @@ export default class Notification extends ImmutablePureComponent { onMoveDown={onMoveDown} onMoveUp={onMoveUp} onMention={onMention} + getScrollPosition={getScrollPosition} + updateScrollBottom={updateScrollBottom} withDismiss /> ); |