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

Copy bubble layout changes to timelineCard (#7527)

pull/21833/head
Timo 2022-01-13 10:58:22 +01:00 committed by GitHub
parent db3be7d49e
commit 78ff685caf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/views/right_panel/TimelineCard.tsx
View File

@ -18,6 +18,7 @@ import React from 'react';
import { EventSubscription } from "fbemitter";
import { EventTimelineSet, IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src';
import { Thread } from 'matrix-js-sdk/src/models/thread';
import classNames from 'classnames';
import BaseCard from "./BaseCard";
import ResizeNotifier from '../../../utils/ResizeNotifier';
@ -56,6 +57,7 @@ interface IState {
replyToEvent?: MatrixEvent;
initialEventId?: string;
isInitialEventHighlighted?: boolean;
layout: Layout;
// settings:
showReadReceipts?: boolean;
@ -66,6 +68,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
static contextType = RoomContext;
private dispatcherRef: string;
private layoutWatcherRef: string;
private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
private roomStoreToken: EventSubscription;
private readReceiptsSettingWatcher: string;
@ -74,6 +77,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
super(props);
this.state = {
showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId),
layout: SettingsStore.getValue("layout"),
};
this.readReceiptsSettingWatcher = null;
}
@ -81,20 +85,27 @@ export default class TimelineCard extends React.Component<IProps, IState> {
public componentDidMount(): void {
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
this.dispatcherRef = dis.register(this.onAction);
this.readReceiptsSettingWatcher = SettingsStore.watchSetting("showReadReceipts", null,
(...[,,, value]) => {this.setState({ showReadReceipts: value as boolean });},
this.readReceiptsSettingWatcher = SettingsStore.watchSetting("showReadReceipts", null, (...[,,, value]) =>
this.setState({ showReadReceipts: value as boolean }),
);
this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[,,, value]) =>
this.setState({ layout: value as Layout }),
);
}
public componentWillUnmount(): void {
// Remove RoomStore listener
if (this.roomStoreToken) {
this.roomStoreToken.remove();
}
dis.unregister(this.dispatcherRef);
this.roomStoreToken?.remove();
if (this.readReceiptsSettingWatcher) {
SettingsStore.unwatchSetting(this.readReceiptsSettingWatcher);
}
if (this.layoutWatcherRef) {
SettingsStore.unwatchSetting(this.layoutWatcherRef);
}
dis.unregister(this.dispatcherRef);
}
private onRoomViewStoreUpdate = async (initial?: boolean): Promise<void> => {
@ -149,6 +160,11 @@ export default class TimelineCard extends React.Component<IProps, IState> {
? this.state.initialEventId
: null;
const messagePanelClassNames = classNames({
"mx_RoomView_messagePanel": true,
"mx_GroupLayout": this.state.layout === Layout.Group,
});
return (
<RoomContext.Provider value={{
...this.context,
@ -169,11 +185,12 @@ export default class TimelineCard extends React.Component<IProps, IState> {
sendReadReceiptOnLoad={true}
timelineSet={this.props.timelineSet}
showUrlPreview={true}
layout={Layout.Group}
// The right panel timeline (and therefore threads) don't support IRC layout at this time
layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
hideThreadedMessages={false}
hidden={false}
showReactions={true}
className="mx_RoomView_messagePanel mx_GroupLayout"
className={messagePanelClassNames}
permalinkCreator={this.props.permalinkCreator}
membersLoaded={true}
editState={this.state.editState}