PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge branch 'develop' into gsouquet/threaded-messaging-2349

Browse source
This commit is contained in:
Germain Souquet 2021-08-23 10:15:35 +01:00
commit 393bd4871f
13 changed files with 88 additions and 41 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;

13
res/css/views/voip/_CallContainer.scss
View file

@ -26,19 +26,6 @@ limitations under the License.
// different level.
pointer-events: none;
.mx_CallPreview {
pointer-events: initial; // restore pointer events so the user can leave/interact
.mx_VideoFeed_remote.mx_VideoFeed_voice {
min-height: 150px;
}
.mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
}
.mx_AppTile_persistedWrapper div {
min-width: 350px;
}

11
res/css/views/voip/_CallPreview.scss
View file

@ -18,4 +18,15 @@ limitations under the License.
position: fixed;
left: 0;
top: 0;
pointer-events: initial; // restore pointer events so the user can leave/interact
.mx_VideoFeed_remote.mx_VideoFeed_voice {
min-height: 150px;
}
.mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
}

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"

31
src/components/structures/LoggedInView.tsx
View file

@ -152,6 +152,7 @@ class LoggedInView extends React.Component<IProps, IState> {
protected readonly _roomView: React.RefObject<any>;
protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
protected compactLayoutWatcherRef: string;
protected backgroundImageWatcherRef: string;
protected resizer: Resizer;
constructor(props, context) {
@ -195,6 +196,9 @@ class LoggedInView extends React.Component<IProps, IState> {
this.compactLayoutWatcherRef = SettingsStore.watchSetting(
"useCompactLayout", null, this.onCompactLayoutChanged,
);
this.backgroundImageWatcherRef = SettingsStore.watchSetting(
"RoomList.backgroundImage", null, this.refreshBackgroundImage,
);
this.resizer = this.createResizer();
this.resizer.attach();
@ -212,6 +216,7 @@ class LoggedInView extends React.Component<IProps, IState> {
this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
this.resizer.detach();
}
@ -644,18 +649,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

@ -915,7 +915,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
@ -937,6 +942,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 };
}