PLT-4860 Make ProfilePopover into it's own component and use it consistently everywhere (#4701)
* PLT-4860 - Use same User Popover everywhere. Refactor out the ProfilePopover into it's own component and give it the union of all the features of the previous two implementations, and make sure all the necessary data for it to work consistently everywhere is provided through the props wherever it is used. * Don't show popover for webhook posts in main view. * No popover on RHS when it's a webhook post. * Fix style. * Don't send in user when it's a system message. * Fix some duplication of code.
Этот коммит содержится в:
George Goldberg
коммит произвёл
enahum
enahum
родитель
52c4538817
Коммит
a857cf18f4
@@ -1,38 +1,15 @@
|
||||
// Copyright (c) 2015 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 UserStore from 'stores/user_store.jsx';
|
||||
import WebrtcStore from 'stores/webrtc_store.jsx';
|
||||
import * as GlobalActions from 'actions/global_actions.jsx';
|
||||
import * as WebrtcActions from 'actions/webrtc_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 {OverlayTrigger} from 'react-bootstrap';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default class UserProfile extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.initWebrtc = this.initWebrtc.bind(this);
|
||||
this.state = {
|
||||
currentUserId: UserStore.getCurrentId()
|
||||
};
|
||||
}
|
||||
|
||||
initWebrtc() {
|
||||
if (this.props.status !== UserStatuses.OFFLINE && !WebrtcStore.isBusy()) {
|
||||
GlobalActions.emitCloseRightHandSide();
|
||||
WebrtcActions.initWebrtc(this.props.user.id, true);
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
|
||||
return true;
|
||||
@@ -67,11 +44,9 @@ export default class UserProfile extends React.Component {
|
||||
|
||||
render() {
|
||||
let name = '...';
|
||||
let email = '';
|
||||
let profileImg = '';
|
||||
if (this.props.user) {
|
||||
name = Utils.displayUsername(this.props.user.id);
|
||||
email = this.props.user.email;
|
||||
profileImg = Client.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.update_at;
|
||||
}
|
||||
|
||||
@@ -79,155 +54,22 @@ export default class UserProfile extends React.Component {
|
||||
name = this.props.overwriteName;
|
||||
}
|
||||
|
||||
if (this.props.overwriteImage) {
|
||||
profileImg = this.props.overwriteImage;
|
||||
}
|
||||
|
||||
if (this.props.disablePopover) {
|
||||
return <div className='user-popover'>{name}</div>;
|
||||
}
|
||||
|
||||
let webrtc;
|
||||
const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
||||
|
||||
const webrtcEnabled = global.mm_config.EnableWebrtc === 'true' && userMedia && Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW);
|
||||
|
||||
if (webrtcEnabled && this.props.user.id !== this.state.currentUserId) {
|
||||
const isOnline = this.props.status !== UserStatuses.OFFLINE;
|
||||
let webrtcMessage;
|
||||
let circleClass = 'offline';
|
||||
if (isOnline && !this.props.isBusy) {
|
||||
circleClass = '';
|
||||
webrtcMessage = (
|
||||
<FormattedMessage
|
||||
id='user_profile.webrtc.call'
|
||||
defaultMessage='Start Video Call'
|
||||
/>
|
||||
);
|
||||
} else if (this.props.isBusy) {
|
||||
webrtcMessage = (
|
||||
<FormattedMessage
|
||||
id='user_profile.webrtc.unavailable'
|
||||
defaultMessage='New call unavailable until your existing call ends'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
webrtcMessage = (
|
||||
<FormattedMessage
|
||||
id='user_profile.webrtc.offline'
|
||||
defaultMessage='The user is offline'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const webrtcTooltip = (
|
||||
<Tooltip id='webrtcTooltip'>{webrtcMessage}</Tooltip>
|
||||
);
|
||||
|
||||
webrtc = (
|
||||
<div
|
||||
className='webrtc__user-profile'
|
||||
key='makeCall'
|
||||
>
|
||||
<a
|
||||
href='#'
|
||||
onClick={() => this.initWebrtc()}
|
||||
disabled={!isOnline}
|
||||
>
|
||||
<OverlayTrigger
|
||||
delayShow={Constants.WEBRTC_TIME_DELAY}
|
||||
placement='top'
|
||||
overlay={webrtcTooltip}
|
||||
>
|
||||
<div
|
||||
id='webrtc-btn'
|
||||
className={'webrtc__button ' + circleClass}
|
||||
>
|
||||
<span dangerouslySetInnerHTML={{__html: Constants.VIDEO_ICON}}/>
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
var dataContent = [];
|
||||
dataContent.push(
|
||||
<img
|
||||
className='user-popover__image'
|
||||
src={profileImg}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
dataContent.push(webrtc);
|
||||
|
||||
if (this.props.user.position) {
|
||||
const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
|
||||
dataContent.push(
|
||||
<div
|
||||
data-toggle='tooltip'
|
||||
title={position}
|
||||
key='user-popover-position'
|
||||
>
|
||||
<p
|
||||
className='text-nowrap'
|
||||
>
|
||||
{position}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser()) {
|
||||
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>
|
||||
<ProfilePopover
|
||||
user={this.props.user}
|
||||
src={profileImg}
|
||||
status={this.props.status}
|
||||
isBusy={this.props.isBusy}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div
|
||||
|
||||
Ссылка в новой задаче
Block a user