From 2163a54617c41ec4e56b4db5454daf343a70276c Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 1 Nov 2017 17:32:01 +0000 Subject: [PATCH 01/10] Implement simple GroupRoomInfo See matrix-org/matrix-react-sdk#1563 --- src/components/structures/RightPanel.js | 18 +++++++++++++++--- .../views/groups/_GroupRoomList.scss | 15 --------------- .../views/rooms/_EntityTile.scss | 2 +- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 311c897f50..76d9dd3743 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -205,7 +205,6 @@ module.exports = React.createClass({ } else if (this.props.groupId) { this.setState({ phase: this.Phase.GroupMemberList, - groupId: payload.groupId, member: payload.member, }); } @@ -213,13 +212,20 @@ module.exports = React.createClass({ } else if (payload.action === "view_group") { this.setState({ phase: this.Phase.GroupMemberList, - groupId: payload.groupId, member: null, }); + } else if (payload.action === "view_group_room") { + this.setState({ + phase: this.Phase.GroupRoomInfo, + groupRoom: payload.groupRoom, + }); + } else if (payload.action === "view_group_room_list") { + this.setState({ + phase: this.Phase.GroupRoomList, + }); } else if (payload.action === "view_group_user") { this.setState({ phase: this.Phase.GroupMemberInfo, - groupId: payload.groupId, member: payload.member, }); } else if (payload.action === "view_room") { @@ -242,6 +248,7 @@ module.exports = React.createClass({ const GroupMemberList = sdk.getComponent('groups.GroupMemberList'); const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo'); const GroupRoomList = sdk.getComponent('groups.GroupRoomList'); + const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo'); const TintableSvg = sdk.getComponent("elements.TintableSvg"); @@ -340,6 +347,11 @@ module.exports = React.createClass({ groupMember={this.state.member} groupId={this.props.groupId} key={this.state.member.user_id} />; + } else if (this.state.phase == this.Phase.GroupRoomInfo) { + panel = ; } else if (this.state.phase == this.Phase.NotificationPanel) { panel = ; } else if (this.state.phase == this.Phase.FilePanel) { diff --git a/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupRoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupRoomList.scss index 91f0c34789..fb41ebaa9e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupRoomList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupRoomList.scss @@ -19,18 +19,3 @@ limitations under the License. color: $primary-fg-color; cursor: pointer; } - -.mx_GroupRoomTile_delete { - opacity: 0.4; - position: absolute; - top: 6px; - right: 10px; - cursor: pointer; - - display: none; -} - -.mx_GroupRoomTile:hover > .mx_GroupRoomTile_delete { - display: initial; -} - diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss index 712e4bae74..031894afde 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss @@ -57,7 +57,7 @@ limitations under the License. font-size: 14px; text-overflow: ellipsis; white-space: nowrap; - max-width: 135px; + max-width: 155px; } .mx_EntityTile_details { From cd84d86fd13f7d239b91b42fab461fb86667cd66 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 1 Nov 2017 19:45:59 +0000 Subject: [PATCH 02/10] CSS for room notification pills --- .../matrix-react-sdk/views/elements/_RichText.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss index 0927cfbcbc..11dfee93d6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss @@ -3,7 +3,8 @@ // --Matthew .mx_UserPill, -.mx_RoomPill { +.mx_RoomPill, +.mx_AtRoomPill { border-radius: 16px; display: inline-block; height: 20px; @@ -24,9 +25,10 @@ padding-right: 5px; } -.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me { - color: $accent-fg-color; - background-color: $mention-user-pill-bg-color; +.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, .mx_AtRoomPill { + /* !important because otherwise @room pills in links get their colours clobbered by links styles :( */ + color: $accent-fg-color !important; + background-color: $mention-user-pill-bg-color !important; padding-right: 5px; } @@ -39,7 +41,8 @@ } .mx_UserPill .mx_BaseAvatar, -.mx_RoomPill .mx_BaseAvatar { +.mx_RoomPill .mx_BaseAvatar, +.mx_AtRoomPill .mx_BaseAvatar { position: relative; left: -3px; top: 2px; From 65ea7a8460cfbe2bc93cd38b1f994a529efda19f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 2 Nov 2017 10:37:25 +0000 Subject: [PATCH 03/10] Use more spercific selector instead of !important --- .../css/matrix-react-sdk/views/elements/_RichText.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss index 11dfee93d6..8b7c8f06bb 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss @@ -25,10 +25,10 @@ padding-right: 5px; } -.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, .mx_AtRoomPill { - /* !important because otherwise @room pills in links get their colours clobbered by links styles :( */ - color: $accent-fg-color !important; - background-color: $mention-user-pill-bg-color !important; +.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, +.mx_EventTile_content .mx_AtRoomPill { + color: $accent-fg-color; + background-color: $mention-user-pill-bg-color; padding-right: 5px; } From c01ea566763733fb2525f21f15aa02afccb37dce Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 2 Nov 2017 13:40:07 +0000 Subject: [PATCH 04/10] Add toggle to alter visibility of room-group association --- src/components/structures/RightPanel.js | 9 ++--- .../views/elements/InlineSpinner.js | 33 +++++++++++++++++++ src/skins/vector/css/_components.scss | 5 +-- .../views/rooms/_MemberInfo.scss | 10 ++++++ .../views/elements/_InlineSpinner.scss | 24 ++++++++++++++ 5 files changed, 75 insertions(+), 6 deletions(-) create mode 100644 src/components/views/elements/InlineSpinner.js create mode 100644 src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 76d9dd3743..dedd715f9c 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -90,6 +90,7 @@ module.exports = React.createClass({ RoomMemberList: 'RoomMemberList', GroupMemberList: 'GroupMemberList', GroupRoomList: 'GroupRoomList', + GroupRoomInfo: 'GroupRoomInfo', FilePanel: 'FilePanel', NotificationPanel: 'NotificationPanel', RoomMemberInfo: 'RoomMemberInfo', @@ -217,7 +218,7 @@ module.exports = React.createClass({ } else if (payload.action === "view_group_room") { this.setState({ phase: this.Phase.GroupRoomInfo, - groupRoom: payload.groupRoom, + groupRoomId: payload.groupRoomId, }); } else if (payload.action === "view_group_room_list") { this.setState({ @@ -312,7 +313,7 @@ module.exports = React.createClass({ analytics={['Right Panel', 'Group Member List Button', 'click']} />, , @@ -349,9 +350,9 @@ module.exports = React.createClass({ key={this.state.member.user_id} />; } else if (this.state.phase == this.Phase.GroupRoomInfo) { panel = ; + key={this.state.groupRoomId} />; } else if (this.state.phase == this.Phase.NotificationPanel) { panel = ; } else if (this.state.phase == this.Phase.FilePanel) { diff --git a/src/components/views/elements/InlineSpinner.js b/src/components/views/elements/InlineSpinner.js new file mode 100644 index 0000000000..adb916fcf0 --- /dev/null +++ b/src/components/views/elements/InlineSpinner.js @@ -0,0 +1,33 @@ +/* +Copyright 2017 New Vector Ltd. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +const React = require('react'); + +module.exports = React.createClass({ + displayName: 'InlineSpinner', + + render: function() { + var w = this.props.w || 16; + var h = this.props.h || 16; + var imgClass = this.props.imgClassName || ""; + + return ( +
+ +
+ ); + } +}); diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 82c2c18641..c857a7c35a 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -55,6 +55,8 @@ @import "./matrix-react-sdk/views/rooms/_MemberInfo.scss"; @import "./matrix-react-sdk/views/rooms/_MemberList.scss"; @import "./matrix-react-sdk/views/rooms/_MessageComposer.scss"; +@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss"; +@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss"; @import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss"; @import "./matrix-react-sdk/views/rooms/_RoomHeader.scss"; @import "./matrix-react-sdk/views/rooms/_RoomList.scss"; @@ -68,8 +70,6 @@ @import "./matrix-react-sdk/views/voip/_CallView.scss"; @import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss"; @import "./matrix-react-sdk/views/voip/_VideoView.scss"; -@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss"; -@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss"; @import "./vector-web/_fonts.scss"; @import "./vector-web/structures/_CompatibilityPage.scss"; @import "./vector-web/structures/_HomePage.scss"; @@ -86,6 +86,7 @@ @import "./vector-web/views/dialogs/_SetPasswordDialog.scss"; @import "./vector-web/views/directory/_NetworkDropdown.scss"; @import "./vector-web/views/elements/_ImageView.scss"; +@import "./vector-web/views/elements/_InlineSpinner.scss"; @import "./vector-web/views/elements/_Spinner.scss"; @import "./vector-web/views/globals/_MatrixToolbar.scss"; @import "./vector-web/views/messages/_DateSeparator.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 8920c6f69d..567d6dba7b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -94,3 +94,13 @@ limitations under the License. cursor: pointer; } +.mx_MemberInfo label { + font-size: 13px; +} + +.mx_MemberInfo input[type="radio"] { + vertical-align: -2px; + margin-right: 5px; + margin-left: 8px; +} + diff --git a/src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss b/src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss new file mode 100644 index 0000000000..612b6209c6 --- /dev/null +++ b/src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss @@ -0,0 +1,24 @@ +/* +Copyright 2017 New Vector Ltd. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_InlineSpinner { + display: inline; +} + +.mx_InlineSpinner img { + margin: 0px 6px; + vertical-align: -3px; +} From 06ce4678761a6d8d0434f11fe16a6d3440a31adf Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 2 Nov 2017 15:05:08 +0000 Subject: [PATCH 05/10] Add CSS for group room visibility label alignment --- .../css/matrix-react-sdk/views/rooms/_MemberInfo.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 567d6dba7b..5d47275efe 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -98,6 +98,12 @@ limitations under the License. font-size: 13px; } +.mx_MemberInfo label .mx_MemberInfo_label_text { + display: inline-block; + max-width: 180px; + vertical-align: text-top; +} + .mx_MemberInfo input[type="radio"] { vertical-align: -2px; margin-right: 5px; From f6974407e30e358faa68e35eb6408125e60db1e9 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 3 Nov 2017 11:22:29 +0000 Subject: [PATCH 06/10] CSS for Your Communities scrollbar and also attempt to fix GroupTile flex weirdness. --- .../structures/_MyGroups.scss | 35 +++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss index ddcf46fb47..a9c7a5f03b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss @@ -18,6 +18,9 @@ limitations under the License. max-width: 960px; margin-left: auto; margin-right: auto; + + display: flex; + flex-direction: column; } .mx_MyGroups .mx_RoomHeader_simpleHeader { @@ -61,10 +64,21 @@ limitations under the License. /* Until the button is wired up */ .mx_MyGroups_joinBox { visibility: hidden; + height: 0px; + margin: 0px; } .mx_MyGroups_content { margin-left: 2px; + + flex: 1 0 0; + + display: flex; + flex-direction: column; +} + +.mx_MyGroups_content h3 { + margin-bottom: 10px; } .mx_MyGroups_placeholder { @@ -75,19 +89,22 @@ limitations under the License. text-align: center; } -.mx_MyGroups_joinedGroups { +.mx_MyGroups_joinedGroups .gm-scroll-view { + border-top: 1px solid $primary-hairline-color; + overflow-x: hidden; + display: flex; flex-direction: row; flex-flow: wrap; - justify-content: space-around; + align-content: flex-start; } -.mx_MyGroups_joinedGroups .mx_GroupTile { +.mx_MyGroups_joinedGroups .gm-scroll-view .mx_GroupTile { min-width: 300px; - flex: 1 0 25%; + max-width: 33%; + flex: 1 0 300px; height: 75px; - margin-bottom: 15px; - margin-right: 10px; + margin: 10px 0px; display: flex; align-items: flex-start; cursor: pointer; @@ -100,6 +117,12 @@ limitations under the License. justify-content: center; } +.mx_GroupTile_profile h3.mx_GroupTile_name, +.mx_GroupTile_profile .mx_GroupTile_groupId, +.mx_GroupTile_profile .mx_GroupTile_desc { + padding-right: 10px; +} + .mx_GroupTile_profile h3.mx_GroupTile_name { margin: 0px; font-size: 15px; From 4d11e739b555c71177bb0a9b5379315ffd400d89 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 3 Nov 2017 11:42:06 +0000 Subject: [PATCH 07/10] Comment 0px height and margin on joinBox --- .../vector/css/matrix-react-sdk/structures/_MyGroups.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss index a9c7a5f03b..d7cbda9a9b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss @@ -64,6 +64,11 @@ limitations under the License. /* Until the button is wired up */ .mx_MyGroups_joinBox { visibility: hidden; + + /* When joinBox wraps onto its own row, it should take up zero height so + that there isn't an awkward gap between MyGroups_createBox and + MyGroups_content. + */ height: 0px; margin: 0px; } From c60ff5d28335b688ad152c316fbd46b8dc98216e Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 3 Nov 2017 12:15:33 +0000 Subject: [PATCH 08/10] Fix group invites such that they look similar to room invites - Remove CSS for GroupInviteTile - the component should be using RoomTile CSS - Added extra tiles to roomCount of RoomSubList header Part of fixing https://github.com/vector-im/riot-web/issues/5226 --- src/components/structures/RoomSubList.js | 9 ++- .../views/groups/_GroupInviteTile.scss | 74 ------------------- src/skins/vector/css/themes/_base.scss | 1 - 3 files changed, 7 insertions(+), 77 deletions(-) delete mode 100644 src/skins/vector/css/matrix-react-sdk/views/groups/_GroupInviteTile.scss diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 8fb7562f64..c3f51bc815 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -246,10 +246,14 @@ var RoomSubList = React.createClass({ roomNotificationCount: function(truncateAt) { var self = this; + if (this.props.isInvite) { + return [0, true]; + } + return this.props.list.reduce(function(result, room, index) { if (truncateAt === undefined || index >= truncateAt) { var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); - var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.isInvite; + var highlight = room.getUnreadNotificationCount('highlight') > 0; var notificationCount = room.getUnreadNotificationCount(); const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState); @@ -394,7 +398,8 @@ var RoomSubList = React.createClass({ var subListNotifCount = subListNotifications[0]; var subListNotifHighlight = subListNotifications[1]; - var roomCount = this.props.list.length > 0 ? this.props.list.length : ''; + var totalTiles = this.props.list.length + (this.props.extraTiles || []).length; + var roomCount = totalTiles > 0 ? totalTiles : ''; var chevronClasses = classNames({ 'mx_RoomSubList_chevron': true, diff --git a/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupInviteTile.scss b/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupInviteTile.scss deleted file mode 100644 index 6b4034b9aa..0000000000 --- a/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupInviteTile.scss +++ /dev/null @@ -1,74 +0,0 @@ -/* -Copyright 2017 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_GroupInviteTile { - position: relative; - cursor: pointer; - font-size: 13px; - display: block; - height: 34px; -} - -.mx_GroupInviteTile_nameContainer { - display: inline-block; - width: 180px; - height: 24px; -} - -.mx_GroupInviteTile_avatarContainer { - display: inline-block; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 6px; - width: 24px; - height: 24px; - vertical-align: middle; -} - -.mx_GroupInviteTile_name { - display: inline-block; - position: relative; - width: 165px; - vertical-align: middle; - padding-left: 6px; - padding-right: 6px; - padding-top: 2px; - padding-bottom: 3px; - color: $roomtile-name-color; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.mx_GroupInviteTile_badge { - display: inline-block; - min-width: 15px; - height: 15px; - position: absolute; - right: 8px; /*gutter */ - top: 9px; - border-radius: 8px; - color: $accent-fg-color; - background-color: $group-alert-color; - font-weight: 600; - font-size: 10px; - text-align: center; - padding-top: 1px; - padding-left: 4px; - padding-right: 4px; -} - diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index f1117a7a09..1a0fa5b400 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -23,7 +23,6 @@ $mention-user-pill-bg-color: #ff0064; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // groups -$group-alert-color: #774f7e; $group-my-groups-placeholder-bg: #f7f7f7; $group-my-groups-placeholder-fg: #888; From 3192c345be529bb839fea9eaa0367676cacde599 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 3 Nov 2017 14:11:07 +0000 Subject: [PATCH 09/10] rethemedex Needed, having removed _GroupInviteTile.scss --- src/skins/vector/css/_components.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index c857a7c35a..230b5ae477 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -35,7 +35,6 @@ @import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; @import "./matrix-react-sdk/views/elements/_RichText.scss"; @import "./matrix-react-sdk/views/elements/_RoleButton.scss"; -@import "./matrix-react-sdk/views/groups/_GroupInviteTile.scss"; @import "./matrix-react-sdk/views/groups/_GroupRoomList.scss"; @import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss"; @import "./matrix-react-sdk/views/login/_ServerConfig.scss"; From 04c866ce9ccb3560a81fffcc3b127cf0efc756cf Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 3 Nov 2017 14:39:24 +0000 Subject: [PATCH 10/10] Fix #5359 - unbreakable topics not breaking The room directory CSS has `word-break: break-word` applied to the entire mx_RoomDirectory, which is questionable. For now, add the same rule to RoomDetailList --- src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index 87b46c05e5..583ab2ce2e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -204,6 +204,7 @@ limitations under the License. flex-grow: 1; border-top: 1px solid $primary-hairline-color; padding-top: 10px; + word-break: break-word; } .mx_GroupView .mx_RoomView_messageListWrapper {