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-3982 Add statuses to profile pictures in the RHS and popover member list (#3845)

Browse Source 
* Added status indicator back to popover member list

* Updating positions of status indicator (#3844)

* Fixed squishy profile pictures and added statuses to RHS pics
This commit is contained in:
Joram Wilander
2016-08-22 20:35:28 -04:00
committed by Corey Hulen
parent f0c672e3ad
commit c3c62ad2ad
7 changed files with 74 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
webapp/components/popover_list_members.jsx
View File

@@ -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'

21
webapp/components/rhs_comment.jsx
View File

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

14
webapp/components/rhs_root_post.jsx
View File

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

25
webapp/components/rhs_thread.jsx
View File

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

8
webapp/sass/components/_modal.scss
View File

@@ -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 {

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

@@ -865,6 +865,7 @@ body.ios {
height: 32px;
vertical-align: inherit;
width: 32px;
max-width:none;
}
}

2
webapp/stores/user_store.jsx
View File

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