imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Copy bubble layout changes to timelineCard (#7527)

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