From 86620839ae01d5da7c6e2f913b3aa1c0dd6dd542 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 17 Apr 2019 10:57:45 +0200
Subject: [PATCH] make username clickable

---
 res/css/views/rooms/_RoomPreviewBar.scss     |  2 ++
 src/components/structures/MatrixChat.js      | 37 ++++++++++++--------
 src/components/views/rooms/RoomPreviewBar.js | 19 ++++++++--
 3 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index e75047a77f..4440972712 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -118,4 +118,6 @@ limitations under the License.
 
 .mx_RoomPreviewBar_inviter {
     font-weight: 600;
+    text-decoration: underline;
+    cursor: pointer;
 }
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 387f2ca69d..b9530cdbd6 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -579,6 +579,12 @@ export default React.createClass({
                     }, 0);
                 }
                 break;
+            // different from view_user,
+            // this show the user panel outside of the context
+            // of a room, like a /user/<id> url
+            case 'view_user_info':
+                this._viewUser(payload.userId);
+                break;
             case 'view_room':
                 // Takes either a room ID or room alias: if switching to a room the client is already
                 // known to be in (eg. user clicks on a room in the recents panel), supply the ID
@@ -933,6 +939,22 @@ export default React.createClass({
         this.notifyNewScreen('home');
     },
 
+    _viewUser: function(userId, action) {
+        // Wait for the first sync so that `getRoom` gives us a room object if it's
+        // in the sync response
+        const waitFor = this.firstSyncPromise ?
+            this.firstSyncPromise.promise : Promise.resolve();
+        waitFor.then(() => {
+            if (action === 'chat') {
+                this._chatCreateOrReuse(userId);
+                return;
+            }
+            this.notifyNewScreen('user/' + userId);
+            this.setState({currentUserId: userId});
+            this._setPage(PageTypes.UserView);
+        });
+    },
+
     _setMxId: function(payload) {
         const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
         const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, {
@@ -1626,20 +1648,7 @@ export default React.createClass({
             dis.dispatch(payload);
         } else if (screen.indexOf('user/') == 0) {
             const userId = screen.substring(5);
-
-            // Wait for the first sync so that `getRoom` gives us a room object if it's
-            // in the sync response
-            const waitFor = this.firstSyncPromise ?
-                this.firstSyncPromise.promise : Promise.resolve();
-            waitFor.then(() => {
-                if (params.action === 'chat') {
-                    this._chatCreateOrReuse(userId);
-                    return;
-                }
-                this.notifyNewScreen('user/' + userId);
-                this.setState({currentUserId: userId});
-                this._setPage(PageTypes.UserView);
-            });
+            this._viewUser(userId, params.action);
         } else if (screen.indexOf('group/') == 0) {
             const groupId = screen.substring(6);
 
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index c25fbd580d..6b03d5fef3 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -106,6 +106,12 @@ module.exports = React.createClass({
         }
     },
 
+    _onInviterClick(evt) {
+        evt.preventDefault();
+        const member = this._getInviteMember();
+        dis.dispatch({action: 'view_user_info', userId: member.userId});
+    },
+
     _getMessageCase() {
         const isGuest = MatrixClientPeg.get().isGuest();
 
@@ -320,9 +326,16 @@ module.exports = React.createClass({
                 let inviterElement;
                 if (inviteMember) {
                     const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
-                    avatar = (<MemberAvatar member={inviteMember} viewUserOnClick={true} />);
-                    const colorClass = getUserNameColorClass(inviteMember.userId);
-                    inviterElement = (<span className={`mx_RoomPreviewBar_inviter ${colorClass}`}>{inviteMember.name}</span>);
+                    avatar = (<MemberAvatar member={inviteMember} onClick={this._onInviterClick} />);
+                    const inviterClasses = [
+                        "mx_RoomPreviewBar_inviter",
+                        getUserNameColorClass(inviteMember.userId),
+                    ].join(" ");
+                    inviterElement = (
+                        <a onClick={this._onInviterClick} className={inviterClasses}>
+                            {inviteMember.name}
+                        </a>
+                    );
                 } else {
                     inviterElement = this.props.inviterName;
                 }