From 2ca616c2399ad1f2522d192f6659a919bc70be70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 16 Aug 2021 10:15:54 +0200 Subject: [PATCH 1/9] Format autocomplete suggestions vertically MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_Autocomplete.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index f8e0a382b1..f87bb571d6 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -60,7 +60,7 @@ .mx_Autocomplete_Completion_container_pill { margin: 12px; display: flex; - flex-flow: wrap; + flex-direction: column; } .mx_Autocomplete_Completion_container_truncate { @@ -68,7 +68,6 @@ .mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_description { /* Ellipsis for long names/subtitles/descriptions */ - max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; From d8f58e95cb9553c74d98f1ed3a16837c5a7001ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 16 Aug 2021 18:34:59 +0200 Subject: [PATCH 2/9] Use the secondary color for all MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 2d9caf1569..cd583ef4f2 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -41,7 +41,7 @@ limitations under the License. height: 16px; width: 16px; - background-color: $tertiary-fg-color; + background-color: $secondary-fg-color; mask-repeat: no-repeat; mask-size: contain; mask-position: center; @@ -126,7 +126,7 @@ limitations under the License. position: absolute; height: 13px; width: 13px; - background-color: $tertiary-fg-color; + background-color: $secondary-fg-color; mask-repeat: no-repeat; mask-size: contain; } From c17f3d896ff910e3801362d29990d98cd0b2119e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 19 Aug 2021 15:48:14 +0200 Subject: [PATCH 3/9] Persist last `MemberList` search query per-room MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/MemberList.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 0c90d2ee09..415d7e942b 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -45,6 +45,8 @@ import BaseAvatar from '../avatars/BaseAvatar'; import { throttle } from 'lodash'; import SpaceStore from "../../../stores/SpaceStore"; +const getSearchQueryLSKey = (roomId: string) => `mx_MemberList_searchQuarry_${roomId}`; + const INITIAL_LOAD_NUM_MEMBERS = 30; const INITIAL_LOAD_NUM_INVITED = 5; const SHOW_MORE_INCREMENT = 100; @@ -171,6 +173,13 @@ export default class MemberList extends React.Component { } private getMembersState(members: Array): IState { + let searchQuery; + try { + searchQuery = window.localStorage.getItem(getSearchQueryLSKey(this.props.roomId)); + } catch (error) { + console.warn("Failed to get last the MemberList search query", error); + } + // set the state after determining showPresence to make sure it's // taken into account while rendering return { @@ -184,7 +193,7 @@ export default class MemberList extends React.Component { // in practice I find that a little constraining truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, truncateAtInvited: INITIAL_LOAD_NUM_INVITED, - searchQuery: "", + searchQuery: searchQuery ?? "", }; } @@ -414,6 +423,12 @@ export default class MemberList extends React.Component { }; private onSearchQueryChanged = (searchQuery: string): void => { + try { + window.localStorage.setItem(getSearchQueryLSKey(this.props.roomId), searchQuery); + } catch (error) { + console.warn("Failed to set the last MemberList search query", error); + } + this.setState({ searchQuery, filteredJoinedMembers: this.filterMembers(this.state.members, 'join', searchQuery), @@ -554,7 +569,9 @@ export default class MemberList extends React.Component { + onSearch={this.onSearchQueryChanged} + initialValue={this.state.searchQuery} + /> ); let previousPhase = RightPanelPhases.RoomSummary; From f5a284a1f044fddb17773552200267a0ae1b016f Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Thu, 19 Aug 2021 16:10:09 +0200 Subject: [PATCH 4/9] Fix flex values after blur changes --- res/css/structures/_LeftPanel.scss | 5 +++++ res/css/structures/_MatrixChat.scss | 5 ++--- src/components/structures/LoggedInView.tsx | 24 ++++++++++++---------- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index db634cd71f..29077811d6 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -24,6 +24,11 @@ $roomListCollapsedWidth: 68px; } } +.mx_LeftPanel_wrapper { + display: flex; + max-width: 50%; +} + .mx_LeftPanel { background-color: $roomlist-bg-color; // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index 90e28fb0a9..147bf2a1d1 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -33,6 +33,7 @@ limitations under the License. height: 100%; } + .mx_MatrixToolbar { order: 1; @@ -47,9 +48,7 @@ limitations under the License. display: flex; flex: 1; - flex-grow: 0; min-height: 0; - max-width: 50%; } .mx_MatrixChat_syncError { @@ -65,7 +64,7 @@ limitations under the License. } /* not the left panel, and not the resize handle, so the roomview/groupview/... */ -.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) { +.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) { background-color: $primary-bg-color; flex: 1 1 0; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 44c65c73ff..85b62637e6 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -644,18 +644,20 @@ class LoggedInView extends React.Component { aria-hidden={this.props.hideToSRUsers} > -
- - { SpaceStore.spacesEnabled ? : null } - - +
+
+ + { SpaceStore.spacesEnabled ? : null } + + +
+ { pageElement }
- { pageElement }
From 3f1c35d71c33eb90ca2924a06200f071f17ffaea Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Thu, 19 Aug 2021 19:26:19 +0200 Subject: [PATCH 5/9] Fix backdrop panel empty image --- src/components/structures/BackdropPanel.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index 2dd4b18fb9..5f94692fc7 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -140,12 +140,13 @@ export default class BackdropPanel extends React.PureComponent { public render() { if (!this.props.backgroundImage) return null; return
- - } + + { this.state?.lpImage !== 'data:,' && + src={this.state.lpImage} /> } Date: Fri, 20 Aug 2021 10:04:40 +0200 Subject: [PATCH 6/9] Fix call tiles on the bubble layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventBubbleTile.scss | 1 + src/components/views/rooms/EventTile.tsx | 8 +++++++- src/utils/EventUtils.ts | 11 ++++++++--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index c6170bf7c0..f270146606 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -264,6 +264,7 @@ limitations under the License. } .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], +.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble], .mx_EventTile.mx_EventTile_info[data-layout=bubble], .mx_EventListSummary[data-layout=bubble][data-expanded=false] { --backgroundColor: transparent; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index c97b28b368..dd954e46ce 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -857,7 +857,12 @@ export default class EventTile extends React.Component { render() { const msgtype = this.props.mxEvent.getContent().msgtype; const eventType = this.props.mxEvent.getType() as EventType; - const { tileHandler, isBubbleMessage, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent); + const { + tileHandler, + isBubbleMessage, + isInfoMessage, + isLeftAlignedBubbleMessage, + } = getEventDisplayInfo(this.props.mxEvent); // This shouldn't happen: the caller should check we support this type // before trying to instantiate us @@ -879,6 +884,7 @@ export default class EventTile extends React.Component { const isEditing = !!this.props.editState; const classes = classNames({ mx_EventTile_bubbleContainer: isBubbleMessage, + mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage, mx_EventTile: true, mx_EventTile_isEditing: isEditing, mx_EventTile_info: isInfoMessage, diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts index 7aef05c523..d5a5c416ba 100644 --- a/src/utils/EventUtils.ts +++ b/src/utils/EventUtils.ts @@ -103,6 +103,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): { isInfoMessage: boolean; tileHandler: string; isBubbleMessage: boolean; + isLeftAlignedBubbleMessage: boolean; } { const content = mxEvent.getContent(); const msgtype = content.msgtype; @@ -118,12 +119,16 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): { (eventType === EventType.RoomEncryption) || (tileHandler === "messages.MJitsiWidgetEvent") ); + const isLeftAlignedBubbleMessage = ( + !isBubbleMessage && + eventType === EventType.CallInvite + ); let isInfoMessage = ( !isBubbleMessage && + !isLeftAlignedBubbleMessage && eventType !== EventType.RoomMessage && eventType !== EventType.Sticker && - eventType !== EventType.RoomCreate && - eventType !== EventType.CallInvite + eventType !== EventType.RoomCreate ); // If we're showing hidden events in the timeline, we should use the @@ -137,5 +142,5 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): { isInfoMessage = true; } - return { tileHandler, isInfoMessage, isBubbleMessage }; + return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage }; } From 67ce0815103a2e1b0dcfe5efc3fbc67bd9f29d54 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Fri, 20 Aug 2021 13:04:45 +0200 Subject: [PATCH 7/9] Fix one line too much in scss --- res/css/structures/_MatrixChat.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index 147bf2a1d1..5232c14e74 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -33,7 +33,6 @@ limitations under the License. height: 100%; } - .mx_MatrixToolbar { order: 1; From 86b6c6a83637b6e5e19c93bb445ac208ba2f5732 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Fri, 20 Aug 2021 15:57:22 +0200 Subject: [PATCH 8/9] Fix room views not having proper container --- res/css/structures/_RoomView.scss | 7 +++++++ src/components/structures/LoggedInView.tsx | 4 +++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 84f28b5ada..5c20f675f9 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -14,6 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_RoomView_wrapper { + display: flex; + flex-direction: column; + flex: 1; + position: relative; +} + .mx_RoomView { word-wrap: break-word; display: flex; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 85b62637e6..6008268877 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -656,7 +656,9 @@ class LoggedInView extends React.Component { />
- { pageElement } +
+ { pageElement } +
From d9b79888fd1b1d0074266b3c59c6d464061cedee Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Fri, 20 Aug 2021 18:15:57 +0200 Subject: [PATCH 9/9] Fix content not being centered --- res/css/structures/_RoomView.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 5c20f675f9..81ea75c442 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -19,6 +19,7 @@ limitations under the License. flex-direction: column; flex: 1; position: relative; + justify-content: center; } .mx_RoomView {