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

Create room threads list view (#6904)

Browse source 
Implement https://github.com/vector-im/element-web/issues/18957 following requirements:
* Create a new right panel view to list all the threads in a given room.
* Change ThreadView previous phase to be ThreadPanel rather than RoomSummary
* Implement local filters for My and All threads

In addition: 
* Create a new TileShape for proper rendering requirements (hiding typing indicator)
* Create new timelineRenderingType for proper rendering requirements
This commit is contained in:
Dariusz Niemczyk 2021-10-14 15:27:35 +02:00 • committed by GitHub
parent 6bb47ec710
commit 562a880c7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 623 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/views/rooms/EventTile.tsx
View file

@ -56,9 +56,9 @@ import ReadReceiptMarker from "./ReadReceiptMarker";
import MessageActionBar from "../messages/MessageActionBar";
import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
import SettingsStore from "../../../settings/SettingsStore";
import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion";
import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads';
const eventTileTypes = {
[EventType.RoomMessage]: 'messages.MessageEvent',
@ -193,6 +193,7 @@ export enum TileShape {
FileGrid = "file_grid",
Pinned = "pinned",
Thread = "thread",
ThreadPanel = "thread_list"
}
interface IProps {
@ -511,6 +512,10 @@ export default class EventTile extends React.Component<IProps, IState> {
if (this.props.showReactions) {
this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
}
if (SettingsStore.getValue("feature_thread")) {
this.props.mxEvent.off(ThreadEvent.Ready, this.updateThread);
this.props.mxEvent.off(ThreadEvent.Update, this.updateThread);
}
}
componentDidUpdate(prevProps, prevState, snapshot) {
@ -541,13 +546,7 @@ export default class EventTile extends React.Component<IProps, IState> {
<div
className="mx_ThreadInfo"
onClick={() => {
dis.dispatch({
action: Action.SetRightPanelPhase,
phase: RightPanelPhases.ThreadView,
refireParams: {
event: this.props.mxEvent,
},
});
dispatchShowThreadEvent(this.props.mxEvent);
}}
>
<span className="mx_EventListSummary_avatars">

89
src/components/views/rooms/RoomHeader.tsx
View file

@ -155,58 +155,55 @@ export default class RoomHeader extends React.Component<IProps> {
/>;
}
let forgetButton;
if (this.props.onForgetClick) {
forgetButton =
<AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
onClick={this.props.onForgetClick}
title={_t("Forget room")} />;
}
const buttons: JSX.Element[] = [];
let appsButton;
if (this.props.onAppsClick) {
appsButton =
<AccessibleTooltipButton
className={classNames("mx_RoomHeader_button mx_RoomHeader_appsButton", {
mx_RoomHeader_appsButton_highlight: this.props.appsShown,
})}
onClick={this.props.onAppsClick}
title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")} />;
}
let searchButton;
if (this.props.onSearchClick && this.props.inRoom) {
searchButton =
<AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_searchButton"
onClick={this.props.onSearchClick}
title={_t("Search")} />;
}
let voiceCallButton;
let videoCallButton;
if (this.props.inRoom && SettingsStore.getValue("showCallButtonsInComposer")) {
voiceCallButton =
<AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_voiceCallButton"
onClick={() => this.props.onCallPlaced(PlaceCallType.Voice)}
title={_t("Voice call")} />;
videoCallButton =
<AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
onClick={(ev: React.MouseEvent<Element>) => ev.shiftKey ?
this.displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)}
title={_t("Video call")} />;
const voiceCallButton = <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_voiceCallButton"
onClick={() => this.props.onCallPlaced(PlaceCallType.Voice)}
title={_t("Voice call")}
/>;
const videoCallButton = <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
onClick={(ev: React.MouseEvent<Element>) => ev.shiftKey ?
this.displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)}
title={_t("Video call")}
/>;
buttons.push(voiceCallButton, videoCallButton);
}
if (this.props.onForgetClick) {
const forgetButton = <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
onClick={this.props.onForgetClick}
title={_t("Forget room")}
/>;
buttons.push(forgetButton);
}
if (this.props.onAppsClick) {
const appsButton = <AccessibleTooltipButton
className={classNames("mx_RoomHeader_button mx_RoomHeader_appsButton", {
mx_RoomHeader_appsButton_highlight: this.props.appsShown,
})}
onClick={this.props.onAppsClick}
title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")}
/>;
buttons.push(appsButton);
}
if (this.props.onSearchClick && this.props.inRoom) {
const searchButton = <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_searchButton"
onClick={this.props.onSearchClick}
title={_t("Search")}
/>;
buttons.push(searchButton);
}
const rightRow =
<div className="mx_RoomHeader_buttons">
{ videoCallButton }
{ voiceCallButton }
{ forgetButton }
{ appsButton }
{ searchButton }
{ buttons }
</div>;
const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;