diff options
| -rw-r--r-- | webapp/components/posts_view.jsx | 22 | ||||
| -rw-r--r-- | webapp/sass/layout/_post.scss | 17 |
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> + + <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); |