PLT-1917 Add 'new messages' indicator when scrolled up (#2612)

* Add 'new messages' indicator when scrolled up

* Don't show unread message alert for new chats

* Move unread alert to state and cWRProps

2 files changed, 38 insertions, 1 deletions

diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx
index cac08aa34..2bc1150a9 100644
--- a/webapp/components/posts_view.jsx
+++ b/webapp/components/posts_view.jsx
@@ -41,7 +41,8 @@ export default class PostsView extends React.Component {
         this.state = {
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             isScrolling: false,
-            topPostId: null
+            topPostId: null,
+            showUnreadMessageAlert: false
         };
     }
     static get SCROLL_TYPE_FREE() {
@@ -386,6 +387,13 @@ export default class PostsView extends React.Component {
         }
     }
     componentWillReceiveProps(nextProps) {
+        if (this.props.postList && this.props.postList.order.length) {
+            if (this.props.postList.order[0] !== nextProps.postList.order[0] && nextProps.scrollType !== PostsView.SCROLL_TYPE_BOTTOM && nextProps.scrollType !== PostsView.SCROLL_TYPE_NEW_MESSAGE) {
+                this.setState({showUnreadMessageAlert: true});
+            } else if (nextProps.scrollType === PostsView.SCROLL_TYPE_BOTTOM) {
+                this.setState({showUnreadMessageAlert: false});
+            }
+        }
         if (!this.props.isActive && nextProps.isActive) {
             this.updateState();
             PreferenceStore.addChangeListener(this.updateState);
@@ -514,6 +522,18 @@ export default class PostsView extends React.Component {
                         </div>
                     </div>
                 </div>
+                <div
+                    className='post-list__new-messages-below'
+                    onClick={this.scrollToBottomAnimated}
+                    hidden={!this.state.showUnreadMessageAlert}
+                >
+                        <i className='fa fa-arrow-circle-o-down'></i>
+                        &nbsp;
+                        <FormattedMessage
+                            id='posts_view.newMsg'
+                            defaultMessage='New Messages'
+                        />
+                </div>
             </div>
         );
     }
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 6801379ac..445ab9511 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -170,6 +170,23 @@ body.ios {
     }
 }
 
+.post-list__new-messages-below{
+	background-color: #9fa5ad;
+	border-radius: 1em;
+	bottom: 0;
+	color: white;
+	cursor: pointer;
+	display: inline-block;
+	left: 50%;
+	padding: .25em .75em;
+	position: absolute;
+	transform: translateX(-50%);
+	transition: bottom .5s cubic-bezier(0.86, 0, 0.07, 1);
+	&[hidden]{
+		bottom: -30px;
+	}
+}
+
 .file-overlay {
     color: #ffffff;
     font-size: em(20px);