diff options
author | Saturnino Abril <saturnino.abril@gmail.com> | 2017-05-01 23:08:54 +0900 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2017-05-01 10:08:54 -0400 |
commit | 83f819451a80a767170b927eb2f0d5ed63f03239 (patch) | |
tree | d1a5e0ff5078c12c7c292e6ad9123c0e5bc4fb4e /webapp/components/profile_popover/atmention_profile_popover.jsx | |
parent | 597641545d1be04a1ba6c0b2d35c75fc2cfc8737 (diff) | |
download | chat-83f819451a80a767170b927eb2f0d5ed63f03239.tar.gz chat-83f819451a80a767170b927eb2f0d5ed63f03239.tar.bz2 chat-83f819451a80a767170b927eb2f0d5ed63f03239.zip |
[GH-5915] Clicking on @mention of a user in a post shows the profile popover (#6129)
* post message at-mention profile pop-over
* remove hover effect to special mentions
* make non-clickable the non-existing at-mention username
* fix "video call" position
* use usernameMap instead of initially defined liteUsernameMap
* update per comments
Diffstat (limited to 'webapp/components/profile_popover/atmention_profile_popover.jsx')
-rw-r--r-- | webapp/components/profile_popover/atmention_profile_popover.jsx | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/webapp/components/profile_popover/atmention_profile_popover.jsx b/webapp/components/profile_popover/atmention_profile_popover.jsx new file mode 100644 index 000000000..47c625f64 --- /dev/null +++ b/webapp/components/profile_popover/atmention_profile_popover.jsx @@ -0,0 +1,95 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import ProfilePopover from './profile_popover.jsx'; +import * as Utils from 'utils/utils.jsx'; +import Client from 'client/web_client.jsx'; + +import {OverlayTrigger} from 'react-bootstrap'; + +import React from 'react'; + +export default class AtMentionProfile extends React.Component { + constructor(props) { + super(props); + + this.hideProfilePopover = this.hideProfilePopover.bind(this); + } + + shouldComponentUpdate(nextProps) { + if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { + return true; + } + + if (nextProps.overwriteImage !== this.props.overwriteImage) { + return true; + } + + if (nextProps.disablePopover !== this.props.disablePopover) { + return true; + } + + if (nextProps.displayNameType !== this.props.displayNameType) { + return true; + } + + if (nextProps.status !== this.props.status) { + return true; + } + + if (nextProps.isBusy !== this.props.isBusy) { + return true; + } + + return false; + } + + hideProfilePopover() { + this.refs.overlay.hide(); + } + + render() { + let profileImg = ''; + if (this.props.user) { + profileImg = Client.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update; + } + + if (this.props.disablePopover) { + return <a className='mention-link'>{'@' + this.props.username}</a>; + } + + return ( + <OverlayTrigger + ref='overlay' + trigger='click' + placement='right' + rootClose={true} + overlay={ + <ProfilePopover + user={this.props.user} + src={profileImg} + status={this.props.status} + isBusy={this.props.isBusy} + hide={this.hideProfilePopover} + /> + } + > + <a className='mention-link'>{'@' + this.props.username}</a> + </OverlayTrigger> + ); + } +} + +AtMentionProfile.defaultProps = { + overwriteImage: '', + disablePopover: false +}; +AtMentionProfile.propTypes = { + user: React.PropTypes.object.isRequired, + username: React.PropTypes.string.isRequired, + overwriteImage: React.PropTypes.string, + disablePopover: React.PropTypes.bool, + displayNameType: React.PropTypes.string, + status: React.PropTypes.string, + isBusy: React.PropTypes.bool +}; |