OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/21833/head
Šimon Brandner 2021-08-22 10:01:17 +02:00
parent cb7e44f4f5 1c29505c83
commit 61188561d2
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
11 changed files with 72 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
res/css/structures/_LeftPanel.scss
View File

@ -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

4
res/css/structures/_MatrixChat.scss
View File

@ -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;

8
res/css/structures/_RoomView.scss
View File

@ -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;

4
res/css/views/messages/_CallEvent.scss
View File

@ -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;
}

3
res/css/views/rooms/_Autocomplete.scss
View File

@ -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;

1
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -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;

9
src/components/structures/BackdropPanel.tsx
View File

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

26
src/components/structures/LoggedInView.tsx
View File

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

8
src/components/views/rooms/EventTile.tsx
View File

@ -857,7 +857,12 @@ export default class EventTile extends React.Component<IProps, IState> {
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<IProps, IState> {
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,

21
src/components/views/rooms/MemberList.tsx
View File

@ -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<IProps, 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
// taken into account while rendering
return {
@ -184,7 +193,7 @@ export default class MemberList extends React.Component<IProps, IState> {
// 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<IProps, IState> {
};
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<IProps, IState> {
<SearchBox
className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
placeholder={_t('Filter room members')}
onSearch={this.onSearchQueryChanged} />
onSearch={this.onSearchQueryChanged}
initialValue={this.state.searchQuery}
/>
);
let previousPhase = RightPanelPhases.RoomSummary;

11
src/utils/EventUtils.ts
View File

@ -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 };
}