Merge pull request #2248 from matrix-org/bwindels/memberpanel

Redesign: basic makeover of member info panel

res/css/views/rooms/_EntityTile.scss

@@ -15,12 +15,19 @@ limitations under the License.
 */
 
 .mx_EntityTile {
-    display: table-row;
+    display: flex;
-    position: relative;
+    align-items: center;
     color: $primary-fg-color;
     cursor: pointer;
 }
 
+.mx_EntityTile:hover {
+    background-image: url('../../img/member_chevron.png');
+    background-position: center right 10px;
+    background-repeat: no-repeat;
+    padding-right: 30px;
+}
+
 .mx_EntityTile_invite {
     display: table-cell;
     vertical-align: middle;
@@ -30,12 +37,10 @@ limitations under the License.
 
 .mx_EntityTile_avatar,
 .mx_GroupRoomTile_avatar {
-    display: table-cell;
     padding-left: 3px;
     padding-right: 12px;
     padding-top: 4px;
     padding-bottom: 4px;
-    vertical-align: middle;
     width: 36px;
     height: 36px;
     position: relative;
@@ -51,32 +56,21 @@ limitations under the License.
 
 .mx_EntityTile_name,
 .mx_GroupRoomTile_name {
-    display: table-cell;
+    flex: 1 1 0;
-    vertical-align: middle;
     overflow: hidden;
     font-size: 14px;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 155px;
 }
 
 .mx_EntityTile_details {
-    display: table-cell;
+    overflow: hidden;
-    padding-right: 14px;
-    vertical-align: middle;
 }
 
 .mx_EntityTile_name_hover {
     font-size: 13px;
 }
 
-.mx_EntityTile_chevron {
-    margin-top: 8px;
-    margin-right: -4px;
-    margin-left: 6px;
-    float: right;
-}
-
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
     color: $primary-fg-color;

res/css/views/rooms/_MemberInfo.scss

@@ -15,14 +15,36 @@ limitations under the License.
 */
 
 .mx_MemberInfo {
-    margin-top: 20px;
+    background-color: $secondary-accent-color;
-    padding-right: 20px;
+    display: flex;
-    height: 100%;
+    flex-direction: column;
+    flex: 1;
     overflow-y: auto;
 }
 
+.mx_MemberInfo_name {
+    align-items: center;
+    display: flex;
+}
+
+.mx_MemberInfo_cancel {
+    height: 16px;
+    padding: 10px 15px;
+    cursor: pointer;
+}
+
+.mx_MemberInfo_name h2 {
+    flex: 1;
+}
+
 .mx_MemberInfo h2 {
-    margin-top: 6px;
+    font-size: 18px;
+    font-weight: 600;
+    margin: 16px 0;
+}
+
+.mx_MemberInfo_container {
+    padding: 8px;
 }
 
 .mx_MemberInfo .mx_RoomTile_nameContainer {
@@ -37,14 +59,16 @@ limitations under the License.
     width: 160px;
 }
 
-.mx_MemberInfo_cancel {
+.mx_MemberInfo_avatar {
-    float: right;
+    background: $tagpanel-bg-color;
-    margin-right: 10px;
-    cursor: pointer;
 }
 
-.mx_MemberInfo_avatar {
+.mx_MemberInfo_avatar > img {
-    clear: both;
+    height: auto;
+    width: 100%;
+    max-height: 30vh;
+    object-fit: contain;
+    display: block;
 }
 
 .mx_MemberInfo_avatar .mx_BaseAvatar {
@@ -70,7 +94,6 @@ limitations under the License.
 .mx_MemberInfo_profileField {
     font-size: 13px;
     position: relative;
-    background-color: $primary-bg-color;
 }
 
 .mx_MemberInfo_buttons {
@@ -110,3 +133,6 @@ limitations under the License.
     margin-left: 8px;
 }
 
+.mx_MemberInfo .mx_MemberInfo_scrollContainer {
+    flex: 1;
+}

src/components/views/rooms/EntityTile.js

@@ -131,7 +131,6 @@ const EntityTile = React.createClass({
             }
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
                     <EmojiText element="div" className={nameClasses} dir="auto">
                         { name }
                     </EmojiText>

src/components/views/rooms/MemberInfo.js

@@ -928,38 +928,49 @@ module.exports = withMatrixClient(React.createClass({
             </div>;
         }
 
+        const avatarUrl = this.props.member.getMxcAvatarUrl();
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = <div className="mx_MemberInfo_avatar">
+                <img src={httpUrl} />
+            </div>
+        }
+
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
+
         return (
             <div className="mx_MemberInfo">
-                <GeminiScrollbarWrapper autoshow={true}>
+                    <div className="mx_MemberInfo_name">
-                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
+                        <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" alt={_t('Close')} />
+                            <img src="img/minimise.svg" width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
-                    </AccessibleButton>
+                        </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
+                        <EmojiText element="h2">{ memberName }</EmojiText>
-                        <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                     </div>
+                    { avatarElement }
+                    <div className="mx_MemberInfo_container">
 
-                    <EmojiText element="h2">{ memberName }</EmojiText>
+                        <div className="mx_MemberInfo_profile">
-
+                            <div className="mx_MemberInfo_profileField">
-                    <div className="mx_MemberInfo_profile">
+                                { this.props.member.userId }
-                        <div className="mx_MemberInfo_profileField">
+                            </div>
-                            { this.props.member.userId }
+                            { roomMemberDetails }
                         </div>
-                        { roomMemberDetails }
                     </div>
+                    <GeminiScrollbarWrapper autoshow={true} className="mx_MemberInfo_scrollContainer">
+                        <div className="mx_MemberInfo_container">
+                            { this._renderUserOptions() }
 
-                    { this._renderUserOptions() }
+                            { adminTools }
 
-                    { adminTools }
+                            { startChat }
 
-                    { startChat }
+                            { this._renderDevices() }
 
-                    { this._renderDevices() }
+                            { spinner }
-
+                        </div>
-                    { spinner }
+                    </GeminiScrollbarWrapper>
-                </GeminiScrollbarWrapper>
             </div>
         );
     },