From 78c4a29dc0f5bdf7975960277cd5791cbed8d6a6 Mon Sep 17 00:00:00 2001 From: David Meza Date: Thu, 8 Dec 2016 00:41:30 -0500 Subject: [PATCH] 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 --- components/at_mention/at_mention.jsx | 3 +- components/profile_picture.jsx | 11 +- components/profile_popover_new.jsx | 363 +++++++++++++++++++++++++++ components/search_results_item.jsx | 5 +- components/sidebar_header.jsx | 51 ++-- components/user_profile.jsx | 3 +- images/icons/calendar_cta.png | Bin 0 -> 2680 bytes images/icons/dm_cta.png | Bin 0 -> 2023 bytes images/icons/email_cta.png | Bin 0 -> 2239 bytes sass/components/_popover.scss | 6 +- 10 files changed, 408 insertions(+), 34 deletions(-) create mode 100644 components/profile_popover_new.jsx create mode 100644 images/icons/calendar_cta.png create mode 100644 images/icons/dm_cta.png create mode 100644 images/icons/email_cta.png diff --git a/components/at_mention/at_mention.jsx b/components/at_mention/at_mention.jsx index 9d832657d4ac..63ae81422fde 100644 --- a/components/at_mention/at_mention.jsx +++ b/components/at_mention/at_mention.jsx @@ -9,7 +9,7 @@ import {Client4} from 'mattermost-redux/client'; import Pluggable from 'plugins/pluggable'; -import ProfilePopover from 'components/profile_popover.jsx'; +import ProfilePopover from 'components/profile_popover_new.jsx'; export default class AtMention extends React.PureComponent { static propTypes = { @@ -95,6 +95,7 @@ export default class AtMention extends React.PureComponent { hide={this.hideProfilePopover} isRHS={this.props.isRHS} hasMention={this.props.hasMention} + parent={this} /> } diff --git a/components/profile_picture.jsx b/components/profile_picture.jsx index 0194ed8adb59..52ee492adedc 100644 --- a/components/profile_picture.jsx +++ b/components/profile_picture.jsx @@ -10,7 +10,7 @@ import Pluggable from 'plugins/pluggable'; import * as PostUtils from 'utils/post_utils.jsx'; -import ProfilePopover from './profile_popover.jsx'; +import ProfilePopover from './profile_popover_new.jsx'; import StatusIcon from './status_icon.jsx'; export default class ProfilePicture extends React.PureComponent { @@ -18,7 +18,8 @@ export default class ProfilePicture extends React.PureComponent { width: '36', height: '36', isRHS: false, - hasMention: false + hasMention: false, + disablePopover: false }; static propTypes = { @@ -30,7 +31,8 @@ export default class ProfilePicture extends React.PureComponent { isBusy: PropTypes.bool, isRHS: PropTypes.bool, hasMention: PropTypes.bool, - post: PropTypes.object + post: PropTypes.object, + disablePopover: PropTypes.bool }; hideProfilePopover = () => { @@ -44,7 +46,7 @@ export default class ProfilePicture extends React.PureComponent { if (this.props.post) { isSystemMessage = PostUtils.isSystemMessage(this.props.post); } - if (this.props.user) { + if (this.props.user && !this.props.disablePopover) { return ( } diff --git a/components/profile_popover_new.jsx b/components/profile_popover_new.jsx new file mode 100644 index 000000000000..bb416544f372 --- /dev/null +++ b/components/profile_popover_new.jsx @@ -0,0 +1,363 @@ +// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import PropTypes from 'prop-types'; +import React from 'react'; +import {OverlayTrigger, Popover, Tooltip} from 'react-bootstrap'; +import {browserHistory} from 'react-router'; + +import {openDirectChannelToUser} from 'actions/channel_actions.jsx'; +import * as GlobalActions from 'actions/global_actions.jsx'; +import * as WebrtcActions from 'actions/webrtc_actions.jsx'; +import TeamStore from 'stores/team_store.jsx'; +import UserStore from 'stores/user_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; + +import Constants from 'utils/constants.jsx'; +import * as Utils from 'utils/utils.jsx'; + +const UserStatuses = Constants.UserStatuses; + +import emailIcon from 'images/icons/email_cta.png'; +import dmIcon from 'images/icons/dm_cta.png'; +import calendarIcon from 'images/icons/calendar_cta.png'; + +class ProfilePopoverNew extends React.Component { + static getComponentName() { + return 'ProfilePopoverNew'; + } + + static propTypes = { + + /** + * Source URL from the image to display in the popover + */ + src: PropTypes.string.isRequired, + + /** + * User the popover is being opened for + */ + user: PropTypes.object.isRequired, + + /** + * Status for the user, either 'offline', 'away', 'dnd' or 'online' + */ + status: PropTypes.string, + + /** + * Set to true if the user is in a WebRTC call + */ + isBusy: PropTypes.bool, + + /** + * Function to call to hide the popover + */ + hide: PropTypes.func, + + /** + * Set to true if the popover was opened from the right-hand + * sidebar (comment thread, search results, etc.) + */ + isRHS: PropTypes.bool, + + /** + * @internal + */ + hasMention: PropTypes.bool, + + /** + * @internal + */ + parent: PropTypes.object, + + ...Popover.propTypes + } + + static defaultProps = { + isRHS: false, + hasMention: false + } + + 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; + delete popoverProps.dispatch; + + 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( + {`See ${firstname}'s whober profile`} + )} + > +
+

+ + {fullname} + +

+
+ + ); + } + + if (this.props.user.position) { + dataContent.push( + {this.props.user.position}} + > +
+ {this.props.user.position} +
+ + ); + } + + if (showDirectChannel) { + dataContentIcons.push( +
+ + + +
+ ); + } + if (showEmail) { + dataContentIcons.push( +
+ + + +
+ ); + } + dataContentIcons.push( +
+ + + +
+ ); + if (showEmail || showDirectChannel) { + dataContent.push( +
+ {dataContentIcons} +
+ ); + } + if (username && firstname) { + dataContent.push( + {`Mention to ${firstname}`} + )} + > + + + ); + } + + return ( + +
+ + {dataContent} +
+ + ); + } +} + +delete ProfilePopoverNew.propTypes.id; + +export default ProfilePopoverNew; diff --git a/components/search_results_item.jsx b/components/search_results_item.jsx index fd2c1b4363ac..986a3634d515 100644 --- a/components/search_results_item.jsx +++ b/components/search_results_item.jsx @@ -185,13 +185,11 @@ export default class SearchResultsItem extends React.Component { } let overrideUsername; - let disableProfilePopover = false; if (post.props && post.props.from_webhook && post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') { overrideUsername = post.props.override_username; - disableProfilePopover = true; } let botIndicator; @@ -205,6 +203,7 @@ export default class SearchResultsItem extends React.Component { user={this.props.user} status={this.props.status} isBusy={this.props.isBusy} + disablePopover={true} /> ); @@ -322,7 +321,7 @@ export default class SearchResultsItem extends React.Component { diff --git a/components/sidebar_header.jsx b/components/sidebar_header.jsx index 70cf3fd07627..47cf38aeac51 100644 --- a/components/sidebar_header.jsx +++ b/components/sidebar_header.jsx @@ -81,6 +81,8 @@ export default class SidebarHeader extends React.Component { } let teamNameWithToolTip = null; + + /* if (this.props.teamDescription === '') { teamNameWithToolTip = (
); } else { - var me = this.props.currentUser; - const fullName = Utils.getFullName(me); - teamNameWithToolTip = ( - - {fullName} - - )} - ref='descriptionOverlay' - > -
{fullName} -
- - ); - } + + )} + ref='descriptionOverlay' + > +
+ {fullName} +
+ + ); + + // } return (
} diff --git a/images/icons/calendar_cta.png b/images/icons/calendar_cta.png new file mode 100644 index 0000000000000000000000000000000000000000..2ecdb018b1f24a2a6f31466107e0966201cf8655 GIT binary patch literal 2680 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 FV1lI@+Vubc literal 0 HcmV?d00001 diff --git a/images/icons/email_cta.png b/images/icons/email_cta.png new file mode 100644 index 0000000000000000000000000000000000000000..b44079f2dbeaf69d2ceda1360071d4757035b8ed GIT binary patch literal 2239 zcmV;w2tfCVP)Px-c}YY;RCodHoq22&RUF5EZ)joLQfv!tq1FqL8VDel2LU4lG(g}F#Ttzgkyb>G z#E1zoF~*n}6EP+fL}(GCi6j;LLlPnpYZQZ~Mi2`~Ng*7y3Wc^53N6QuzwcXS9kx4r z&9SrHc?rz%uHWyozj^cK9lr`nVkp`8<&f@cUE_riWq!ZE3`dpJp)67^k;o+#M-GB6 z5~=);E(#L=s;b(kC`u!azRaBcElZv|C(|Y2KjCDZrM0zL-L0K7{i-@cC7Qu?k0Dhx zCxZ}N6g6-mb&3#mzQRGfo6F0uIHi|4;bV}Jtwa=V*z%~~e|;fa)B@IaPz>1;PQnUx zvc+ywl#I_?moEB=tr~!B3$_6qv2*8u^T(POkq~dNl?}H|gGdDnah&V^VDP=ATbky~ z>4}sy(KyQi;xWD4+W86#zKX4{BvHYv%*R&P!awAi?7~5xSp9fg3UJ8!nt3-=|5|=j z@3sIiVO5!y035ci=B{p%;O1K;n62dq`i3%nE83SVJY}{X(*Osr zuYS_+r_J2W$TKU9v-w4bqR`^=%PPM%Q*XimN7vT&Z#jEm4YzeG%m|S5yh2o!6y3J! zP)L}W<_U};TF!R2oM4ppToiB#&gJVMakY@af(xuT*iUfJRXSWsPEO5N%%?p%$E zw=y@UXAp$sO@jk}7GryK|a95oeuyb#Y^?GRF*1 zT3!$B?W^!KV1P&iXiBV>sAw4@9nt2=$F`4Jo?drpAlyVro%In0=TQOTZ7W|GeXPwh z;303LeTUA_JyJTvMFohiN?&=~MuVY`ht9H_roS2HJYpLd=p?J#!{kewTZ$r{iqzRQ z1SmhxRP~S4`@*pLw-p`Kf514S&pyLPSbp24+~=9q@K7FqqF(E+GAcPNK#Z#Jh)QY< z3>ax<<$Y!$nS?2`7eI{X$swsQiPQNOn1D?vgI)kHpY2%c+VQ+l>7BghF-|#998%{k z05J^DQ(&)$r135_0zAqdV5Hp$=?7vC!!5(`|BL9JGq92KJUWqr7RZr2<;oL4UWiP9 z8A(<*Qw0HH>M?1vXOTsAS1ivkN>-r&<-D!CM0Kq+dREc`0|Q3vXBB7j{6zdDNX8n!#|d@DU&b|1|heh;nPcYvz)ACPTg`HpW1 zZ|HZYK1^i=`7w#n*w#*O{rqe2O`Da`k5-HyM=K|cqwGv;n}$dNfgNfKEaZ-q(!w|> zxcZ@q^up*eZnJ))ZAY6Vh#%OJUK%rsRzEm_@_oLrHKLt+zkVNm+HhDtsz|h8_t17a`I6A;H$3tNAhtlc18A^eq9jCU?c>X1N6XqL4Rxkp z7r&}10Ad@JJA-?{1$kZMjx?PKUV0~S5x~AZMHM3E)tGUWo(74z_rRMTg*cK1y4s>5 zc8n^ZXiMp7P^h#(?6>6}sqJ6G802&+I8qlg13TsBX5|LEmBS#X6N;e@M+Q`Rk22WF zFA@GAs$&xzYbQj^QP@7rZl?kvWrG=R$**vU#^P0?bH*hg(5_xPW&Hj%>lX7kU!_8!*zx+yYR# z24U|O`UKv&jsUX>b)RwzKqQ505FVvIq08o-f&ep-Y(i-C0*Kc$T!Vz9OZ!VO(Yh{r z7`*@@Qu0?mtHK;1vuH!c$84YH3f=@jeO5f) z-X9~-6ES%n{Bsz*X%CwovG+`FJ&W|`FnCEaR@L&t#zsCKN%o(^_zzu0TmF8=a~c2u N002ovPDHLkV1mhtAKU-{ literal 0 HcmV?d00001 diff --git a/sass/components/_popover.scss b/sass/components/_popover.scss index 27a959a03ed3..0bc2b8d72b6b 100644 --- a/sass/components/_popover.scss +++ b/sass/components/_popover.scss @@ -68,7 +68,6 @@ background: transparent; border: none; box-shadow: none; - top: -190px !important; .popover-title, .arrow { display: none; } @@ -103,6 +102,11 @@ margin-bottom: 0; } } + .profile-popover-position { + font-size: 12px; + max-width: 185px; + margin: 0 8px; + } .profile-popover-icons { margin: 0 auto; .profile-popover-icon {