diff options
| -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 | ||||
| -rw-r--r-- | webapp/sass/layout/_post.scss | 4 |
6 files changed, 86 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 = ''; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 680c05f84..95c6e4443 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -646,6 +646,10 @@ body.ios { } } + .post__img:hover { + cursor: pointer; + } + .post--fail { position: relative; } |