From be0de104ff1ba04af60506018dae0d5a6f377ce5 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 30 Jan 2019 16:24:02 +0100 Subject: [PATCH 1/5] make group header as tall as top left menu/room header --- res/css/structures/_GroupView.scss | 4 ++-- src/components/structures/GroupView.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index 398c51ba91..4498fb1817 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -25,7 +25,7 @@ limitations under the License. } .mx_GroupView_header { - min-height: 70px; + min-height: 52px; align-items: center; display: flex; padding-bottom: 10px; @@ -34,7 +34,7 @@ limitations under the License. .mx_GroupView_header_view { border-bottom: 1px solid $primary-hairline-color; padding-bottom: 0px; - padding-left: 8px; + padding-left: 19px; padding-right: 8px; } diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 8e0e5a3d32..bbbded6f2a 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -1178,7 +1178,7 @@ export default React.createClass({ avatarImage = ; } @@ -1228,7 +1228,7 @@ export default React.createClass({ groupAvatarUrl={groupAvatarUrl} groupName={groupName} onClick={onGroupHeaderItemClick} - width={48} height={48} + width={28} height={28} />; if (summary.profile && summary.profile.name) { nameNode =
From c9900deebee50efde4b6857ae19ea0e0ea8d230b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 30 Jan 2019 16:24:25 +0100 Subject: [PATCH 2/5] center invite button caption --- res/css/views/rooms/_MemberList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index ab3b68b346..bbcc774665 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -72,6 +72,7 @@ limitations under the License. padding: 8px; margin: 9px; display: flex; + justify-content: center; color: $button-fg-color; font-weight: 600; @@ -82,7 +83,6 @@ limitations under the License. } .mx_MemberList_invite span { - margin: 0 auto; background-image: url('$(res)/img/feather-icons/user-add.svg'); background-repeat: no-repeat; background-position: center left; From 405cc5cc24093bc235579fe12f00b6cd12a5256f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 30 Jan 2019 16:59:28 +0100 Subject: [PATCH 3/5] show avatars for members & rooms in group like we do in room right panel also apply padding with hacky :not selector to exclude full-width avatar --- res/css/structures/_GroupView.scss | 5 ++++ .../views/groups/GroupMemberInfo.js | 23 ++++++++----------- src/components/views/groups/GroupRoomInfo.js | 17 +++++++------- 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index 4498fb1817..ace310ee5b 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -349,3 +349,8 @@ limitations under the License. .mx_GroupView_changeDelayWarning { padding: 40px 20px; } + +.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) { + padding-left: 16px; + padding-right: 16px; +} diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js index aa40f1c8b3..42cd47f11f 100644 --- a/src/components/views/groups/GroupMemberInfo.js +++ b/src/components/views/groups/GroupMemberInfo.js @@ -166,17 +166,15 @@ module.exports = React.createClass({ } } - const avatarUrl = this.context.matrixClient.mxcUrlToHttp( - this.props.groupMember.avatarUrl, - 36, 36, 'crop', - ); - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - const avatar = ( - - ); + const avatarUrl = this.props.groupMember.avatarUrl; + let avatarElement; + if (avatarUrl) { + const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800); + avatarElement =
+ +
+ } const groupMemberName = ( this.props.groupMember.displayname || this.props.groupMember.userId @@ -190,10 +188,7 @@ module.exports = React.createClass({ -
- { avatar } -
- + { avatarElement } { groupMemberName }
diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js index 05c6b9cfd4..47c9033766 100644 --- a/src/components/views/groups/GroupRoomInfo.js +++ b/src/components/views/groups/GroupRoomInfo.js @@ -204,22 +204,23 @@ module.exports = React.createClass({
; } - const avatarUrl = this.context.matrixClient.mxcUrlToHttp( - this.state.groupRoom.avatarUrl, - 36, 36, 'crop', - ); + const avatarUrl = this.state.groupRoom.avatarUrl; + let avatarElement; + if (avatarUrl) { + const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800); + avatarElement =
+ +
+ } const groupRoomName = this.state.groupRoom.displayname; - const avatar = ; return (
-
- { avatar } -
+ { avatarElement } { groupRoomName } From 42161f3a23c44867d7e61eca15a6a0c299b7800c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 30 Jan 2019 18:43:16 +0100 Subject: [PATCH 4/5] fix tests --- test/components/structures/GroupView-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/structures/GroupView-test.js b/test/components/structures/GroupView-test.js index b49c335bdf..d163a1d6cb 100644 --- a/test/components/structures/GroupView-test.js +++ b/test/components/structures/GroupView-test.js @@ -188,7 +188,7 @@ describe('GroupView', function() { expect(avatarImgElement).toBeTruthy(); expect(avatarImgElement.src).toContain( 'https://my.home.server/_matrix/media/v1/thumbnail/' + - 'someavatarurl?width=48&height=48&method=crop', + 'someavatarurl?width=28&height=28&method=crop', ); const name = ReactTestUtils.findRenderedDOMComponentWithClass(root, 'mx_GroupView_header_name'); From d8226b348625d1808170534469cdbb552f6ea76d Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 30 Jan 2019 18:53:15 +0100 Subject: [PATCH 5/5] fix lint --- src/components/views/groups/GroupMemberInfo.js | 6 +++--- src/components/views/groups/GroupRoomInfo.js | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js index 42cd47f11f..a25d4271ed 100644 --- a/src/components/views/groups/GroupMemberInfo.js +++ b/src/components/views/groups/GroupMemberInfo.js @@ -171,9 +171,9 @@ module.exports = React.createClass({ let avatarElement; if (avatarUrl) { const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800); - avatarElement =
- -
+ avatarElement = (
+ +
); } const groupMemberName = ( diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js index 47c9033766..df1803fa11 100644 --- a/src/components/views/groups/GroupRoomInfo.js +++ b/src/components/views/groups/GroupRoomInfo.js @@ -149,7 +149,6 @@ module.exports = React.createClass({ }, render: function() { - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); const EmojiText = sdk.getComponent('elements.EmojiText'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const InlineSpinner = sdk.getComponent('elements.InlineSpinner'); @@ -208,9 +207,9 @@ module.exports = React.createClass({ let avatarElement; if (avatarUrl) { const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800); - avatarElement =
- -
+ avatarElement = (
+ +
); } const groupRoomName = this.state.groupRoom.displayname;