diff options
author | Alan Mooiman <amooiman@gmail.com> | 2016-04-11 09:20:12 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-04-11 09:20:12 -0400 |
commit | 0d85b998caebf7d9d88f8b687dbcac3ded0c28d4 (patch) | |
tree | 5de7d693ce0a557cbc8ad3768f0695706f428277 /webapp | |
parent | 29e1a853601514284c2af3f3302f30ad0d3c6d54 (diff) | |
download | chat-0d85b998caebf7d9d88f8b687dbcac3ded0c28d4.tar.gz chat-0d85b998caebf7d9d88f8b687dbcac3ded0c28d4.tar.bz2 chat-0d85b998caebf7d9d88f8b687dbcac3ded0c28d4.zip |
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
Diffstat (limited to 'webapp')
-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); |