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..5232c14e74 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -47,9 +47,7 @@ limitations under the License. display: flex; flex: 1; - flex-grow: 0; min-height: 0; - max-width: 50%; } .mx_MatrixChat_syncError { @@ -65,7 +63,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/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 84f28b5ada..81ea75c442 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -14,6 +14,14 @@ 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; + justify-content: center; +} + .mx_RoomView { word-wrap: break-word; display: flex; diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 58d2e2fc32..afc2c93f79 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; @@ -132,7 +132,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; } 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; 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/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} /> } { aria-hidden={this.props.hideToSRUsers} > -
- - { SpaceStore.spacesEnabled ? : null } - - +
+
+ + { SpaceStore.spacesEnabled ? : null } + + +
+
+ { pageElement } +
- { pageElement }
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/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; 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 }; }