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

Allow bubble layout in Thread View (#7478)

Browse source
This commit is contained in:
Michael Telatynski 2022-01-12 09:02:30 +00:00 • committed by GitHub
parent 038a6bc204
commit f5465b37a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 144 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/structures/ThreadView.tsx
View file

@ -18,6 +18,7 @@ import React from 'react';
import { IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src';
import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
import { RelationType } from 'matrix-js-sdk/src/@types/event';
import classNames from "classnames";
import BaseCard from "../views/right_panel/BaseCard";
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
@ -40,6 +41,7 @@ import UploadBar from './UploadBar';
import { _t } from '../../languageHandler';
import ThreadListContextMenu from '../views/context_menus/ThreadListContextMenu';
import RightPanelStore from '../../stores/right-panel/RightPanelStore';
import SettingsStore from "../../settings/SettingsStore";
interface IProps {
room: Room;
@ -53,6 +55,7 @@ interface IProps {
}
interface IState {
thread?: Thread;
layout: Layout;
editState?: EditorStateTransfer;
replyToEvent?: MatrixEvent;
}
@ -63,10 +66,17 @@ export default class ThreadView extends React.Component<IProps, IState> {
private dispatcherRef: string;
private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
private readonly layoutWatcherRef: string;
constructor(props: IProps) {
super(props);
this.state = {};
this.state = {
layout: SettingsStore.getValue("layout"),
};
this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[,,, value]) =>
this.setState({ layout: value as Layout }),
);
}
public componentDidMount(): void {
@ -82,6 +92,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
dis.unregister(this.dispatcherRef);
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
room.removeListener(ThreadEvent.New, this.onNewThread);
SettingsStore.unwatchSetting(this.layoutWatcherRef);
}
public componentDidUpdate(prevProps) {
@ -192,6 +203,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
event_id: this.state.thread?.id,
};
const messagePanelClassNames = classNames(
"mx_RoomView_messagePanel",
{
"mx_GroupLayout": this.state.layout === Layout.Group,
});
return (
<RoomContext.Provider value={{
...this.context,
@ -216,11 +233,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
timelineSet={this.state?.thread?.timelineSet}
showUrlPreview={true}
tileShape={TileShape.Thread}
layout={Layout.Group}
// ThreadView doesn'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}