mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

History based navigation with new right panel store (#7398)

Browse source 
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
Timo 2022-01-05 17:25:41 +01:00 committed by GitHub
parent 6f89267a31
commit 4ab3470184
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 248 additions and 252 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/structures/FilePanel.tsx
View file

@ -27,7 +27,6 @@ import { logger } from "matrix-js-sdk/src/logger";
import { MatrixClientPeg } from '../../MatrixClientPeg';
import EventIndexPeg from "../../indexing/EventIndexPeg";
import { _t } from '../../languageHandler';
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
import BaseCard from "../views/right_panel/BaseCard";
import { replaceableComponent } from "../../utils/replaceableComponent";
@ -221,7 +220,6 @@ class FilePanel extends React.Component<IProps, IState> {
return <BaseCard
className="mx_FilePanel mx_RoomView_messageListWrapper"
onClose={this.props.onClose}
previousPhase={RightPanelPhases.RoomSummary}
>
<div className="mx_RoomView_empty">
{ _t("You must <a>register</a> to use this functionality",
@ -234,7 +232,6 @@ class FilePanel extends React.Component<IProps, IState> {
return <BaseCard
className="mx_FilePanel mx_RoomView_messageListWrapper"
onClose={this.props.onClose}
previousPhase={RightPanelPhases.RoomSummary}
>
<div className="mx_RoomView_empty">{ _t("You must join the room to see its files") }</div>
</BaseCard>;
@ -258,7 +255,6 @@ class FilePanel extends React.Component<IProps, IState> {
<BaseCard
className="mx_FilePanel"
onClose={this.props.onClose}
previousPhase={RightPanelPhases.RoomSummary}
withoutScrollContainer
>
<DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
@ -285,7 +281,6 @@ class FilePanel extends React.Component<IProps, IState> {
<BaseCard
className="mx_FilePanel"
onClose={this.props.onClose}
previousPhase={RightPanelPhases.RoomSummary}
>
<Spinner />
</BaseCard>

15
src/components/structures/RightPanel.tsx
View file

@ -27,12 +27,10 @@ import GroupStore from '../../stores/GroupStore';
import { RightPanelPhases } from '../../stores/right-panel/RightPanelStorePhases';
import RightPanelStore from "../../stores/right-panel/RightPanelStore";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { Action } from "../../dispatcher/actions";
import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
import WidgetCard from "../views/right_panel/WidgetCard";
import { replaceableComponent } from "../../utils/replaceableComponent";
import SettingsStore from "../../settings/SettingsStore";
import { ActionPayload } from "../../dispatcher/payloads";
import MemberList from "../views/rooms/MemberList";
import GroupMemberList from "../views/groups/GroupMemberList";
import GroupRoomList from "../views/groups/GroupRoomList";
@ -47,7 +45,6 @@ import ResizeNotifier from "../../utils/ResizeNotifier";
import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
import { E2EStatus } from '../../utils/ShieldUtils';
import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads';
import TimelineCard from '../views/right_panel/TimelineCard';
import { UPDATE_EVENT } from '../../stores/AsyncStore';
import { IRightPanelCard, IRightPanelCardState } from '../../stores/right-panel/RightPanelStoreIPanelState';
@ -72,8 +69,6 @@ interface IState {
export default class RightPanel extends React.Component<IProps, IState> {
static contextType = MatrixClientContext;
private dispatcherRef: string;
constructor(props, context) {
super(props, context);
@ -90,7 +85,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
}, 500, { leading: true, trailing: true });
public componentDidMount(): void {
this.dispatcherRef = dis.register(this.onAction);
const cli = this.context;
cli.on("RoomState.members", this.onRoomStateMember);
RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
@ -98,7 +92,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
}
public componentWillUnmount(): void {
dis.unregister(this.dispatcherRef);
if (this.context) {
this.context.removeListener("RoomState.members", this.onRoomStateMember);
}
@ -153,14 +146,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
});
};
private onAction = (payload: ActionPayload) => {
const isChangingRoom = payload.action === Action.ViewRoom && payload.room_id !== this.props.room.roomId;
const isViewingThread = this.state.phase === RightPanelPhases.ThreadView;
if (isChangingRoom && isViewingThread) {
dispatchShowThreadsPanelEvent();
}
};
private onClose = () => {
// XXX: There are three different ways of 'closing' this panel depending on what state
// things are in... this knows far more than it should do about the state of the rest

25
src/components/structures/RoomView.tsx
View file

@ -94,7 +94,7 @@ import MessageComposer from '../views/rooms/MessageComposer';
import JumpToBottomButton from "../views/rooms/JumpToBottomButton";
import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
import SpaceStore from "../../stores/spaces/SpaceStore";
import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threads';
import { showThread } from '../../dispatcher/dispatch-actions/threads';
import { fetchInitialEvent } from "../../utils/EventUtils";
import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
import AppsDrawer from '../views/rooms/AppsDrawer';
@ -338,6 +338,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
if (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) {
// Show chat in right panel when a widget is maximised
RightPanelStore.instance.setCard({ phase: RightPanelPhases.Timeline });
} else if (
RightPanelStore.instance.isOpenForRoom &&
RightPanelStore.instance.roomPhaseHistory.some(card => (card.phase === RightPanelPhases.Timeline))
) {
// hide chat in right panel when the widget is minimized
RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary });
RightPanelStore.instance.togglePanel();
}
this.checkWidgets(this.state.room);
};
@ -424,21 +431,21 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
const thread = initialEvent?.getThread();
if (thread && !initialEvent?.isThreadRoot) {
dispatchShowThreadEvent(
thread.rootEvent,
showThread({
rootEvent: thread.rootEvent,
initialEvent,
RoomViewStore.isInitialEventHighlighted(),
);
highlighted: RoomViewStore.isInitialEventHighlighted(),
});
} else {
newState.initialEventId = initialEventId;
newState.isInitialEventHighlighted = RoomViewStore.isInitialEventHighlighted();
if (thread && initialEvent?.isThreadRoot) {
dispatchShowThreadEvent(
thread.rootEvent,
showThread({
rootEvent: thread.rootEvent,
initialEvent,
RoomViewStore.isInitialEventHighlighted(),
);
highlighted: RoomViewStore.isInitialEventHighlighted(),
});
}
}
}

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

@ -40,8 +40,6 @@ 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';
import { WidgetLayoutStore } from '../../stores/widgets/WidgetLayoutStore';
interface IProps {
room: Room;
@ -194,24 +192,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
event_id: this.state.thread?.id,
};
let previousPhase = RightPanelStore.instance.previousCard.phase;
if (!SettingsStore.getValue("feature_maximised_widgets")) {
previousPhase = RightPanelPhases.ThreadPanel;
}
// change the previous phase to the threadPanel in case there is no maximised widget anymore
if (!WidgetLayoutStore.instance.hasMaximisedWidget(this.props.room)) {
previousPhase = RightPanelPhases.ThreadPanel;
}
// Make sure the previous Phase is always one of the two: Timeline or ThreadPanel
if (![RightPanelPhases.ThreadPanel, RightPanelPhases.Timeline].includes(previousPhase)) {
previousPhase = RightPanelPhases.ThreadPanel;
}
const previousPhaseLabels = {};
previousPhaseLabels[RightPanelPhases.ThreadPanel] = _t("All threads");
previousPhaseLabels[RightPanelPhases.Timeline] = _t("Chat");
return (
<RoomContext.Provider value={{
...this.context,
@ -222,8 +202,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
<BaseCard
className="mx_ThreadView mx_ThreadPanel"
onClose={this.props.onClose}
previousPhase={previousPhase}
previousPhaseLabel={previousPhaseLabels[previousPhase]}
withoutScrollContainer={true}
header={this.renderThreadViewHeader()}
>

8
src/components/views/avatars/MemberAvatar.tsx
View file

@ -25,6 +25,7 @@ import { Action } from "../../../dispatcher/actions";
import BaseAvatar from "./BaseAvatar";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media";
import { CardContext } from '../right_panel/BaseCard';
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
member: RoomMember;
@ -36,6 +37,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
onClick?: React.MouseEventHandler;
// Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
pushUserOnClick?: boolean;
title?: string;
style?: any;
}
@ -99,6 +101,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
dis.dispatch({
action: Action.ViewUser,
member: this.props.member,
push: this.context.isCard,
});
};
}
@ -109,7 +112,10 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
title={this.state.title}
idName={userId}
url={this.state.imageUrl}
onClick={onClick} />
onClick={onClick}
/>
);
}
}
MemberAvatar.contextType = CardContext;

9
src/components/views/messages/MKeyVerificationRequest.tsx
View file

@ -51,10 +51,11 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
private openRequest = () => {
const { verificationRequest } = this.props.mxEvent;
const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId);
RightPanelStore.instance.setCard({
phase: RightPanelPhases.EncryptionPanel,
state: { verificationRequest, member },
});
RightPanelStore.instance.setCards([
{ phase: RightPanelPhases.RoomSummary },
{ phase: RightPanelPhases.RoomMemberInfo, state: { member } },
{ phase: RightPanelPhases.EncryptionPanel, state: { verificationRequest, member } },
]);
};
private onRequestChanged = () => {

32
src/components/views/messages/MessageActionBar.tsx
View file

@ -39,8 +39,9 @@ import DownloadActionButton from "./DownloadActionButton";
import SettingsStore from '../../../settings/SettingsStore';
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
import ReplyChain from '../elements/ReplyChain';
import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads';
import { showThread } from '../../../dispatcher/dispatch-actions/threads';
import ReactionPicker from "../emojipicker/ReactionPicker";
import { CardContext } from '../right_panel/BaseCard';
interface IOptionsButtonProps {
mxEvent: MatrixEvent;
@ -219,8 +220,8 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
});
};
private onThreadClick = (): void => {
dispatchShowThreadEvent(this.props.mxEvent);
private onThreadClick = (isCard: boolean): void => {
showThread({ rootEvent: this.props.mxEvent, push: isCard });
dis.dispatch({
action: Action.FocusSendMessageComposer,
context: TimelineRenderingType.Thread,
@ -303,6 +304,17 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
key="cancel"
/>;
const threadTooltipButton = <CardContext.Consumer>
{ context =>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
title={_t("Reply in thread")}
onClick={this.onThreadClick.bind(null, context.isCard)}
key="thread"
/>
}
</CardContext.Consumer>;
// We show a different toolbar for failed events, so detect that first.
const mxEvent = this.props.mxEvent;
const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
@ -335,12 +347,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
key="reply"
/>
{ (this.showReplyInThreadAction) && (
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
title={_t("Reply in thread")}
onClick={this.onThreadClick}
key="thread"
/>
threadTooltipButton
) }
</>);
}
@ -368,12 +375,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
this.props.mxEvent.getThread() &&
!isContentActionable(this.props.mxEvent)
) {
toolbarOpts.unshift(<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
title={_t("Reply in thread")}
onClick={this.onThreadClick}
key="thread"
/>);
toolbarOpts.unshift(threadTooltipButton);
}
if (allowCancel) {

21
src/components/views/right_panel/BaseCard.tsx
View file

@ -20,16 +20,15 @@ import classNames from 'classnames';
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
import { backLabelForPhase } from '../../../stores/right-panel/RightPanelStorePhases';
export const CardContext = React.createContext({ isCard: false });
interface IProps {
header?: ReactNode;
footer?: ReactNode;
className?: string;
withoutScrollContainer?: boolean;
previousPhase?: RightPanelPhases;
previousPhaseLabel?: string;
closeLabel?: string;
onClose?(): void;
cardState?;
@ -54,20 +53,16 @@ const BaseCard: React.FC<IProps> = ({
header,
footer,
withoutScrollContainer,
previousPhase,
previousPhaseLabel,
children,
cardState,
}) => {
let backButton;
if (previousPhase) {
const cardHistory = RightPanelStore.instance.roomPhaseHistory;
if (cardHistory.length > 1) {
const prevCard = cardHistory[cardHistory.length - 2];
const onBackClick = () => {
// TODO RightPanelStore (will be addressed in a follow up PR): this should ideally be:
// RightPanelStore.instance.popRightPanel();
RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState });
RightPanelStore.instance.popCard();
};
const label = previousPhaseLabel ?? _t("Back");
const label = backLabelForPhase(prevCard.phase) ?? _t("Back");
backButton = <AccessibleButton className="mx_BaseCard_back" onClick={onBackClick} title={label} />;
}
@ -87,6 +82,7 @@ const BaseCard: React.FC<IProps> = ({
}
return (
<CardContext.Provider value={{ isCard: true }}>
<div className={classNames("mx_BaseCard", className)}>
<div className="mx_BaseCard_header">
{ backButton }
@ -96,6 +92,7 @@ const BaseCard: React.FC<IProps> = ({
{ children }
{ footer && <div className="mx_BaseCard_footer">{ footer }</div> }
</div>
</CardContext.Provider>
);
};

5
src/components/views/right_panel/EncryptionPanel.tsx
View file

@ -116,10 +116,13 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
setRequest(verificationRequest_);
setPhase(verificationRequest_.phase);
// Notify the RightPanelStore about this
RightPanelStore.instance.setCard({
if (RightPanelStore.instance.currentCard.phase != RightPanelPhases.EncryptionPanel) {
RightPanelStore.instance.pushCard({
phase: RightPanelPhases.EncryptionPanel,
state: { member, verificationRequest: verificationRequest_ },
});
}
if (!RightPanelStore.instance.isOpenForRoom) RightPanelStore.instance.togglePanel();
}, [member]);
const requested =

7
src/components/views/right_panel/GroupHeaderButtons.tsx
View file

@ -28,6 +28,7 @@ import { Action } from "../../../dispatcher/actions";
import { ActionPayload } from "../../../dispatcher/payloads";
import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
const GROUP_PHASES = [
RightPanelPhases.GroupMemberInfo,
@ -49,7 +50,11 @@ export default class GroupHeaderButtons extends HeaderButtons {
protected onAction(payload: ActionPayload) {
if (payload.action === Action.ViewUser) {
if ((payload as ViewUserPayload).member) {
this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member });
RightPanelStore.instance.setCards([
{ phase: RightPanelPhases.GroupRoomInfo },
{ phase: RightPanelPhases.GroupMemberList },
{ phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } },
]);
} else {
this.setPhase(RightPanelPhases.GroupMemberList);
}

6
src/components/views/right_panel/HeaderButtons.tsx
View file

@ -71,7 +71,13 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
protected abstract onAction(payload);
public setPhase(phase: RightPanelPhases, cardState?: Partial<IRightPanelCardState>) {
const rps = RightPanelStore.instance;
if (rps.currentCard.phase == phase && !cardState && rps.isOpenForRoom) {
rps.togglePanel();
} else {
RightPanelStore.instance.setCard({ phase, state: cardState });
if (!rps.isOpenForRoom) rps.togglePanel();
}
}
public isPhase(phases: string | string[]) {

16
src/components/views/right_panel/RoomHeaderButtons.tsx
View file

@ -32,7 +32,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { useSettingValue } from "../../../hooks/useSettings";
import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard';
import { dispatchShowThreadsPanelEvent } from "../../../dispatcher/dispatch-actions/threads";
import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads";
import SettingsStore from "../../../settings/SettingsStore";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
@ -154,7 +154,17 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
protected onAction(payload: ActionPayload) {
if (payload.action === Action.ViewUser) {
if (payload.member) {
this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member });
if (payload.push) {
RightPanelStore.instance.pushCard(
{ phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } },
);
} else {
RightPanelStore.instance.setCards([
{ phase: RightPanelPhases.RoomSummary },
{ phase: RightPanelPhases.RoomMemberList },
{ phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } },
]);
}
} else {
this.setPhase(RightPanelPhases.RoomMemberList);
}
@ -199,7 +209,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
if (RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) {
RightPanelStore.instance.togglePanel();
} else {
dispatchShowThreadsPanelEvent();
showThreadPanel();
}
};

9
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -102,8 +102,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
}, [room.roomId]);
const onOpenWidgetClick = () => {
// TODO RightPanelStore (will be addressed in a follow up PR): should push the widget
RightPanelStore.instance.setCard({
RightPanelStore.instance.pushCard({
phase: RightPanelPhases.Widget,
state: { widgetId: app.id },
});
@ -234,13 +233,11 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
};
export const onRoomMembersClick = (allowClose = true) => {
// TODO RightPanelStore (will be addressed in a follow up PR): should push the phase
RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList }, allowClose);
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, allowClose);
};
export const onRoomFilesClick = (allowClose = true) => {
// TODO RightPanelStore (will be addressed in a follow up PR): should push the phase
RightPanelStore.instance.setCard({ phase: RightPanelPhases.FilePanel }, allowClose);
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, allowClose);
};
const onRoomSettingsClick = () => {

12
src/components/views/right_panel/UserInfo.tsx
View file

@ -1651,21 +1651,15 @@ const UserInfo: React.FC<IProps> = ({
const classes = ["mx_UserInfo"];
let cardState: IRightPanelCardState;
let previousPhase: RightPanelPhases;
// We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time
if (room && phase === RightPanelPhases.EncryptionPanel) {
previousPhase = RightPanelPhases.RoomMemberInfo;
cardState = { member };
} else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) {
previousPhase = RightPanelPhases.SpaceMemberList;
cardState = { spaceId: room.roomId };
} else if (room) {
previousPhase = RightPanelPhases.RoomMemberList;
}
const onEncryptionPanelClose = () => {
// TODO RightPanelStore (will be addressed in a follow up PR): here we want to pop the panel
RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState });
RightPanelStore.instance.popCard();
};
let content;
@ -1679,7 +1673,8 @@ const UserInfo: React.FC<IProps> = ({
member={member as User}
groupId={groupId as string}
devices={devices}
isRoomEncrypted={isRoomEncrypted} />
isRoomEncrypted={isRoomEncrypted}
/>
);
break;
case RightPanelPhases.EncryptionPanel:
@ -1720,7 +1715,6 @@ const UserInfo: React.FC<IProps> = ({
header={header}
onClose={onClose}
closeLabel={closeLabel}
previousPhase={previousPhase}
cardState={cardState}
>
{ content }

6
src/components/views/right_panel/WidgetCard.tsx
View file

@ -23,7 +23,6 @@ import WidgetUtils from "../../../utils/WidgetUtils";
import AppTile from "../elements/AppTile";
import { _t } from "../../../languageHandler";
import { useWidgets } from "./RoomSummaryCard";
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
import WidgetContextMenu from "../context_menus/WidgetContextMenu";
import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
@ -48,9 +47,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
useEffect(() => {
if (!app || isPinned) {
// stop showing this card
//TODO RightPanelStore (will be addressed in a follow up PR): here we want to just pop the widget card.
RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary });
RightPanelStore.instance.popCard();
}
}, [app, isPinned]);
@ -88,7 +85,6 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
header={header}
className="mx_WidgetCard"
onClose={onClose}
previousPhase={RightPanelPhases.RoomSummary}
withoutScrollContainer
>
<AppTile

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

@ -61,7 +61,7 @@ import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
import SettingsStore from "../../../settings/SettingsStore";
import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion";
import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads';
import { showThread } from '../../../dispatcher/dispatch-actions/threads';
import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewStore';
import { TimelineRenderingType } from "../../../contexts/RoomContext";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
@ -72,6 +72,7 @@ import { ThreadNotificationState } from '../../../stores/notifications/ThreadNot
import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNotificationStateStore';
import { NotificationStateEvents } from '../../../stores/notifications/NotificationState';
import { NotificationColor } from '../../../stores/notifications/NotificationColor';
import { CardContext } from '../right_panel/BaseCard';
const eventTileTypes = {
[EventType.RoomMessage]: 'messages.MessageEvent',
@ -670,12 +671,12 @@ export default class EventTile extends React.Component<IProps, IState> {
}
return (
<CardContext.Consumer>
{ context =>
<div
className="mx_ThreadInfo"
onClick={() => {
dispatchShowThreadEvent(
this.props.mxEvent,
);
showThread({ rootEvent: this.props.mxEvent, push: context.isCard });
}}
>
<span className="mx_ThreadInfo_threads-amount">
@ -685,6 +686,8 @@ export default class EventTile extends React.Component<IProps, IState> {
</span>
{ this.renderThreadLastMessagePreview() }
</div>
}
</CardContext.Consumer>
);
}
@ -1411,7 +1414,7 @@ export default class EventTile extends React.Component<IProps, IState> {
"data-notification": this.state.threadNotification,
"onMouseEnter": () => this.setState({ hover: true }),
"onMouseLeave": () => this.setState({ hover: false }),
"onClick": () => dispatchShowThreadEvent(this.props.mxEvent),
"onClick": () => showThread({ rootEvent: this.props.mxEvent, push: true }),
}, <>
{ sender }
{ avatar }
@ -1430,7 +1433,7 @@ export default class EventTile extends React.Component<IProps, IState> {
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
title={_t("Reply in thread")}
onClick={() => dispatchShowThreadEvent(this.props.mxEvent)}
onClick={() => showThread({ rootEvent: this.props.mxEvent, push: true })}
key="thread"
/>
<RovingThreadListContextMenu

6
src/components/views/rooms/MemberList.tsx
View file

@ -33,7 +33,6 @@ import { isValid3pidInvite } from "../../../RoomInvite";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
import BaseCard from "../right_panel/BaseCard";
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
import RoomAvatar from "../avatars/RoomAvatar";
import RoomName from "../elements/RoomName";
import { replaceableComponent } from "../../../utils/replaceableComponent";
@ -513,7 +512,6 @@ export default class MemberList extends React.Component<IProps, IState> {
return <BaseCard
className="mx_MemberList"
onClose={this.props.onClose}
previousPhase={RightPanelPhases.RoomSummary}
>
<Spinner />
</BaseCard>;
@ -567,11 +565,8 @@ export default class MemberList extends React.Component<IProps, IState> {
/>
);
let previousPhase = RightPanelPhases.RoomSummary;
// We have no previousPhase for when viewing a MemberList from a Space
let scopeHeader;
if (SpaceStore.spacesEnabled && room?.isSpaceRoom()) {
previousPhase = undefined;
scopeHeader = <div className="mx_RightPanel_scopeHeader">
<RoomAvatar room={room} height={32} width={32} />
<RoomName room={room} />
@ -586,7 +581,6 @@ export default class MemberList extends React.Component<IProps, IState> {
</React.Fragment>}
footer={footer}
onClose={this.props.onClose}
previousPhase={previousPhase}
>
<div className="mx_MemberList_wrapper">
<TruncatedList

1
src/components/views/rooms/MemberTile.tsx
View file

@ -199,6 +199,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
dis.dispatch({
action: Action.ViewUser,
member: this.props.member,
push: true,
});
};

12
src/components/views/toasts/VerificationRequestToast.tsx
View file

@ -115,11 +115,13 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
room_id: request.channel.roomId,
should_peek: false,
});
RightPanelStore.instance.setCard(
{
phase: RightPanelPhases.EncryptionPanel,
state: { verificationRequest: request, member: cli.getUser(request.otherUserId) },
},
const member = cli.getUser(request.otherUserId);
RightPanelStore.instance.setCards(
[
{ phase: RightPanelPhases.RoomSummary },
{ phase: RightPanelPhases.RoomMemberInfo, state: { member } },
{ phase: RightPanelPhases.EncryptionPanel, state: { verificationRequest: request, member } },
],
undefined,
request.channel.roomId,
);

33
src/dispatcher/dispatch-actions/threads.ts
View file

@ -18,23 +18,32 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import RightPanelStore from "../../stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
export const dispatchShowThreadEvent = (
rootEvent: MatrixEvent,
initialEvent?: MatrixEvent,
highlighted?: boolean,
) => {
// TODO RightPanelStore (will be addressed in a follow up PR): this should really be a push!
RightPanelStore.instance.setCard({
export const showThread = (props: {
rootEvent: MatrixEvent;
initialEvent?: MatrixEvent;
highlighted?: boolean;
push?: boolean;
}) => {
const push = props.push ?? false;
const threadViewCard = {
phase: RightPanelPhases.ThreadView,
state: {
threadHeadEvent: rootEvent,
initialEvent,
isInitialEventHighlighted: highlighted,
threadHeadEvent: props.rootEvent,
initialEvent: props.initialEvent,
isInitialEventHighlighted: props.highlighted,
},
});
};
if (push) {
RightPanelStore.instance.pushCard(threadViewCard);
} else {
RightPanelStore.instance.setCards([
{ phase: RightPanelPhases.ThreadPanel },
threadViewCard,
]);
}
};
export const dispatchShowThreadsPanelEvent = () => {
export const showThreadPanel = () => {
RightPanelStore.instance.setCard({ phase: RightPanelPhases.ThreadPanel });
};

7
src/i18n/strings/en_EN.json
View file

@ -843,6 +843,11 @@
"%(senderName)s: %(message)s": "%(senderName)s: %(message)s",
"%(senderName)s: %(reaction)s": "%(senderName)s: %(reaction)s",
"%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s",
"Threads": "Threads",
"Back to chat": "Back to chat",
"Room information": "Room information",
"Room members": "Room members",
"Back to thread": "Back to thread",
"Change notification settings": "Change notification settings",
"Messaging": "Messaging",
"Profile": "Profile",
@ -1507,7 +1512,6 @@
"this room": "this room",
"View older messages in %(roomName)s.": "View older messages in %(roomName)s.",
"Space information": "Space information",
"Room information": "Room information",
"Internal room ID:": "Internal room ID:",
"Room version": "Room version",
"Room version:": "Room version:",
@ -1920,7 +1924,6 @@
"If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.",
"Pinned messages": "Pinned messages",
"Chat": "Chat",
"Threads": "Threads",
"Room Info": "Room Info",
"You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets",
"Maximise widget": "Maximise widget",

64
src/stores/right-panel/RightPanelStore.ts
View file

@ -15,7 +15,6 @@ limitations under the License.
*/
import { logger } from "matrix-js-sdk/src/logger";
import { EventSubscription } from 'fbemitter';
import defaultDispatcher from '../../dispatcher/dispatcher';
import { pendingVerificationRequestForUser } from '../../verification';
@ -31,7 +30,6 @@ import {
convertToStatePanel,
convertToStorePanel,
IRightPanelForRoom,
convertCardToStore,
} from './RightPanelStoreIPanelState';
import { MatrixClientPeg } from "../../MatrixClientPeg";
// import RoomViewStore from '../RoomViewStore';
@ -63,7 +61,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
private viewedRoomId: string;
private isViewingRoom?: boolean;
private dispatcherRefRightPanelStore: string;
private roomStoreToken: EventSubscription;
private isReady = false;
private global?: IRightPanelForRoom = null;
private byRoom: {
@ -76,6 +74,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
}
protected async onReady(): Promise<any> {
this.isReady = true;
// TODO RightPanelStore (will be addressed when dropping groups): This should be used instead of the onDispatch callback when groups are removed.
// RoomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequestUpdate);
@ -90,9 +89,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
}
protected async onNotReady(): Promise<any> {
if (this.roomStoreToken) {
this.roomStoreToken.remove();
}
this.isReady = false;
MatrixClientPeg.get().off("crypto.verification.request", this.onVerificationRequestUpdate);
// TODO RightPanelStore (will be addressed when dropping groups): User this instead of the dispatcher.
// RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
@ -140,8 +137,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
// Setters
public setCard(card: IRightPanelCard, allowClose = true, roomId?: string) {
const rId = roomId ?? this.viewedRoomId;
// this was previously a very multifunctional command:
// Toggle panel: if the same phase is send but without a state
// This function behaves as following:
// Update state: if the same phase is send but with a state
// Set right panel and erase history: if a "different to the current" phase is send (with or without a state)
const redirect = this.getVerificationRedirect(card);
@ -149,32 +145,29 @@ export default class RightPanelStore extends ReadyWatchingStore {
const cardState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state);
// Checks for wrong SetRightPanelPhase requests
if (!this.isPhaseActionIsValid(targetPhase)) return;
if (!this.isPhaseActionValid(targetPhase)) return;
if (targetPhase === this.currentCard?.phase &&
allowClose &&
(this.compareCards({ phase: targetPhase, state: cardState }, this.currentCard) || !cardState)
) {
// Toggle panel: a toggle command needs to fullfil the following:
// - the same phase
// - the panel can be closed
// - does not contain any state information (state)
if (targetPhase != RightPanelPhases.EncryptionPanel) {
this.togglePanel(rId);
}
return;
} else if ((targetPhase === this.currentCardForRoom(rId)?.phase && !!cardState)) {
if ((targetPhase === this.currentCardForRoom(rId)?.phase && !!cardState)) {
// Update state: set right panel with a new state but keep the phase (dont know it this is ever needed...)
const hist = this.byRoom[rId]?.history ?? [];
hist[hist.length - 1].state = cardState;
this.emitAndUpdateSettings();
return;
} else if (targetPhase !== this.currentCard?.phase) {
}
if (targetPhase !== this.currentCard?.phase) {
// Set right panel and erase history.
this.setRightPanelCache({ phase: targetPhase, state: cardState ?? {} }, rId);
}
}
public setCards(cards: IRightPanelCard[], allowClose = true, roomId: string = null) {
const rId = roomId ?? this.viewedRoomId;
const history = cards.map(c => ({ phase: c.phase, state: c.state ?? {} }));
this.byRoom[rId] = { history, isOpen: true };
this.emitAndUpdateSettings();
}
public pushCard(
card: IRightPanelCard,
allowClose = true,
@ -186,7 +179,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
const pState = redirect?.state ?? (Object.keys(card.state ?? {}).length === 0 ? null : card.state);
// Checks for wrong SetRightPanelPhase requests
if (!this.isPhaseActionIsValid(targetPhase)) return;
if (!this.isPhaseActionValid(targetPhase)) return;
let roomCache = this.byRoom[rId];
if (!!roomCache) {
@ -236,10 +229,6 @@ export default class RightPanelStore extends ReadyWatchingStore {
}
}
private compareCards(a: IRightPanelCard, b: IRightPanelCard): boolean {
return JSON.stringify(convertCardToStore(a)) == JSON.stringify(convertCardToStore(b));
}
private emitAndUpdateSettings() {
const storePanelGlobal = convertToStorePanel(this.global);
SettingsStore.setValue("RightPanel.phasesGlobal", null, SettingLevel.DEVICE, storePanelGlobal);
@ -257,10 +246,8 @@ export default class RightPanelStore extends ReadyWatchingStore {
}
private setRightPanelCache(card: IRightPanelCard, roomId?: string) {
this.byRoom[roomId ?? this.viewedRoomId] = {
history: [{ phase: card.phase, state: card.state ?? {} }],
isOpen: true,
};
const history = [{ phase: card.phase, state: card.state ?? {} }];
this.byRoom[roomId ?? this.viewedRoomId] = { history, isOpen: true };
this.emitAndUpdateSettings();
}
@ -282,7 +269,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
return null;
}
private isPhaseActionIsValid(targetPhase) {
private isPhaseActionValid(targetPhase) {
if (!RightPanelPhases[targetPhase]) {
logger.warn(`Tried to switch right panel to unknown phase: ${targetPhase}`);
return false;
@ -305,6 +292,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
private onVerificationRequestUpdate = () => {
const { member } = this.currentCard.state;
if (!member) return;
const pendingRequest = pendingVerificationRequestForUser(member);
if (pendingRequest) {
this.currentCard.state.verificationRequest = pendingRequest;
@ -312,13 +300,13 @@ export default class RightPanelStore extends ReadyWatchingStore {
}
};
onRoomViewStoreUpdate() {
onRoomViewStoreUpdate = () => {
// TODO: use this function instead of the onDispatch (the whole onDispatch can get removed!) as soon groups are removed
// this.viewedRoomId = RoomViewStore.getRoomId();
// this.isViewingRoom = true; // Is viewing room will of course be removed when removing groups
// // load values from byRoomCache with the viewedRoomId.
// this.loadCacheFromSettings();
}
};
onDispatch(payload: ActionPayload) {
switch (payload.action) {
@ -347,9 +335,9 @@ export default class RightPanelStore extends ReadyWatchingStore {
_this.viewedRoomId = payload.room_id;
_this.isViewingRoom = payload.action == Action.ViewRoom;
// load values from byRoomCache with the viewedRoomId.
if (!!_this.roomStoreToken) {
// skip loading here since we need the client to be ready to get the events form the ids of the settings
// this loading will be done in the onReady function
if (_this.isReady) {
// we need the client to be ready to get the events form the ids of the settings
// the loading will be done in the onReady function (to catch up with the changes done here before it was ready)
// all the logic in this case is not necessary anymore as soon as groups are dropped and we use: onRoomViewStoreUpdate
_this.loadCacheFromSettings();
_this.emitAndUpdateSettings();

73
src/stores/right-panel/RightPanelStoreIPanelState.ts
View file

@ -89,48 +89,43 @@ export function convertToStatePanel(storeRoom: IRightPanelForRoomStored, room: R
}
export function convertCardToStore(panelState: IRightPanelCard): IRightPanelCardStored {
const panelStateThisRoomStored = { ...panelState.state } as any;
if (!!panelState?.state?.threadHeadEvent?.getId()) {
panelStateThisRoomStored.threadHeadEventId = panelState.state.threadHeadEvent.getId();
}
if (!!panelState?.state?.memberInfoEvent?.getId()) {
panelStateThisRoomStored.memberInfoEventId = panelState.state.memberInfoEvent.getId();
}
if (!!panelState?.state?.initialEvent?.getId()) {
panelStateThisRoomStored.initialEventId = panelState.state.initialEvent.getId();
}
if (!!panelState?.state?.member?.userId) {
panelStateThisRoomStored.memberId = panelState.state.member.userId;
}
delete panelStateThisRoomStored.threadHeadEvent;
delete panelStateThisRoomStored.initialEvent;
delete panelStateThisRoomStored.memberInfoEvent;
delete panelStateThisRoomStored.verificationRequest;
delete panelStateThisRoomStored.verificationRequestPromise;
delete panelStateThisRoomStored.member;
const state = panelState.state ?? {};
const stateStored: IRightPanelCardStateStored = {
groupId: state.groupId,
groupRoomId: state.groupRoomId,
widgetId: state.widgetId,
spaceId: state.spaceId,
isInitialEventHighlighted: state.isInitialEventHighlighted,
threadHeadEventId: !!state?.threadHeadEvent?.getId() ?
panelState.state.threadHeadEvent.getId() : undefined,
memberInfoEventId: !!state?.memberInfoEvent?.getId() ?
panelState.state.memberInfoEvent.getId() : undefined,
initialEventId: !!state?.initialEvent?.getId() ?
panelState.state.initialEvent.getId() : undefined,
memberId: !!state?.member?.userId ?
panelState.state.member.userId : undefined,
};
const storedCard = { state: panelStateThisRoomStored as IRightPanelCardStored, phase: panelState.phase };
return storedCard as IRightPanelCardStored;
return { state: stateStored, phase: panelState.phase };
}
function convertStoreToCard(panelStateStore: IRightPanelCardStored, room: Room): IRightPanelCard {
const panelStateThisRoom = { ...panelStateStore?.state } as any;
if (!!panelStateThisRoom.threadHeadEventId) {
panelStateThisRoom.threadHeadEvent = room.findEventById(panelStateThisRoom.threadHeadEventId);
}
if (!!panelStateThisRoom.memberInfoEventId) {
panelStateThisRoom.memberInfoEvent = room.findEventById(panelStateThisRoom.memberInfoEventId);
}
if (!!panelStateThisRoom.initialEventId) {
panelStateThisRoom.initialEvent = room.findEventById(panelStateThisRoom.initialEventId);
}
if (!!panelStateThisRoom.memberId) {
panelStateThisRoom.member = room.getMember(panelStateThisRoom.memberId);
}
delete panelStateThisRoom.threadHeadEventId;
delete panelStateThisRoom.initialEventId;
delete panelStateThisRoom.memberInfoEventId;
delete panelStateThisRoom.memberId;
const stateStored = panelStateStore.state ?? {};
const state: IRightPanelCardState = {
groupId: stateStored.groupId,
groupRoomId: stateStored.groupRoomId,
widgetId: stateStored.widgetId,
spaceId: stateStored.spaceId,
isInitialEventHighlighted: stateStored.isInitialEventHighlighted,
threadHeadEvent: !!stateStored?.threadHeadEventId ?
room.findEventById(stateStored.threadHeadEventId) : undefined,
memberInfoEvent: !!stateStored?.memberInfoEventId ?
room.findEventById(stateStored.memberInfoEventId) : undefined,
initialEvent: !!stateStored?.initialEventId ?
room.findEventById(stateStored.initialEventId) : undefined,
member: !!stateStored?.memberId ?
room.getMember(stateStored.memberId) : undefined,
};
return { state: panelStateThisRoom as IRightPanelCardState, phase: panelStateStore.phase } as IRightPanelCard;
return { state: state, phase: panelStateStore.phase };
}

13
src/stores/right-panel/RightPanelStorePhases.ts
View file

@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { _t } from "../../languageHandler";
// These are in their own file because of circular imports being a problem.
export enum RightPanelPhases {
// Room stuff
@ -44,6 +46,17 @@ export enum RightPanelPhases {
ThreadPanel = "ThreadPanel",
}
export function backLabelForPhase(phase: RightPanelPhases) {
switch (phase) {
case RightPanelPhases.ThreadPanel: return _t("Threads");
case RightPanelPhases.Timeline: return _t("Back to chat");
case RightPanelPhases.RoomSummary: return _t("Room information");
case RightPanelPhases.RoomMemberList: return _t("Room members");
case RightPanelPhases.ThreadView: return _t("Back to thread");
}
return null;
}
// These are the phases that are safe to persist (the ones that don't require additional
// arguments).
export const RIGHT_PANEL_PHASES_NO_ARGS = [

30
src/verification.ts
View file

@ -28,6 +28,7 @@ import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDia
import { GroupMember, IDevice } from "./components/views/right_panel/UserInfo";
import ManualDeviceKeyVerificationDialog from "./components/views/dialogs/ManualDeviceKeyVerificationDialog";
import RightPanelStore from "./stores/right-panel/RightPanelStore";
import { IRightPanelCardState } from "./stores/right-panel/RightPanelStoreIPanelState";
async function enable4SIfNeeded() {
const cli = MatrixClientPeg.get();
@ -66,10 +67,7 @@ export async function verifyDevice(user: User, device: IDevice) {
device.deviceId,
VerificationMethods.SAS,
);
RightPanelStore.instance.setCard({
phase: RightPanelPhases.EncryptionPanel,
state: { member: user, verificationRequestPromise },
});
setRightPanel({ member: user, verificationRequestPromise });
} else if (action === "legacy") {
Modal.createTrackedDialog("Legacy verify session", "legacy verify session",
ManualDeviceKeyVerificationDialog,
@ -96,10 +94,7 @@ export async function legacyVerifyUser(user: User) {
}
}
const verificationRequestPromise = cli.requestVerification(user.userId);
RightPanelStore.instance.setCard({
phase: RightPanelPhases.EncryptionPanel,
state: { member: user, verificationRequestPromise },
});
setRightPanel({ member: user, verificationRequestPromise });
}
export async function verifyUser(user: User) {
@ -112,10 +107,21 @@ export async function verifyUser(user: User) {
return;
}
const existingRequest = pendingVerificationRequestForUser(user);
RightPanelStore.instance.setCard({
phase: RightPanelPhases.EncryptionPanel,
state: { member: user, verificationRequest: existingRequest },
});
setRightPanel({ member: user, verificationRequest: existingRequest });
}
function setRightPanel(state: IRightPanelCardState) {
if (RightPanelStore.instance.roomPhaseHistory.some((card) => (card.phase == RightPanelPhases.RoomSummary))) {
RightPanelStore.instance.pushCard(
{ phase: RightPanelPhases.EncryptionPanel, state },
);
} else {
RightPanelStore.instance.setCards([
{ phase: RightPanelPhases.RoomSummary },
{ phase: RightPanelPhases.RoomMemberInfo, state: { member: state.member } },
{ phase: RightPanelPhases.EncryptionPanel, state },
]);
}
}
export function pendingVerificationRequestForUser(user: User | RoomMember | GroupMember ) {