From c3c62ad2ad018be6887149e92dd35bb527f55168 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Mon, 22 Aug 2016 20:35:28 -0400 Subject: 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 --- webapp/components/popover_list_members.jsx | 34 +++++++++++++++--------------- webapp/components/rhs_comment.jsx | 21 ++++++++++++------ webapp/components/rhs_root_post.jsx | 14 ++++++++---- webapp/components/rhs_thread.jsx | 25 ++++++++++++++++++++++ webapp/sass/components/_modal.scss | 8 +++++-- webapp/sass/layout/_post.scss | 1 + webapp/stores/user_store.jsx | 2 +- 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(
- - - - +
); @@ -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 = ( - ); @@ -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 (
@@ -281,6 +298,7 @@ export default class RhsThread extends React.Component { compactDisplay={this.state.compactDisplay} useMilitaryTime={this.props.useMilitaryTime} isFlagged={isRootFlagged} + status={rootStatus} />
{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 ( ); })} 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; -- cgit v1.2.3-1-g7c22