IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Add 'new messages' indicator when scrolled up

* Don't show unread message alert for new chats

* Move unread alert to state and cWRProps
This commit is contained in:
Alan Mooiman
2016-04-11 09:20:12 -04:00
committed by Christopher Speller
parent 29e1a85360
commit 0d85b998ca
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
webapp/components/posts_view.jsx
View File

@@ -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>
);
}

17
webapp/sass/layout/_post.scss
View File

@@ -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);