PLT-3982 Add statuses to profile pictures in the RHS and popover member list (#3845)

* Added status indicator back to popover member list

* Updating positions of status indicator (#3844)

* Fixed squishy profile pictures and added statuses to RHS pics

7 files changed, 74 insertions, 31 deletions

diff --git a/webapp/components/popover_list_members.jsx b/webapp/components/popover_list_members.jsx
index 18bde1bc2..bfbe66677 100644
--- a/webapp/components/popover_list_members.jsx
+++ b/webapp/components/popover_list_members.jsx
@@ -1,20 +1,21 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
-import {Popover, Overlay} from 'react-bootstrap';
+
+import Client from 'client/web_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
-import Client from 'client/web_client.jsx';
 
+import $ from 'jquery';
+import React from 'react';
+import {Popover, Overlay} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
 
-import React from 'react';
-
 export default class PopoverListMembers extends React.Component {
     constructor(props) {
         super(props);
@@ -89,24 +90,23 @@ export default class PopoverListMembers extends React.Component {
                 }
 
                 if (name) {
-                    if (!m.status) {
-                        var status = UserStore.getStatus(m.id);
-                        m.status = status ? 'status-' + status : '';
+                    let status;
+                    if (m.status) {
+                        status = m.status;
+                    } else {
+                        status = UserStore.getStatus(m.id);
                     }
                     popoverHtml.push(
                         <div
                             className='more-modal__row'
                             key={'popover-member-' + i}
                         >
-
-                            <span className={`more-modal__image-wrapper ${m.status}`}>
-                                <img
-                                    className='more-modal__image'
-                                    width='26px'
-                                    height='26px'
-                                    src={`${Client.getUsersRoute()}/${m.id}/image?time=${m.update_at}`}
-                                />
-                            </span>
+                            <ProfilePicture
+                                src={`${Client.getUsersRoute()}/${m.id}/image?time=${m.update_at}`}
+                                status={status}
+                                width='26'
+                                height='26'
+                            />
                             <div className='more-modal__details'>
                                 <div
                                     className='more-modal__name'
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index a90380510..92182e27a 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -4,6 +4,7 @@
 import UserProfile from './user_profile.jsx';
 import FileAttachmentList from './file_attachment_list.jsx';
 import PendingPostOptions from 'components/post_view/components/pending_post_options.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -13,7 +14,7 @@ import {flagPost, unflagPost} from 'actions/post_actions.jsx';
 
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
-import Client from 'client/web_client.jsx';
+import * as PostUtils from 'utils/post_utils.jsx';
 
 import Constants from 'utils/constants.jsx';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
@@ -41,6 +42,10 @@ export default class RhsComment extends React.Component {
     }
 
     shouldComponentUpdate(nextProps) {
+        if (nextProps.status !== this.props.status) {
+            return true;
+        }
+
         if (nextProps.compactDisplay !== this.props.compactDisplay) {
             return true;
         }
@@ -75,7 +80,7 @@ export default class RhsComment extends React.Component {
     }
 
     createDropdown() {
-        var post = this.props.post;
+        const post = this.props.post;
 
         if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING || post.state === Constants.POST_DELETED) {
             return '';
@@ -212,7 +217,7 @@ export default class RhsComment extends React.Component {
     }
 
     render() {
-        var post = this.props.post;
+        const post = this.props.post;
         const flagIcon = Constants.FLAG_ICON_SVG;
 
         var currentUserCss = '';
@@ -258,10 +263,11 @@ export default class RhsComment extends React.Component {
         }
 
         let profilePic = (
-            <img
-                src={Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp}
-                height='36'
+            <ProfilePicture
+                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                status={this.props.status}
                 width='36'
+                height='36'
             />
         );
 
@@ -385,5 +391,6 @@ RhsComment.propTypes = {
     currentUser: React.PropTypes.object.isRequired,
     compactDisplay: React.PropTypes.bool,
     useMilitaryTime: React.PropTypes.bool.isRequired,
-    isFlagged: React.PropTypes.bool
+    isFlagged: React.PropTypes.bool,
+    status: React.PropTypes.string
 };
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 423abcf82..cbb000922 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -4,6 +4,7 @@
 import UserProfile from './user_profile.jsx';
 import PostBodyAdditionalContent from 'components/post_view/components/post_body_additional_content.jsx';
 import FileAttachmentList from './file_attachment_list.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -40,6 +41,10 @@ export default class RhsRootPost extends React.Component {
     }
 
     shouldComponentUpdate(nextProps) {
+        if (nextProps.status !== this.props.status) {
+            return true;
+        }
+
         if (nextProps.compactDisplay !== this.props.compactDisplay) {
             return true;
         }
@@ -276,11 +281,11 @@ export default class RhsRootPost extends React.Component {
         }
 
         let profilePic = (
-            <img
-                className='post-profile-img'
+            <ProfilePicture
                 src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
-                height='36'
+                status={this.props.status}
                 width='36'
+                height='36'
             />
         );
 
@@ -410,5 +415,6 @@ RhsRootPost.propTypes = {
     commentCount: React.PropTypes.number,
     compactDisplay: React.PropTypes.bool,
     useMilitaryTime: React.PropTypes.bool.isRequired,
-    isFlagged: React.PropTypes.bool
+    isFlagged: React.PropTypes.bool,
+    status: React.PropTypes.string
 };
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index 856a686cb..b51a12792 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -55,6 +55,7 @@ export default class RhsThread extends React.Component {
         this.onUserChange = this.onUserChange.bind(this);
         this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
+        this.onStatusChange = this.onStatusChange.bind(this);
         this.handleResize = this.handleResize.bind(this);
 
         const state = this.getPosts();
@@ -63,6 +64,7 @@ export default class RhsThread extends React.Component {
         state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
         state.compactDisplay = PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT;
         state.flaggedPosts = PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST);
+        state.statuses = Object.assign({}, UserStore.getStatuses());
 
         this.state = state;
     }
@@ -72,6 +74,7 @@ export default class RhsThread extends React.Component {
         PostStore.addChangeListener(this.onPostChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
         UserStore.addChangeListener(this.onUserChange);
+        UserStore.addStatusesChangeListener(this.onStatusChange);
 
         this.scrollToBottom();
         window.addEventListener('resize', this.handleResize);
@@ -84,6 +87,7 @@ export default class RhsThread extends React.Component {
         PostStore.removeChangeListener(this.onPostChange);
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
         UserStore.removeChangeListener(this.onUserChange);
+        UserStore.removeStatusesChangeListener(this.onStatusChange);
 
         window.removeEventListener('resize', this.handleResize);
 
@@ -106,6 +110,10 @@ export default class RhsThread extends React.Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
+        if (!Utils.areObjectsEqual(nextState.statuses, this.state.statuses)) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextState.postsArray, this.state.postsArray)) {
             return true;
         }
@@ -168,6 +176,10 @@ export default class RhsThread extends React.Component {
         }
     }
 
+    onStatusChange() {
+        this.setState({statuses: Object.assign({}, UserStore.getStatuses())});
+    }
+
     getPosts() {
         const selected = PostStore.getSelectedPost();
         const posts = PostStore.getSelectedPostThread();
@@ -251,6 +263,11 @@ export default class RhsThread extends React.Component {
             isRootFlagged = this.state.flaggedPosts.get(selected.id) === 'true';
         }
 
+        let rootStatus = 'offline';
+        if (this.state.statuses) {
+            rootStatus = this.state.statuses[profile.id] || 'offline';
+        }
+
         return (
             <div className='post-right__container'>
                 <FileUploadOverlay overlayType='right'/>
@@ -281,6 +298,7 @@ export default class RhsThread extends React.Component {
                                 compactDisplay={this.state.compactDisplay}
                                 useMilitaryTime={this.props.useMilitaryTime}
                                 isFlagged={isRootFlagged}
+                                status={rootStatus}
                             />
                             <div className='post-right-comments-container'>
                                 {postsArray.map((comPost) => {
@@ -295,6 +313,12 @@ export default class RhsThread extends React.Component {
                                     if (this.state.flaggedPosts) {
                                         isFlagged = this.state.flaggedPosts.get(comPost.id) === 'true';
                                     }
+
+                                    let status = 'offline';
+                                    if (this.state.statuses) {
+                                        status = this.state.statuses[p.id] || 'offline';
+                                    }
+
                                     return (
                                         <Comment
                                             ref={comPost.id}
@@ -305,6 +329,7 @@ export default class RhsThread extends React.Component {
                                             compactDisplay={this.state.compactDisplay}
                                             useMilitaryTime={this.props.useMilitaryTime}
                                             isFlagged={isFlagged}
+                                            status={status}
                                         />
                                     );
                                 })}
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index a12856c63..837db2f44 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -485,8 +485,6 @@
 
 
 .status-wrapper {
-    display: inline-block;
-    margin-right: 3px;
     position: relative;
 
     &:after {
@@ -517,6 +515,12 @@
 
         .more-modal__row {
             padding: 5px 10px;
+
+            .status-wrapper {
+                &:after {
+                    bottom: 0;
+                }
+            }
         }
 
         .more-modal__name {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 4437e4ce3..c5901ca0e 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -865,6 +865,7 @@ body.ios {
             height: 32px;
             vertical-align: inherit;
             width: 32px;
+            max-width:none;
         }
     }
 
diff --git a/webapp/stores/user_store.jsx b/webapp/stores/user_store.jsx
index 99550f3ce..ca4284d29 100644
--- a/webapp/stores/user_store.jsx
+++ b/webapp/stores/user_store.jsx
@@ -330,7 +330,7 @@ class UserStoreClass extends EventEmitter {
 }
 
 var UserStore = new UserStoreClass();
-UserStore.setMaxListeners(15);
+UserStore.setMaxListeners(16);
 
 UserStore.dispatchToken = AppDispatcher.register((payload) => {
     var action = payload.action;