diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/posts_view.jsx | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index a4dd51e19..aedf431af 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -23,6 +23,7 @@ export default class PostsView extends React.Component { this.createPosts = this.createPosts.bind(this); this.updateScrolling = this.updateScrolling.bind(this); this.handleResize = this.handleResize.bind(this); + this.scrollToBottom = this.scrollToBottom.bind(this); this.jumpToPostNode = null; this.wasAtBottom = true; @@ -283,9 +284,7 @@ export default class PostsView extends React.Component { } updateScrolling() { if (this.props.scrollType === PostsView.SCROLL_TYPE_BOTTOM) { - window.requestAnimationFrame(() => { - this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; - }); + this.scrollToBottom(); } else if (this.props.scrollType === PostsView.SCROLL_TYPE_NEW_MESSAGE) { window.requestAnimationFrame(() => { // If separator exists scroll to it. Otherwise scroll to bottom. @@ -335,6 +334,11 @@ export default class PostsView extends React.Component { handleResize() { this.updateScrolling(); } + scrollToBottom() { + window.requestAnimationFrame(() => { + this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; + }); + } componentDidMount() { if (this.props.postList != null) { this.updateScrolling(); @@ -460,9 +464,26 @@ export default class PostsView extends React.Component { ); } + let scrollToBottomArrows = null; + if ($(window).width() <= 768) { + let scrollToBottomArrowsClass = 'post-list__arrows'; + if (this.state.isScrolling && !this.wasAtBottom) { + scrollToBottomArrowsClass += ' scrolling'; + } + + scrollToBottomArrows = ( + <div + ref='postArrows' + className={scrollToBottomArrowsClass} + onClick={this.scrollToBottom} + /> + ); + } + return ( <div className={activeClass}> {floatingTimestamp} + {scrollToBottomArrows} <div ref='postlist' className='post-list-holder-by-time' |