diff options
author | Brendan Bowidas <brendanbowidas@gmail.com> | 2016-10-06 16:43:53 -0400 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2016-10-06 17:43:53 -0300 |
commit | c9793a566a4f425997448a742b16ed8754c17bae (patch) | |
tree | 40e294ddbbbcec573b6acd1b776f113d57be5709 /webapp/components | |
parent | 6e5d65d3364336846a3a7777493d8da0744044d7 (diff) | |
download | chat-c9793a566a4f425997448a742b16ed8754c17bae.tar.gz chat-c9793a566a4f425997448a742b16ed8754c17bae.tar.bz2 chat-c9793a566a4f425997448a742b16ed8754c17bae.zip |
PLT-3252 Bring up profile popover after clicking on a profile picture… (#4144)
* PLT-3252 Bring up profile popover after clicking on a profile picture in a channel
* PLT-3252 Bring up profile popover after clicking on a profile picture in a channel
remove important
* fixed 'Cannot read property first_name of undefined' bug
* fix status indicator position
* refactoring per request
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/post_view/components/post.jsx | 1 | ||||
-rw-r--r-- | webapp/components/profile_picture.jsx | 78 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 1 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 1 | ||||
-rw-r--r-- | webapp/components/search_results_item.jsx | 7 |
5 files changed, 82 insertions, 6 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 2dce093ec..e76701b6f 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -196,6 +196,7 @@ export default class Post extends React.Component { <ProfilePicture src={PostUtils.getProfilePicSrcForPost(post, timestamp)} status={this.props.status} + user={this.props.user} /> ); diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx index 5443b74d6..8e14fa5fa 100644 --- a/webapp/components/profile_picture.jsx +++ b/webapp/components/profile_picture.jsx @@ -1,7 +1,9 @@ // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. - +import * as Utils from 'utils/utils.jsx'; +import UserStore from 'stores/user_store.jsx'; import React from 'react'; +import {Popover, OverlayTrigger} from 'react-bootstrap'; export default class ProfilePicture extends React.Component { shouldComponentUpdate(nextProps) { @@ -25,11 +27,80 @@ export default class ProfilePicture extends React.Component { } render() { + let email = ''; let statusClass = ''; if (this.props.status) { statusClass = 'status-' + this.props.status; } - + if (this.props.user) { + email = this.props.user.email; + var dataContent = []; + dataContent.push( + <img + className='user-popover__image' + src={this.props.src} + height='128' + width='128' + key='user-popover-image' + /> + ); + const fullname = Utils.getFullName(this.props.user); + if (fullname) { + dataContent.push( + <div + data-toggle='tooltip' + title={fullname} + key='user-popover-fullname' + > + <p + className='text-nowrap' + > + {fullname} + </p> + </div> + ); + } + if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user.id === UserStore.getCurrentId()) { + dataContent.push( + <div + data-toggle='tooltip' + title={email} + key='user-popover-email' + > + <a + href={'mailto:' + email} + className='text-nowrap text-lowercase user-popover__email' + > + {email} + </a> + </div> + ); + } + return ( + <OverlayTrigger + trigger='click' + placement='right' + rootClose={true} + overlay={ + <Popover + title={'@' + this.props.user.username} + id='user-profile-popover' + > + {dataContent} + </Popover> + } + > + <span className={`status-wrapper ${statusClass}`}> + <img + className='more-modal__image' + width={this.props.width} + height={this.props.width} + src={this.props.src} + /> + </span> + </OverlayTrigger> + ); + } return ( <span className={`status-wrapper ${statusClass}`}> <img @@ -51,5 +122,6 @@ ProfilePicture.propTypes = { src: React.PropTypes.string.isRequired, status: React.PropTypes.string, width: React.PropTypes.string, - height: React.PropTypes.string + height: React.PropTypes.string, + user: React.PropTypes.object }; diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 18e4b4d1c..938740520 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -283,6 +283,7 @@ export default class RhsComment extends React.Component { status={this.props.status} width='36' height='36' + user={this.props.user} /> ); diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 983469f50..7d643bd38 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -284,6 +284,7 @@ export default class RhsRootPost extends React.Component { status={this.props.status} width='36' height='36' + user={this.props.user} /> ); diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx index 1d36f7543..a03bb22ad 100644 --- a/webapp/components/search_results_item.jsx +++ b/webapp/components/search_results_item.jsx @@ -4,6 +4,7 @@ import $ from 'jquery'; import PostMessageContainer from 'components/post_view/components/post_message_container.jsx'; import UserProfile from './user_profile.jsx'; +import ProfilePicture from './profile_picture.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; @@ -97,11 +98,11 @@ export default class SearchResultsItem extends React.Component { } const profilePic = ( - <img + <ProfilePicture src={PostUtils.getProfilePicSrcForPost(post, timestamp)} - height='36' - width='36' + user={this.props.user} /> + ); let compactClass = ''; |