From e4dfb90b855e83b38c89c614597efb5c891666b0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 24 Oct 2018 18:23:34 +0200 Subject: [PATCH] basic makeover of member panel with big avatar --- res/css/views/rooms/_MemberInfo.scss | 45 ++++++++++++++++----- src/components/views/rooms/MemberInfo.js | 51 ++++++++++++++---------- 2 files changed, 65 insertions(+), 31 deletions(-) diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index 5d47275efe..371400fba4 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -15,14 +15,35 @@ limitations under the License. */ .mx_MemberInfo { - margin-top: 20px; - padding-right: 20px; - height: 100%; + background-color: $secondary-accent-color; + display: flex; + 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; +} + +.mx_MemberInfo_container { + padding: 8px; } .mx_MemberInfo .mx_RoomTile_nameContainer { @@ -37,14 +58,17 @@ limitations under the License. width: 160px; } -.mx_MemberInfo_cancel { - float: right; - margin-right: 10px; - cursor: pointer; +.mx_MemberInfo_avatar { + display: grid; + grid-template-columns: 1fr auto 1fr; + background: $tagpanel-bg-color; } -.mx_MemberInfo_avatar { - clear: both; +.mx_MemberInfo_avatar > img { + height: auto; + width: 100%; + grid-column: 2; + max-height: 400px; } .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 { diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 037957c868..0c0048fd93 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -928,38 +928,49 @@ module.exports = withMatrixClient(React.createClass({ ; } + const avatarUrl = this.props.member.getMxcAvatarUrl(); + let avatarElement; + if (avatarUrl) { + const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl); + avatarElement =
+ +
+ } + const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); - const MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); const EmojiText = sdk.getComponent('elements.EmojiText'); + return (
- - - {_t('Close')} - -
- +
+ + {_t('Close')} + + { memberName }
+ { avatarElement } +
- { memberName } - -
-
- { this.props.member.userId } +
+
+ { this.props.member.userId } +
+ { roomMemberDetails }
- { roomMemberDetails }
+ +
+ { this._renderUserOptions() } - { this._renderUserOptions() } + { adminTools } - { adminTools } + { startChat } - { startChat } + { this._renderDevices() } - { this._renderDevices() } - - { spinner } - + { spinner } +
+
); },