This repository has been archived by the owner on Sep 28, 2020. It is now read-only.
forked from mattermost/mattermost-webapp
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Profile popover new component: DM, calendar, whober, @mentions
* UCHAT-181 Add button to DM a user from their profile preview popover tile, UCHAT-318 Add new style with icons to Profile Popover for email and DM, UCHAT-76 Add link to user's whober profile from their profile preview popover tile, UCHAT-342 Redesign profile hovercard to match whober style spec * UCHAT-562 Show @username button on profile popover (#26) * UCHAT-562 add tooltip to popover mention button * UCHAT-1034 Profile Popover appears misplaced on the top part of the window (#34) * UCHAT-76 Add Tooltip to link to whober profile in profile popover (#32) * UCHAT-361 Add calendar link to profile hovercard * UCHAT-1307 3.7 Regression - @mentions on hovercards no longer work (#57) Also, Fix not being switched to a new channel. Fixes to profile popover from rebase. UCHAT-1854 Display position in user hovecard under name
- Loading branch information
David Meza
committed
Oct 31, 2017
1 parent
2ae2cfb
commit 4036bd5
Showing
13 changed files
with
371 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,321 @@ | ||
| // Copyright (c) 2016-present 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 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; | ||
|
|
||
| import {Popover, OverlayTrigger, Tooltip} from 'react-bootstrap'; | ||
| import {browserHistory} from 'react-router/es6'; | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
|
|
||
| import emailIcon from 'images/icons/email_cta.png'; | ||
| import dmIcon from 'images/icons/dm_cta.png'; | ||
| import calendarIcon from 'images/icons/calendar_cta.png'; | ||
|
|
||
| export default class ProfilePopoverNew extends React.Component { | ||
| static getComponentName() { | ||
| return 'ProfilePopoverNew'; | ||
| } | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.initWebrtc = this.initWebrtc.bind(this); | ||
| this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); | ||
| this.handleMentionKeyClick = this.handleMentionKeyClick.bind(this); | ||
| this.state = { | ||
| currentUserId: UserStore.getCurrentId(), | ||
| loadingDMChannel: false | ||
| }; | ||
| } | ||
| shouldComponentUpdate(nextProps) { | ||
| if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { | ||
| return true; | ||
| } | ||
|
|
||
| if (nextProps.src !== this.props.src) { | ||
| return true; | ||
| } | ||
|
|
||
| if (nextProps.status !== this.props.status) { | ||
| return true; | ||
| } | ||
|
|
||
| if (nextProps.isBusy !== this.props.isBusy) { | ||
| return true; | ||
| } | ||
|
|
||
| // React-Bootstrap Forwarded Props from OverlayTrigger to Popover | ||
| if (nextProps.arrowOffsetLeft !== this.props.arrowOffsetLeft) { | ||
| return true; | ||
| } | ||
|
|
||
| if (nextProps.arrowOffsetTop !== this.props.arrowOffsetTop) { | ||
| return true; | ||
| } | ||
|
|
||
| if (nextProps.positionLeft !== this.props.positionLeft) { | ||
| return true; | ||
| } | ||
|
|
||
| if (nextProps.positionTop !== this.props.positionTop) { | ||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| handleShowDirectChannel(e) { | ||
| e.preventDefault(); | ||
|
|
||
| if (!this.props.user) { | ||
| return; | ||
| } | ||
|
|
||
| const user = this.props.user; | ||
|
|
||
| if (this.state.loadingDMChannel) { | ||
| return; | ||
| } | ||
|
|
||
| this.setState({loadingDMChannel: true}); | ||
|
|
||
| openDirectChannelToUser( | ||
| user.id, | ||
| (channel) => { | ||
| if (Utils.isMobile()) { | ||
| GlobalActions.emitCloseRightHandSide(); | ||
| } | ||
| this.setState({loadingDMChannel: false}); | ||
| 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(); | ||
| WebrtcActions.initWebrtc(this.props.user.id, true); | ||
| } | ||
| } | ||
|
|
||
| handleMentionKeyClick(e) { | ||
| e.preventDefault(); | ||
|
|
||
| if (!this.props.user) { | ||
| return; | ||
| } | ||
| if (this.props.hide) { | ||
| this.props.hide(); | ||
| } | ||
| GlobalActions.emitPopoverMentionKeyClick(this.props.isRHS, this.props.user.username); | ||
| } | ||
|
|
||
| render() { | ||
| const popoverProps = Object.assign({}, this.props); | ||
| delete popoverProps.user; | ||
| delete popoverProps.src; | ||
| delete popoverProps.parent; | ||
| delete popoverProps.status; | ||
| delete popoverProps.isBusy; | ||
| delete popoverProps.hide; | ||
| delete popoverProps.isRHS; | ||
| delete popoverProps.hasMention; | ||
|
|
||
| const email = this.props.user.email; | ||
| const username = this.props.user.username; | ||
| var dataContent = []; | ||
| var dataContentIcons = []; | ||
| var showEmail = global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user.id === UserStore.getCurrentId(); | ||
| var showDirectChannel = this.props.user.id !== UserStore.getCurrentId(); | ||
| const fullname = Utils.getFullName(this.props.user); | ||
| const firstname = this.props.user.first_name; | ||
| if (fullname) { | ||
| dataContent.push( | ||
| <OverlayTrigger | ||
| key='user-popover-fullname-ot' | ||
| trigger={['hover', 'focus']} | ||
| delayShow={300} | ||
| placement='bottom' | ||
| overlay={( | ||
| <Tooltip id='whober_tooltip'>{`See ${firstname}'s whober profile`}</Tooltip> | ||
| )} | ||
| > | ||
| <div | ||
| data-toggle='tooltip' | ||
| key='user-popover-fullname' | ||
| className='profile-popover-name' | ||
| > | ||
| <p | ||
| className='text-nowrap' | ||
| > | ||
| <a | ||
| href={`https://whober.uberinternal.com/${email}`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| > | ||
| {fullname} | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </OverlayTrigger> | ||
| ); | ||
| } | ||
|
|
||
| if (this.props.user.position) { | ||
| dataContent.push( | ||
| <OverlayTrigger | ||
| delayShow={Constants.WEBRTC_TIME_DELAY} | ||
| placement='top' | ||
| overlay={<Tooltip id='positionTooltip'>{this.props.user.position}</Tooltip>} | ||
| > | ||
| <div | ||
| className='overflow--ellipsis text-nowrap profile-popover-position' | ||
| > | ||
| {this.props.user.position} | ||
| </div> | ||
| </OverlayTrigger> | ||
| ); | ||
| } | ||
|
|
||
| if (showDirectChannel) { | ||
| dataContentIcons.push( | ||
| <div | ||
| key='popover-dm-icon' | ||
| data-toggle='tooltip' | ||
| title={this.props.user.username} | ||
| className='pull-left profile-popover-icon' | ||
| > | ||
| <a | ||
| onClick={this.handleShowDirectChannel.bind(this)} | ||
| href='#' | ||
| > | ||
| <img | ||
| width='32px' | ||
| height='32px' | ||
| src={dmIcon} | ||
| /> | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
| if (showEmail) { | ||
| dataContentIcons.push( | ||
| <div | ||
| key='popover-email-icon' | ||
| data-toggle='tooltip' | ||
| title={email} | ||
| className='pull-left profile-popover-icon' | ||
| > | ||
| <a | ||
| href={'mailto:' + email} | ||
| > | ||
| <img | ||
| width='32px' | ||
| height='32px' | ||
| src={emailIcon} | ||
| /> | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
| dataContentIcons.push( | ||
| <div | ||
| key='popover-calendar-icon' | ||
| data-toggle='tooltip' | ||
| title={email} | ||
| className='pull-left profile-popover-icon' | ||
| > | ||
| <a | ||
| href={`https://calendar.google.com/calendar/embed?src=${email}`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| > | ||
| <img | ||
| width='32px' | ||
| height='32px' | ||
| src={calendarIcon} | ||
| /> | ||
| </a> | ||
| </div> | ||
| ); | ||
| if (showEmail || showDirectChannel) { | ||
| dataContent.push( | ||
| <div | ||
| key='popover-icons' | ||
| className='profile-popover-icons' | ||
| style={{width: `${56 * dataContentIcons.length}px`}} | ||
| > | ||
| {dataContentIcons} | ||
| </div> | ||
| ); | ||
| } | ||
| if (username && firstname) { | ||
| dataContent.push( | ||
| <OverlayTrigger | ||
| key='popover-username-ot' | ||
| trigger={['hover', 'focus']} | ||
| delayShow={1000} | ||
| placement='right' | ||
| overlay={( | ||
| <Tooltip id='user_mention'>{`Mention to ${firstname}`}</Tooltip> | ||
| )} | ||
| > | ||
| <button | ||
| className='btn btn-primary username-btn' | ||
| onClick={this.handleMentionKeyClick} | ||
| key='popover-username-btn' | ||
| > | ||
| {'@' + username} | ||
| </button> | ||
| </OverlayTrigger> | ||
| ); | ||
| } | ||
| return ( | ||
| <Popover | ||
| {...popoverProps} | ||
| title={'@' + this.props.user.username} | ||
| id='user-profile-popover-new' | ||
| > | ||
| <div className='profile-popover-container'> | ||
| <img | ||
| className='user-popover__image' | ||
| src={this.props.src} | ||
| height='100' | ||
| width='100' | ||
| key='user-popover-image' | ||
| /> | ||
| {dataContent} | ||
| </div> | ||
| </Popover> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ProfilePopoverNew.defaultProps = { | ||
| isRHS: false, | ||
| hasMention: false | ||
| }; | ||
|
|
||
| ProfilePopoverNew.propTypes = Object.assign({ | ||
| src: PropTypes.string.isRequired, | ||
| user: PropTypes.object.isRequired, | ||
| status: PropTypes.string, | ||
| isBusy: PropTypes.bool, | ||
| hide: PropTypes.func, | ||
| isRHS: PropTypes.bool, | ||
| hasMention: PropTypes.bool, | ||
| parent: PropTypes.object | ||
| }, Popover.propTypes); | ||
| delete ProfilePopoverNew.propTypes.id; |
Oops, something went wrong.