From c9793a566a4f425997448a742b16ed8754c17bae Mon Sep 17 00:00:00 2001
From: Brendan Bowidas <brendanbowidas@gmail.com>
Date: Thu, 6 Oct 2016 16:43:53 -0400
Subject: =?UTF-8?q?PLT-3252=20Bring=20up=20profile=20popover=20after=20cli?=
 =?UTF-8?q?cking=20on=20a=20profile=20picture=E2=80=A6=20(#4144)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* PLT-3252 Bring up profile popover after clicking on a profile picture in a channel

* PLT-3252 Bring up profile popover after clicking on a profile picture in a channel

remove important

* fixed 'Cannot read property first_name of undefined' bug

* fix status indicator position

* refactoring per request
---
 webapp/components/post_view/components/post.jsx |  1 +
 webapp/components/profile_picture.jsx           | 78 ++++++++++++++++++++++++-
 webapp/components/rhs_comment.jsx               |  1 +
 webapp/components/rhs_root_post.jsx             |  1 +
 webapp/components/search_results_item.jsx       |  7 ++-
 webapp/sass/layout/_post.scss                   |  4 ++
 6 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index 2dce093ec..e76701b6f 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -196,6 +196,7 @@ export default class Post extends React.Component {
             <ProfilePicture
                 src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
                 status={this.props.status}
+                user={this.props.user}
             />
         );
 
diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx
index 5443b74d6..8e14fa5fa 100644
--- a/webapp/components/profile_picture.jsx
+++ b/webapp/components/profile_picture.jsx
@@ -1,7 +1,9 @@
 // Copyright (c) 2016 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 React from 'react';
+import {Popover, OverlayTrigger} from 'react-bootstrap';
 
 export default class ProfilePicture extends React.Component {
     shouldComponentUpdate(nextProps) {
@@ -25,11 +27,80 @@ export default class ProfilePicture extends React.Component {
     }
 
     render() {
+        let email = '';
         let statusClass = '';
         if (this.props.status) {
             statusClass = 'status-' + this.props.status;
         }
-
+        if (this.props.user) {
+            email = this.props.user.email;
+            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(
+                    <div
+                        data-toggle='tooltip'
+                        title={fullname}
+                        key='user-popover-fullname'
+                    >
+                        <p
+                            className='text-nowrap'
+                        >
+                            {fullname}
+                        </p>
+                    </div>
+                        );
+            }
+            if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user.id === UserStore.getCurrentId()) {
+                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>
+                }
+                >
+                    <span className={`status-wrapper ${statusClass}`}>
+                        <img
+                            className='more-modal__image'
+                            width={this.props.width}
+                            height={this.props.width}
+                            src={this.props.src}
+                        />
+                    </span>
+                </OverlayTrigger>
+            );
+        }
         return (
             <span className={`status-wrapper ${statusClass}`}>
                 <img
@@ -51,5 +122,6 @@ ProfilePicture.propTypes = {
     src: React.PropTypes.string.isRequired,
     status: React.PropTypes.string,
     width: React.PropTypes.string,
-    height: React.PropTypes.string
+    height: React.PropTypes.string,
+    user: React.PropTypes.object
 };
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 18e4b4d1c..938740520 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -283,6 +283,7 @@ export default class RhsComment extends React.Component {
                 status={this.props.status}
                 width='36'
                 height='36'
+                user={this.props.user}
             />
         );
 
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 983469f50..7d643bd38 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -284,6 +284,7 @@ export default class RhsRootPost extends React.Component {
                 status={this.props.status}
                 width='36'
                 height='36'
+                user={this.props.user}
             />
         );
 
diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 1d36f7543..a03bb22ad 100644
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -4,6 +4,7 @@
 import $ from 'jquery';
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
 import UserProfile from './user_profile.jsx';
+import ProfilePicture from './profile_picture.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -97,11 +98,11 @@ export default class SearchResultsItem extends React.Component {
         }
 
         const profilePic = (
-            <img
+            <ProfilePicture
                 src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
-                height='36'
-                width='36'
+                user={this.props.user}
             />
+
         );
 
         let compactClass = '';
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 680c05f84..95c6e4443 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -646,6 +646,10 @@ body.ios {
         }
     }
 
+    .post__img:hover {
+        cursor: pointer;
+    }
+
     .post--fail {
         position: relative;
     }
-- 
cgit v1.2.3-1-g7c22