Merge remote-tracking branch 'upstream/develop' into feature/voice-activity
This commit is contained in:
commit
61188561d2
11 changed files with 72 additions and 28 deletions
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -644,7 +644,8 @@ 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}>
|
||||||
|
<div ref={this._resizeContainer} className='mx_LeftPanel_wrapper'>
|
||||||
<BackdropPanel
|
<BackdropPanel
|
||||||
backgroundImage={this.state.backgroundImage}
|
backgroundImage={this.state.backgroundImage}
|
||||||
/>
|
/>
|
||||||
|
@ -655,8 +656,11 @@ class LoggedInView extends React.Component<IProps, IState> {
|
||||||
/>
|
/>
|
||||||
<ResizeHandle />
|
<ResizeHandle />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mx_RoomView_wrapper">
|
||||||
{ pageElement }
|
{ pageElement }
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<CallContainer />
|
<CallContainer />
|
||||||
<NonUrgentToastContainer />
|
<NonUrgentToastContainer />
|
||||||
<HostSignupContainer />
|
<HostSignupContainer />
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 };
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue