diff options
author | khawerrind <khawer.zeshan@gmail.com> | 2016-12-30 21:48:37 +0500 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2016-12-30 13:48:37 -0300 |
commit | 28a7a2f200270ea64c7169403d79244babf5595b (patch) | |
tree | 73a61ef7394b09e768ff128787ff3098e6597d27 /webapp/components | |
parent | 89f1e8fc0c9d48eceb0ccf271333008444cddf93 (diff) | |
download | chat-28a7a2f200270ea64c7169403d79244babf5595b.tar.gz chat-28a7a2f200270ea64c7169403d79244babf5595b.tar.bz2 chat-28a7a2f200270ea64c7169403d79244babf5595b.zip |
PLT-3132 Add a direct message link to the contact pop-over (#4853)
* added DM button to the user picture and name popover
* removed isRequired from status and busy properties from profile_popover.jsx
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/profile_picture.jsx | 11 | ||||
-rw-r--r-- | webapp/components/profile_popover.jsx | 62 | ||||
-rw-r--r-- | webapp/components/user_profile.jsx | 11 |
3 files changed, 81 insertions, 3 deletions
diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx index 17a4ddc65..26e9f30d9 100644 --- a/webapp/components/profile_picture.jsx +++ b/webapp/components/profile_picture.jsx @@ -7,6 +7,11 @@ import React from 'react'; import {OverlayTrigger} from 'react-bootstrap'; export default class ProfilePicture 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; @@ -35,6 +40,10 @@ export default class ProfilePicture extends React.Component { return false; } + hideProfilePopover() { + this.refs.overlay.hide(); + } + render() { let statusClass = ''; if (this.props.status) { @@ -43,6 +52,7 @@ export default class ProfilePicture extends React.Component { if (this.props.user) { return ( <OverlayTrigger + ref='overlay' trigger='click' placement='right' rootClose={true} @@ -52,6 +62,7 @@ export default class ProfilePicture extends React.Component { src={this.props.src} status={this.props.status} isBusy={this.props.isBusy} + hide={this.hideProfilePopover} /> } > diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx index 8b431b643..d7d9929ee 100644 --- a/webapp/components/profile_popover.jsx +++ b/webapp/components/profile_popover.jsx @@ -4,14 +4,17 @@ import * as Utils from 'utils/utils.jsx'; import UserStore from 'stores/user_store.jsx'; import WebrtcStore from 'stores/webrtc_store.jsx'; +import TeamStore from 'stores/team_store.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import * as WebrtcActions from 'actions/webrtc_actions.jsx'; +import {openDirectChannelToUser} from 'actions/channel_actions.jsx'; import Constants from 'utils/constants.jsx'; const UserStatuses = Constants.UserStatuses; const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; import {Popover, OverlayTrigger, Tooltip} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; +import {browserHistory} from 'react-router/es6'; import React from 'react'; export default class ProfilePopover extends React.Component { @@ -19,8 +22,10 @@ export default class ProfilePopover extends React.Component { super(props); this.initWebrtc = this.initWebrtc.bind(this); + this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); this.state = { - currentUserId: UserStore.getCurrentId() + currentUserId: UserStore.getCurrentId(), + loadingDMChannel: -1 }; } shouldComponentUpdate(nextProps) { @@ -60,6 +65,33 @@ export default class ProfilePopover extends React.Component { return false; } + handleShowDirectChannel(e) { + e.preventDefault(); + + if (!this.props.user) { + return; + } + + const user = this.props.user; + + if (this.state.loadingDMChannel !== -1) { + return; + } + + this.setState({loadingDMChannel: user.id}); + + openDirectChannelToUser( + user, + (channel) => { + this.setState({loadingDMChannel: -1}); + if (this.props.hide) { + this.props.hide(); + } + browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name); + } + ); + } + initWebrtc() { if (this.props.status !== UserStatuses.OFFLINE && !WebrtcStore.isBusy()) { GlobalActions.emitCloseRightHandSide(); @@ -73,6 +105,7 @@ export default class ProfilePopover extends React.Component { delete popoverProps.src; delete popoverProps.status; delete popoverProps.isBusy; + delete popoverProps.hide; let webrtc; const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -203,6 +236,28 @@ export default class ProfilePopover extends React.Component { ); } + if (this.props.user.id !== UserStore.getCurrentId()) { + dataContent.push( + <div + data-toggle='tooltip' + key='user-popover-dm' + className='popover-dm__content' + > + <a + href='#' + className='text-nowrap text-lowercase user-popover__email' + onClick={this.handleShowDirectChannel} + > + <i className='fa fa-paper-plane'/> + <FormattedMessage + id='user_profile.send.dm' + defaultMessage='Send Message' + /> + </a> + </div> + ); + } + return ( <Popover {...popoverProps} @@ -218,7 +273,8 @@ export default class ProfilePopover extends React.Component { ProfilePopover.propTypes = Object.assign({ src: React.PropTypes.string.isRequired, user: React.PropTypes.object.isRequired, - status: React.PropTypes.string.isRequired, - isBusy: React.PropTypes.bool.isRequired + status: React.PropTypes.string, + isBusy: React.PropTypes.bool, + hide: React.PropTypes.func }, Popover.propTypes); delete ProfilePopover.propTypes.id; diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx index 807c5f023..d0267c0d8 100644 --- a/webapp/components/user_profile.jsx +++ b/webapp/components/user_profile.jsx @@ -10,6 +10,11 @@ import {OverlayTrigger} from 'react-bootstrap'; import React from 'react'; export default class UserProfile 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; @@ -42,6 +47,10 @@ export default class UserProfile extends React.Component { return false; } + hideProfilePopover() { + this.refs.overlay.hide(); + } + render() { let name = '...'; let profileImg = ''; @@ -60,6 +69,7 @@ export default class UserProfile extends React.Component { return ( <OverlayTrigger + ref='overlay' trigger='click' placement='right' rootClose={true} @@ -69,6 +79,7 @@ export default class UserProfile extends React.Component { src={profileImg} status={this.props.status} isBusy={this.props.isBusy} + hide={this.hideProfilePopover} /> } > |