From 873ff7fc29e6154d6885d42a88a58cf75be5fa1a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 24 Oct 2018 18:22:57 +0200 Subject: [PATCH 1/4] make EntityTile responsive --- res/css/views/rooms/_EntityTile.scss | 28 ++++++++++-------------- src/components/views/rooms/EntityTile.js | 1 - 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 031894afde..147c76dad6 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -15,12 +15,19 @@ limitations under the License. */ .mx_EntityTile { - display: table-row; - position: relative; + display: flex; + 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; - vertical-align: middle; + flex: 1 1 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; - max-width: 155px; } .mx_EntityTile_details { - display: table-cell; - padding-right: 14px; - vertical-align: middle; + overflow: hidden; } .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; diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index 6b3264d123..851352aa17 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -131,7 +131,6 @@ const EntityTile = React.createClass({ } nameEl = (
- { name } From e4dfb90b855e83b38c89c614597efb5c891666b0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 24 Oct 2018 18:23:34 +0200 Subject: [PATCH 2/4] 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 } +
+
); }, From 030deba90cdbf9b1aaa1d88956e5bad58d8fafc7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 25 Oct 2018 15:20:33 +0200 Subject: [PATCH 3/4] avoid downloading avatars at full resolution --- src/components/views/rooms/MemberInfo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 0c0048fd93..6b626b31c2 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -931,7 +931,7 @@ module.exports = withMatrixClient(React.createClass({ const avatarUrl = this.props.member.getMxcAvatarUrl(); let avatarElement; if (avatarUrl) { - const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl); + const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800); avatarElement =
From 3096bf42ef3b4dbd5980b5cba76b302f468c67da Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 25 Oct 2018 15:20:51 +0200 Subject: [PATCH 4/4] fix css in chrome --- res/css/views/rooms/_MemberInfo.scss | 11 +++++++---- src/components/views/rooms/MemberInfo.js | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index 371400fba4..ab029874b4 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -40,6 +40,7 @@ limitations under the License. .mx_MemberInfo h2 { font-size: 18px; font-weight: 600; + margin: 16px 0; } .mx_MemberInfo_container { @@ -59,16 +60,15 @@ limitations under the License. } .mx_MemberInfo_avatar { - display: grid; - grid-template-columns: 1fr auto 1fr; background: $tagpanel-bg-color; } .mx_MemberInfo_avatar > img { height: auto; width: 100%; - grid-column: 2; - max-height: 400px; + max-height: 30vh; + object-fit: contain; + display: block; } .mx_MemberInfo_avatar .mx_BaseAvatar { @@ -133,3 +133,6 @@ limitations under the License. margin-left: 8px; } +.mx_MemberInfo .mx_MemberInfo_scrollContainer { + flex: 1; +} diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 6b626b31c2..f78e9e8d75 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -958,7 +958,7 @@ module.exports = withMatrixClient(React.createClass({ { roomMemberDetails }
- +
{ this._renderUserOptions() }