diff options
Diffstat (limited to 'webapp/components')
14 files changed, 76 insertions, 238 deletions
diff --git a/webapp/components/add_users_to_team/add_users_to_team.jsx b/webapp/components/add_users_to_team/add_users_to_team.jsx index ee22bbed5..ae6fd8c4e 100644 --- a/webapp/components/add_users_to_team/add_users_to_team.jsx +++ b/webapp/components/add_users_to_team/add_users_to_team.jsx @@ -2,7 +2,7 @@ // See License.txt for license information. import MultiSelect from 'components/multiselect/multiselect.jsx'; -import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from 'components/profile_picture.jsx'; import {addUsersToTeam} from 'actions/team_actions.jsx'; import {searchUsersNotInTeam} from 'actions/user_actions.jsx'; diff --git a/webapp/components/more_direct_channels/more_direct_channels.jsx b/webapp/components/more_direct_channels/more_direct_channels.jsx index 743236ce6..50e2c4e48 100644 --- a/webapp/components/more_direct_channels/more_direct_channels.jsx +++ b/webapp/components/more_direct_channels/more_direct_channels.jsx @@ -2,7 +2,7 @@ // See License.txt for license information. import MultiSelect from 'components/multiselect/multiselect.jsx'; -import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from 'components/profile_picture.jsx'; import {searchUsers} from 'actions/user_actions.jsx'; import {openDirectChannelToUser, openGroupChannelToUsers} from 'actions/channel_actions.jsx'; diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx index 458ae8f24..cf6042943 100644 --- a/webapp/components/popover_list_members/popover_list_members.jsx +++ b/webapp/components/popover_list_members/popover_list_members.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from 'components/profile_picture.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index cf25b28e4..f5c96d2bc 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -3,7 +3,7 @@ import PostHeader from './post_header.jsx'; import PostBody from './post_body.jsx'; -import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from 'components/profile_picture.jsx'; import Constants from 'utils/constants.jsx'; const ActionTypes = Constants.ActionTypes; diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index e19285963..9de0b7e79 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import UserProfile from 'components/profile_popover/username_profile_popover.jsx'; +import UserProfile from 'components/user_profile.jsx'; import PostInfo from './post_info.jsx'; import {FormattedMessage} from 'react-intl'; diff --git a/webapp/components/post_view/components/post_message_view.jsx b/webapp/components/post_view/components/post_message_view.jsx index db522c974..5b0790f36 100644 --- a/webapp/components/post_view/components/post_message_view.jsx +++ b/webapp/components/post_view/components/post_message_view.jsx @@ -3,9 +3,6 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; -import {Parser, ProcessNodeDefinitions} from 'html-to-react'; - -import AtMentionProfile from 'components/profile_popover/atmention_profile_popover.jsx'; import Constants from 'utils/constants.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; @@ -91,38 +88,6 @@ export default class PostMessageView extends React.Component { ); } - postMessageHtmlToComponent(html) { - const parser = new Parser(); - const attrib = 'data-mention'; - const processNodeDefinitions = new ProcessNodeDefinitions(React); - - function isValidNode() { - return true; - } - - const processingInstructions = [ - { - replaceChildren: true, - shouldProcessNode: (node) => node.attribs && node.attribs[attrib] && this.props.usernameMap.hasOwnProperty(node.attribs[attrib]), - processNode: (node) => { - const username = node.attribs[attrib]; - return ( - <AtMentionProfile - user={this.props.usernameMap[username]} - username={username} - /> - ); - } - }, - { - shouldProcessNode: () => true, - processNode: processNodeDefinitions.processDefaultNode - } - ]; - - return parser.parseWithInstructions(html, isValidNode, processingInstructions); - } - render() { if (this.props.post.state === Constants.POST_DELETED) { return this.renderDeletedPost(); @@ -146,17 +111,14 @@ export default class PostMessageView extends React.Component { return <div>{renderedSystemMessage}</div>; } - const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options); - const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText); - return ( <div> <span id={this.props.isLastPost ? 'lastPostMessageText' : null} className='post-message__text' onClick={Utils.handleFormattedTextClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}} /> - {postMessageComponent} {this.renderEditedIndicator()} </div> ); diff --git a/webapp/components/profile_popover/picture_profile_popover.jsx b/webapp/components/profile_picture.jsx index 2c2b91b25..b7ee08785 100644 --- a/webapp/components/profile_popover/picture_profile_popover.jsx +++ b/webapp/components/profile_picture.jsx @@ -1,11 +1,10 @@ // Copyright (c) 2016-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 React from 'react'; -import StatusIcon from 'components/status_icon.jsx'; +import StatusIcon from './status_icon.jsx'; import {OverlayTrigger} from 'react-bootstrap'; export default class ProfilePicture extends React.Component { diff --git a/webapp/components/profile_popover/profile_popover.jsx b/webapp/components/profile_popover.jsx index a32b7904b..63bd99ac4 100644 --- a/webapp/components/profile_popover/profile_popover.jsx +++ b/webapp/components/profile_popover.jsx @@ -23,19 +23,11 @@ export default class ProfilePopover extends React.Component { this.initWebrtc = this.initWebrtc.bind(this); this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); - this.generateImage = this.generateImage.bind(this); - this.generateFullname = this.generateFullname.bind(this); - this.generatePosition = this.generatePosition.bind(this); - this.generateWebrtc = this.generateWebrtc.bind(this); - this.generateEmail = this.generateEmail.bind(this); - this.generateDirectMessage = this.generateDirectMessage.bind(this); - this.state = { currentUserId: UserStore.getCurrentId(), loadingDMChannel: -1 }; } - shouldComponentUpdate(nextProps) { if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { return true; @@ -110,63 +102,19 @@ export default class ProfilePopover extends React.Component { } } - generateImage(src) { - return ( - <img - className='user-popover__image' - src={src} - height='128' - width='128' - key='user-popover-image' - /> - ); - } - - generateFullname() { - const fullname = Utils.getFullName(this.props.user); - if (fullname) { - return ( - <OverlayTrigger - delayShow={Constants.WEBRTC_TIME_DELAY} - placement='top' - overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>} - > - <div - className='overflow--ellipsis text-nowrap padding-bottom' - > - {fullname} - </div> - </OverlayTrigger> - ); - } - - return ''; - } - - generatePosition() { - if (this.props.user.hasOwnProperty('position')) { - const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH); - return ( - <OverlayTrigger - delayShow={Constants.WEBRTC_TIME_DELAY} - placement='top' - overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>} - > - <div - className='overflow--ellipsis text-nowrap padding-bottom' - > - {position} - </div> - </OverlayTrigger> - ); - } - - return ''; - } - - generateWebrtc() { + render() { + const popoverProps = Object.assign({}, this.props); + delete popoverProps.user; + delete popoverProps.src; + delete popoverProps.status; + delete popoverProps.isBusy; + delete popoverProps.hide; + + 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; @@ -193,7 +141,7 @@ export default class ProfilePopover extends React.Component { ); } - return ( + webrtc = ( <div data-toggle='tooltip' key='makeCall' @@ -212,15 +160,54 @@ export default class ProfilePopover extends React.Component { ); } - return ''; - } + 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( + <OverlayTrigger + delayShow={Constants.WEBRTC_TIME_DELAY} + placement='top' + overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>} + > + <div + className='overflow--ellipsis text-nowrap padding-bottom' + > + {fullname} + </div> + </OverlayTrigger> + ); + } - generateEmail() { - const email = this.props.user.hasOwnProperty('email') ? this.props.user.email : ''; - const showEmail = (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser()); + if (this.props.user.position) { + const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH); + dataContent.push( + <OverlayTrigger + delayShow={Constants.WEBRTC_TIME_DELAY} + placement='top' + overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>} + > + <div + className='overflow--ellipsis text-nowrap padding-bottom' + > + {position} + </div> + </OverlayTrigger> + ); + } - if (email !== '' && showEmail) { - return ( + const email = this.props.user.email; + if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser()) { + dataContent.push( <div data-toggle='tooltip' title={email} @@ -236,12 +223,8 @@ export default class ProfilePopover extends React.Component { ); } - return ''; - } - - generateDirectMessage() { if (this.props.user.id !== UserStore.getCurrentId()) { - return ( + dataContent.push( <div data-toggle='tooltip' key='user-popover-dm' @@ -260,27 +243,16 @@ export default class ProfilePopover extends React.Component { </a> </div> ); + dataContent.push(webrtc); } - return ''; - } - - render() { return ( <Popover - arrowOffsetLeft={this.props.arrowOffsetLeft} - arrowOffsetTop={this.props.arrowOffsetTop} - positionLeft={this.props.positionLeft} - positionTop={this.props.positionTop} + {...popoverProps} title={'@' + this.props.user.username} id='user-profile-popover' > - {this.generateImage(this.props.src)} - {this.generateFullname()} - {this.generatePosition()} - {this.generateEmail()} - {this.generateDirectMessage()} - {this.generateWebrtc()} + {dataContent} </Popover> ); } diff --git a/webapp/components/profile_popover/atmention_profile_popover.jsx b/webapp/components/profile_popover/atmention_profile_popover.jsx deleted file mode 100644 index 47c625f64..000000000 --- a/webapp/components/profile_popover/atmention_profile_popover.jsx +++ /dev/null @@ -1,95 +0,0 @@ -// 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 -}; diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index d7b899b33..10cd5fb55 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -1,11 +1,11 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import UserProfile from './profile_popover/username_profile_popover.jsx'; +import UserProfile from './user_profile.jsx'; import FileAttachmentListContainer from './file_attachment_list_container.jsx'; import PendingPostOptions from 'components/post_view/components/pending_post_options.jsx'; import PostMessageContainer from 'components/post_view/components/post_message_container.jsx'; -import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from 'components/profile_picture.jsx'; import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx'; import RhsDropdown from 'components/rhs_dropdown.jsx'; diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 32d03e524..41dd92e91 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -1,11 +1,11 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import UserProfile from './profile_popover/username_profile_popover.jsx'; +import UserProfile from './user_profile.jsx'; import PostBodyAdditionalContent from 'components/post_view/components/post_body_additional_content.jsx'; import PostMessageContainer from 'components/post_view/components/post_message_container.jsx'; import FileAttachmentListContainer from './file_attachment_list_container.jsx'; -import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from 'components/profile_picture.jsx'; import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx'; import RhsDropdown from 'components/rhs_dropdown.jsx'; diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx index 846840e40..09ea8c427 100644 --- a/webapp/components/search_results_item.jsx +++ b/webapp/components/search_results_item.jsx @@ -3,9 +3,9 @@ import $ from 'jquery'; import PostMessageContainer from 'components/post_view/components/post_message_container.jsx'; -import UserProfile from './profile_popover/username_profile_popover.jsx'; +import UserProfile from './user_profile.jsx'; import FileAttachmentListContainer from './file_attachment_list_container.jsx'; -import ProfilePicture from './profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from './profile_picture.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; diff --git a/webapp/components/user_list_row.jsx b/webapp/components/user_list_row.jsx index e4e937432..3a7fc5d1c 100644 --- a/webapp/components/user_list_row.jsx +++ b/webapp/components/user_list_row.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; +import ProfilePicture from 'components/profile_picture.jsx'; import UserStore from 'stores/user_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; diff --git a/webapp/components/profile_popover/username_profile_popover.jsx b/webapp/components/user_profile.jsx index 37993094b..37993094b 100644 --- a/webapp/components/profile_popover/username_profile_popover.jsx +++ b/webapp/components/user_profile.jsx |