diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/posts_view.jsx | 13 | ||||
-rw-r--r-- | web/react/components/posts_view_container.jsx | 2 |
2 files changed, 14 insertions, 1 deletions
diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 2b81d1d79..b782268fa 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -30,6 +30,9 @@ export default class PostsView extends React.Component { static get SIDEBAR_OPEN() { return 3; } + static get SCROLL_TYPE_NEW_MESSAGE() { + return 4; + } isAtBottom() { return ((this.refs.postlist.scrollHeight - this.refs.postlist.scrollTop) === this.refs.postlist.clientHeight); } @@ -145,6 +148,7 @@ export default class PostsView extends React.Component { <div id={newSeparatorId} key='unviewed' + ref='newMessageSeparator' className='new-separator' > <hr @@ -165,6 +169,15 @@ export default class PostsView extends React.Component { window.requestAnimationFrame(() => { this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; }); + } else if (this.props.scrollType === PostsView.SCROLL_TYPE_NEW_MESSAGE) { + window.requestAnimationFrame(() => { + // If separator exists scroll to it. Otherwise scroll to bottom. + if (this.refs.newMessageSeparator) { + this.refs.newMessageSeparator.scrollIntoView(); + } else { + this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; + } + }); } else if (this.props.scrollType === PostsView.SCROLL_TYPE_POST && this.props.scrollPost) { window.requestAnimationFrame(() => { const postNode = ReactDOM.findDOMNode(this.refs[this.props.scrollPost]); diff --git a/web/react/components/posts_view_container.jsx b/web/react/components/posts_view_container.jsx index 5059747bd..5037a86cd 100644 --- a/web/react/components/posts_view_container.jsx +++ b/web/react/components/posts_view_container.jsx @@ -109,7 +109,7 @@ export default class PostsViewContainer extends React.Component { this.setState({ currentChannelIndex: newIndex, currentLastViewed: lastViewed, - scrollType: PostsView.SCROLL_TYPE_BOTTOM, + scrollType: PostsView.SCROLL_TYPE_NEW_MESSAGE, channels, postLists}); } |