Merge pull request #833 from mattermost/plt-417

PLT-417 Fix scrolling related to RHS.

web/react/components/post_list.jsx

@@ -128,6 +128,15 @@ export default class PostList extends React.Component {
                 this.userHasSeenNew = true;
             }
             this.isUserScroll = true;
+
+            $('.top-visible-post').removeClass('top-visible-post');
+
+            $(React.findDOMNode(this.refs.postlistcontent)).children().each(function select() {
+                if ($(this).position().top + $(this).height() / 2 > 0) {
+                    $(this).addClass('top-visible-post');
+                    return false;
+                }
+            });
         });
 
         $('.post-list__content div .post').removeClass('post--last');
@@ -665,7 +674,10 @@ export default class PostList extends React.Component {
                 className={'post-list-holder-by-time ' + activeClass}
             >
                 <div className='post-list__table'>
-                    <div className='post-list__content'>
+                    <div
+                        ref='postlistcontent'
+                        className='post-list__content'
+                    >
                         {moreMessages}
                         {postCtls}
                     </div>

web/react/components/sidebar_right.jsx

@@ -14,9 +14,10 @@ export default class SidebarRight extends React.Component {
     constructor(props) {
         super(props);
 
+        this.plScrolledToBottom = true;
+
         this.onSelectedChange = this.onSelectedChange.bind(this);
         this.onSearchChange = this.onSearchChange.bind(this);
-        this.resize = this.resize.bind(this);
 
         this.state = getStateFromStores();
     }
@@ -28,6 +29,14 @@ export default class SidebarRight extends React.Component {
         PostStore.removeSearchChangeListener(this.onSearchChange);
         PostStore.removeSelectedPostChangeListener(this.onSelectedChange);
     }
+    componentDidUpdate() {
+        if (!this.plScrolledToBottom) {
+            $('.top-visible-post')[0].scrollIntoView();
+        } else {
+            var postHolder = $('.post-list-holder-by-time');
+            postHolder.scrollTop(postHolder[0].scrollHeight);
+        }
+    }
     onSelectedChange(fromSearch) {
         var newState = getStateFromStores(fromSearch);
         newState.from_search = fromSearch;
@@ -41,15 +50,15 @@ export default class SidebarRight extends React.Component {
             this.setState(newState);
         }
     }
-    resize() {
-        var postHolder = $('.post-list-holder-by-time');
-        postHolder[0].scrollTop = postHolder[0].scrollHeight - 224;
-    }
     render() {
+        var postHolder = $('.post-list-holder-by-time');
+        const position = postHolder.scrollTop() + postHolder.height() + 14;
+        const bottom = postHolder[0].scrollHeight;
+        this.plScrolledToBottom = position >= bottom;
+
         if (!(this.state.search_visible || this.state.post_right_visible)) {
             $('.inner__wrap').removeClass('move--left').removeClass('move--right');
             $('.sidebar--right').removeClass('move--left');
-            this.resize();
             return (
                 <div></div>
             );
@@ -59,8 +68,8 @@ export default class SidebarRight extends React.Component {
         $('.sidebar--left').removeClass('move--right');
         $('.sidebar--right').addClass('move--left');
         $('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
-        this.resize();
+
-        setTimeout(function overlayTimer() {
+        setTimeout(() => {
             $('.sidebar__overlay').fadeOut('200', function fadeOverlay() {
                 $(this).remove();
             });