Merge remote-tracking branch 'upstream/develop' into feature/voice-activity

This commit is contained in:
Šimon Brandner 2021-08-22 10:01:17 +02:00
commit 61188561d2
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
11 changed files with 72 additions and 28 deletions

View file

@ -24,6 +24,11 @@ $roomListCollapsedWidth: 68px;
} }
} }
.mx_LeftPanel_wrapper {
display: flex;
max-width: 50%;
}
.mx_LeftPanel { .mx_LeftPanel {
background-color: $roomlist-bg-color; background-color: $roomlist-bg-color;
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel

View file

@ -47,9 +47,7 @@ limitations under the License.
display: flex; display: flex;
flex: 1; flex: 1;
flex-grow: 0;
min-height: 0; min-height: 0;
max-width: 50%;
} }
.mx_MatrixChat_syncError { .mx_MatrixChat_syncError {
@ -65,7 +63,7 @@ limitations under the License.
} }
/* not the left panel, and not the resize handle, so the roomview/groupview/... */ /* 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; background-color: $primary-bg-color;
flex: 1 1 0; flex: 1 1 0;

View file

@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RoomView_wrapper {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
justify-content: center;
}
.mx_RoomView { .mx_RoomView {
word-wrap: break-word; word-wrap: break-word;
display: flex; display: flex;

View file

@ -41,7 +41,7 @@ limitations under the License.
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $tertiary-fg-color; background-color: $secondary-fg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
@ -132,7 +132,7 @@ limitations under the License.
position: absolute; position: absolute;
height: 13px; height: 13px;
width: 13px; width: 13px;
background-color: $tertiary-fg-color; background-color: $secondary-fg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }

View file

@ -60,7 +60,7 @@
.mx_Autocomplete_Completion_container_pill { .mx_Autocomplete_Completion_container_pill {
margin: 12px; margin: 12px;
display: flex; display: flex;
flex-flow: wrap; flex-direction: column;
} }
.mx_Autocomplete_Completion_container_truncate { .mx_Autocomplete_Completion_container_truncate {
@ -68,7 +68,6 @@
.mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_description { .mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions */ /* Ellipsis for long names/subtitles/descriptions */
max-width: 150px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

View file

@ -264,6 +264,7 @@ limitations under the License.
} }
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], .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_EventTile.mx_EventTile_info[data-layout=bubble],
.mx_EventListSummary[data-layout=bubble][data-expanded=false] { .mx_EventListSummary[data-layout=bubble][data-expanded=false] {
--backgroundColor: transparent; --backgroundColor: transparent;

View file

@ -140,12 +140,13 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
public render() { public render() {
if (!this.props.backgroundImage) return null; if (!this.props.backgroundImage) return null;
return <div className="mx_BackdropPanel"> return <div className="mx_BackdropPanel">
<img { this.state?.llpImage !== 'data:,' && <img
className="mx_BackdropPanel--canvas" className="mx_BackdropPanel--canvas"
src={this.state.llpImage} /> src={this.state.llpImage} /> }
<img
{ this.state?.lpImage !== 'data:,' && <img
className="mx_BackdropPanel--canvas" className="mx_BackdropPanel--canvas"
src={this.state.lpImage} /> src={this.state.lpImage} /> }
<canvas <canvas
ref={this.leftLeftPanelRef} ref={this.leftLeftPanelRef}
className="mx_BackdropPanel--canvas" className="mx_BackdropPanel--canvas"

View file

@ -644,18 +644,22 @@ class LoggedInView extends React.Component<IProps, IState> {
aria-hidden={this.props.hideToSRUsers} aria-hidden={this.props.hideToSRUsers}
> >
<ToastContainer /> <ToastContainer />
<div ref={this._resizeContainer} className={bodyClasses}> <div className={bodyClasses}>
<BackdropPanel <div ref={this._resizeContainer} className='mx_LeftPanel_wrapper'>
backgroundImage={this.state.backgroundImage} <BackdropPanel
/> backgroundImage={this.state.backgroundImage}
{ SpaceStore.spacesEnabled ? <SpacePanel /> : null } />
<LeftPanel { SpaceStore.spacesEnabled ? <SpacePanel /> : null }
isMinimized={this.props.collapseLhs || false} <LeftPanel
resizeNotifier={this.props.resizeNotifier} isMinimized={this.props.collapseLhs || false}
/> resizeNotifier={this.props.resizeNotifier}
<ResizeHandle /> />
<ResizeHandle />
</div>
<div className="mx_RoomView_wrapper">
{ pageElement }
</div>
</div> </div>
{ pageElement }
</div> </div>
<CallContainer /> <CallContainer />
<NonUrgentToastContainer /> <NonUrgentToastContainer />

View file

@ -857,7 +857,12 @@ export default class EventTile extends React.Component<IProps, IState> {
render() { render() {
const msgtype = this.props.mxEvent.getContent().msgtype; const msgtype = this.props.mxEvent.getContent().msgtype;
const eventType = this.props.mxEvent.getType() as EventType; 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 // This shouldn't happen: the caller should check we support this type
// before trying to instantiate us // before trying to instantiate us
@ -879,6 +884,7 @@ export default class EventTile extends React.Component<IProps, IState> {
const isEditing = !!this.props.editState; const isEditing = !!this.props.editState;
const classes = classNames({ const classes = classNames({
mx_EventTile_bubbleContainer: isBubbleMessage, mx_EventTile_bubbleContainer: isBubbleMessage,
mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
mx_EventTile: true, mx_EventTile: true,
mx_EventTile_isEditing: isEditing, mx_EventTile_isEditing: isEditing,
mx_EventTile_info: isInfoMessage, mx_EventTile_info: isInfoMessage,

View file

@ -45,6 +45,8 @@ import BaseAvatar from '../avatars/BaseAvatar';
import { throttle } from 'lodash'; import { throttle } from 'lodash';
import SpaceStore from "../../../stores/SpaceStore"; import SpaceStore from "../../../stores/SpaceStore";
const getSearchQueryLSKey = (roomId: string) => `mx_MemberList_searchQuarry_${roomId}`;
const INITIAL_LOAD_NUM_MEMBERS = 30; const INITIAL_LOAD_NUM_MEMBERS = 30;
const INITIAL_LOAD_NUM_INVITED = 5; const INITIAL_LOAD_NUM_INVITED = 5;
const SHOW_MORE_INCREMENT = 100; const SHOW_MORE_INCREMENT = 100;
@ -171,6 +173,13 @@ export default class MemberList extends React.Component<IProps, IState> {
} }
private getMembersState(members: Array<RoomMember>): IState { private getMembersState(members: Array<RoomMember>): 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 // set the state after determining showPresence to make sure it's
// taken into account while rendering // taken into account while rendering
return { return {
@ -184,7 +193,7 @@ export default class MemberList extends React.Component<IProps, IState> {
// in practice I find that a little constraining // in practice I find that a little constraining
truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS,
truncateAtInvited: INITIAL_LOAD_NUM_INVITED, truncateAtInvited: INITIAL_LOAD_NUM_INVITED,
searchQuery: "", searchQuery: searchQuery ?? "",
}; };
} }
@ -414,6 +423,12 @@ export default class MemberList extends React.Component<IProps, IState> {
}; };
private onSearchQueryChanged = (searchQuery: string): void => { 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({ this.setState({
searchQuery, searchQuery,
filteredJoinedMembers: this.filterMembers(this.state.members, 'join', searchQuery), filteredJoinedMembers: this.filterMembers(this.state.members, 'join', searchQuery),
@ -554,7 +569,9 @@ export default class MemberList extends React.Component<IProps, IState> {
<SearchBox <SearchBox
className="mx_MemberList_query mx_textinput_icon mx_textinput_search" className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
placeholder={_t('Filter room members')} placeholder={_t('Filter room members')}
onSearch={this.onSearchQueryChanged} /> onSearch={this.onSearchQueryChanged}
initialValue={this.state.searchQuery}
/>
); );
let previousPhase = RightPanelPhases.RoomSummary; let previousPhase = RightPanelPhases.RoomSummary;

View file

@ -103,6 +103,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
isInfoMessage: boolean; isInfoMessage: boolean;
tileHandler: string; tileHandler: string;
isBubbleMessage: boolean; isBubbleMessage: boolean;
isLeftAlignedBubbleMessage: boolean;
} { } {
const content = mxEvent.getContent(); const content = mxEvent.getContent();
const msgtype = content.msgtype; const msgtype = content.msgtype;
@ -118,12 +119,16 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
(eventType === EventType.RoomEncryption) || (eventType === EventType.RoomEncryption) ||
(tileHandler === "messages.MJitsiWidgetEvent") (tileHandler === "messages.MJitsiWidgetEvent")
); );
const isLeftAlignedBubbleMessage = (
!isBubbleMessage &&
eventType === EventType.CallInvite
);
let isInfoMessage = ( let isInfoMessage = (
!isBubbleMessage && !isBubbleMessage &&
!isLeftAlignedBubbleMessage &&
eventType !== EventType.RoomMessage && eventType !== EventType.RoomMessage &&
eventType !== EventType.Sticker && eventType !== EventType.Sticker &&
eventType !== EventType.RoomCreate && eventType !== EventType.RoomCreate
eventType !== EventType.CallInvite
); );
// If we're showing hidden events in the timeline, we should use the // If we're showing hidden events in the timeline, we should use the
@ -137,5 +142,5 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
isInfoMessage = true; isInfoMessage = true;
} }
return { tileHandler, isInfoMessage, isBubbleMessage }; return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage };
} }