From 3196655524ed7860c7e26a1fdc5bdff9e4b21be3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 19 Dec 2019 09:06:52 +0000
Subject: [PATCH 1/2] Replace UserInfo avatar with <MemberAvatar/> for fallback
 logic

---
 res/css/views/right_panel/_UserInfo.scss     | 18 +++++----
 src/components/views/right_panel/UserInfo.js | 40 +++++++++-----------
 2 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index df7d0a5f87..a5428393ee 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -63,7 +63,6 @@ limitations under the License.
 
     .mx_UserInfo_avatar {
         margin: 24px 32px 0 32px;
-        cursor: pointer;
     }
 
     .mx_UserInfo_avatar > div {
@@ -71,18 +70,23 @@ limitations under the License.
         margin: 0 auto;
     }
 
-    .mx_UserInfo_avatar > div > div {
+    .mx_UserInfo_avatar > div * {
         /* use padding-top instead of height to make this element square,
         as the % in padding is a % of the width (including margin,
         that's why we had to put the margin to center on a parent div),
         and not a % of the parent height. */
-        padding-top: 100%;
-        height: 0;
+        width: 30vh;
+        height: 30vh;
+        object-fit: cover;
         border-radius: 100%;
         box-sizing: content-box;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
+    }
+
+    // override the calculated sizes so that the letter isn't HUGE
+    .mx_UserInfo_avatar > div .mx_BaseAvatar_initial {
+        font-size: 26px !important;
+        width: 30vh !important;
+        line-height: 30vh !important;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index d1d7aa0371..0116fafb9e 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -1051,16 +1051,9 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
         }
     }, [cli, user.userId]);
 
-
-    const onMemberAvatarKey = e => {
-        if (e.key === "Enter") {
-            onMemberAvatarClick();
-        }
-    };
-
     const onMemberAvatarClick = useCallback(() => {
         const member = user;
-        const avatarUrl = member.getMxcAvatarUrl();
+        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
         if (!avatarUrl) return;
 
         const httpUrl = cli.mxcUrlToHttp(avatarUrl);
@@ -1158,21 +1151,22 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
         statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
     }
 
-    const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
-    let avatarElement;
-    if (avatarUrl) {
-        const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800);
-        avatarElement = <div
-            className="mx_UserInfo_avatar"
-            onClick={onMemberAvatarClick}
-            onKeyDown={onMemberAvatarKey}
-            tabIndex="0"
-            role="img"
-            aria-label={_t("Profile picture")}
-        >
-            <div><div style={{backgroundImage: `url(${httpUrl})`}} /></div>
-        </div>;
-    }
+    // const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
+    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    const avatarElement = (
+        <div className="mx_UserInfo_avatar">
+            <div>
+                <MemberAvatar
+                    member={user}
+                    width={0.3 * window.outerHeight} // ~30vh
+                    height={0.3 * window.outerHeight} // ~30vh
+                    resizeMethod="scale"
+                    fallbackUserId={user.userId}
+                    onClick={onMemberAvatarClick}
+                    urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+            </div>
+        </div>
+    );
 
     let closeButton;
     if (onClose) {

From 66783dff9e4ebfd4ddae8ad5be3927a7439f83ce Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 19 Dec 2019 12:27:25 +0000
Subject: [PATCH 2/2] Fix scaling of the avatar in UserInfo

---
 res/css/views/avatars/_BaseAvatar.scss       |  1 +
 res/css/views/right_panel/_UserInfo.scss     | 30 +++++++++++++-------
 src/components/views/right_panel/UserInfo.js | 18 ++++++------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss
index a085034758..e59598278f 100644
--- a/res/css/views/avatars/_BaseAvatar.scss
+++ b/res/css/views/avatars/_BaseAvatar.scss
@@ -40,6 +40,7 @@ limitations under the License.
 }
 
 .mx_BaseAvatar_image {
+    object-fit: cover;
     border-radius: 40px;
     vertical-align: top;
     background-color: $avatar-bg-color;
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index a5428393ee..e87fe06a94 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -70,23 +70,33 @@ limitations under the License.
         margin: 0 auto;
     }
 
-    .mx_UserInfo_avatar > div * {
+    .mx_UserInfo_avatar > div > div {
         /* use padding-top instead of height to make this element square,
         as the % in padding is a % of the width (including margin,
         that's why we had to put the margin to center on a parent div),
         and not a % of the parent height. */
-        width: 30vh;
-        height: 30vh;
-        object-fit: cover;
-        border-radius: 100%;
-        box-sizing: content-box;
+        padding-top: 100%;
+        position: relative;
     }
 
-    // override the calculated sizes so that the letter isn't HUGE
-    .mx_UserInfo_avatar > div .mx_BaseAvatar_initial {
+    .mx_UserInfo_avatar > div > div * {
+        border-radius: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        // override the calculated sizes so that the letter isn't HUGE
         font-size: 26px !important;
-        width: 30vh !important;
-        line-height: 30vh !important;
+        width: 100% !important;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index 0116fafb9e..65fc0bf66b 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -1156,14 +1156,16 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
     const avatarElement = (
         <div className="mx_UserInfo_avatar">
             <div>
-                <MemberAvatar
-                    member={user}
-                    width={0.3 * window.outerHeight} // ~30vh
-                    height={0.3 * window.outerHeight} // ~30vh
-                    resizeMethod="scale"
-                    fallbackUserId={user.userId}
-                    onClick={onMemberAvatarClick}
-                    urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+                <div>
+                    <MemberAvatar
+                        member={user}
+                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        resizeMethod="scale"
+                        fallbackUserId={user.userId}
+                        onClick={onMemberAvatarClick}
+                        urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+                </div>
             </div>
         </div>
     );