Merge pull request #11495 from matrix-org/germain-gg/fix-right-panel-member
Move ViewUser action callback to RoomViewpull/28788/head^2
commit
dce42d32e7
|
@ -129,6 +129,7 @@ import { WaitingForThirdPartyRoomView } from "./WaitingForThirdPartyRoomView";
|
|||
import { isNotUndefined } from "../../Typeguards";
|
||||
import { CancelAskToJoinPayload } from "../../dispatcher/payloads/CancelAskToJoinPayload";
|
||||
import { SubmitAskToJoinPayload } from "../../dispatcher/payloads/SubmitAskToJoinPayload";
|
||||
import RightPanelStore from "../../stores/right-panel/RightPanelStore";
|
||||
|
||||
const DEBUG = false;
|
||||
const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
|
||||
|
@ -1248,6 +1249,33 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
|||
this.messagePanel?.jumpToLiveTimeline();
|
||||
}
|
||||
break;
|
||||
case Action.ViewUser:
|
||||
if (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 {
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
|
||||
}
|
||||
break;
|
||||
case "view_3pid_invite":
|
||||
if (payload.event) {
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.Room3pidMemberInfo, {
|
||||
memberInfoEvent: payload.event,
|
||||
});
|
||||
} else {
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -36,7 +36,6 @@ import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
|
|||
import { UIComponent } from "../../settings/UIFeature";
|
||||
import { UPDATE_EVENT } from "../../stores/AsyncStore";
|
||||
import RightPanelStore from "../../stores/right-panel/RightPanelStore";
|
||||
import { IRightPanelCard } from "../../stores/right-panel/RightPanelStoreIPanelState";
|
||||
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
|
||||
import ResizeNotifier from "../../utils/ResizeNotifier";
|
||||
import {
|
||||
|
@ -669,33 +668,6 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
|
|||
this.setState({ phase: Phase.Landing });
|
||||
return;
|
||||
}
|
||||
|
||||
if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return;
|
||||
|
||||
if (payload.action === Action.ViewUser && payload.member) {
|
||||
const spaceMemberInfoCard: IRightPanelCard = {
|
||||
phase: RightPanelPhases.SpaceMemberInfo,
|
||||
state: { spaceId: this.props.space.roomId, member: payload.member },
|
||||
};
|
||||
if (payload.push) {
|
||||
RightPanelStore.instance.pushCard(spaceMemberInfoCard);
|
||||
} else {
|
||||
RightPanelStore.instance.setCards([
|
||||
{ phase: RightPanelPhases.SpaceMemberList, state: { spaceId: this.props.space.roomId } },
|
||||
spaceMemberInfoCard,
|
||||
]);
|
||||
}
|
||||
} else if (payload.action === "view_3pid_invite" && payload.event) {
|
||||
RightPanelStore.instance.setCard({
|
||||
phase: RightPanelPhases.Space3pidMemberInfo,
|
||||
state: { spaceId: this.props.space.roomId, memberInfoEvent: payload.event },
|
||||
});
|
||||
} else {
|
||||
RightPanelStore.instance.setCard({
|
||||
phase: RightPanelPhases.SpaceMemberList,
|
||||
state: { spaceId: this.props.space.roomId },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private goToFirstRoom = async (): Promise<void> => {
|
||||
|
|
|
@ -23,10 +23,8 @@ import React from "react";
|
|||
import dis from "../../../dispatcher/dispatcher";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import { IRightPanelCardState } from "../../../stores/right-panel/RightPanelStoreIPanelState";
|
||||
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
|
||||
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
|
||||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||||
|
||||
export enum HeaderKind {
|
||||
Room = "room",
|
||||
|
@ -59,7 +57,6 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
|
|||
|
||||
public componentDidMount(): void {
|
||||
RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
|
||||
this.dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses
|
||||
}
|
||||
|
||||
public componentWillUnmount(): void {
|
||||
|
@ -68,18 +65,6 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
|
|||
if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
|
||||
}
|
||||
|
||||
protected abstract onAction(payload: ActionPayload): void;
|
||||
|
||||
public setPhase(phase: RightPanelPhases, cardState?: Partial<IRightPanelCardState>): void {
|
||||
const rps = RightPanelStore.instance;
|
||||
if (rps.currentCard.phase == phase && !cardState && rps.isOpen) {
|
||||
rps.togglePanel(null);
|
||||
} else {
|
||||
RightPanelStore.instance.setCard({ phase, state: cardState });
|
||||
if (!rps.isOpen) rps.togglePanel(null);
|
||||
}
|
||||
}
|
||||
|
||||
public isPhase(phases: string | string[]): boolean {
|
||||
if (!RightPanelStore.instance.isOpen) return false;
|
||||
if (Array.isArray(phases)) {
|
||||
|
|
|
@ -26,7 +26,6 @@ import { _t } from "../../../languageHandler";
|
|||
import HeaderButton from "./HeaderButton";
|
||||
import HeaderButtons, { HeaderKind } from "./HeaderButtons";
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
import { useReadPinnedEvents, usePinnedEvents } from "./PinnedMessagesCard";
|
||||
|
@ -203,59 +202,34 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
|
|||
});
|
||||
};
|
||||
|
||||
protected onAction(payload: ActionPayload): void {
|
||||
if (payload.action === Action.ViewUser) {
|
||||
if (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);
|
||||
}
|
||||
} else if (payload.action === "view_3pid_invite") {
|
||||
if (payload.event) {
|
||||
this.setPhase(RightPanelPhases.Room3pidMemberInfo, { memberInfoEvent: payload.event });
|
||||
} else {
|
||||
this.setPhase(RightPanelPhases.RoomMemberList);
|
||||
}
|
||||
}
|
||||
}
|
||||
protected onAction(payload: ActionPayload): void {}
|
||||
|
||||
private onRoomSummaryClicked = (): void => {
|
||||
// use roomPanelPhase rather than this.state.phase as it remembers the latest one if we close
|
||||
const currentPhase = RightPanelStore.instance.currentCard.phase;
|
||||
if (currentPhase && ROOM_INFO_PHASES.includes(currentPhase)) {
|
||||
if (this.state.phase === currentPhase) {
|
||||
this.setPhase(currentPhase);
|
||||
RightPanelStore.instance.showOrHidePanel(currentPhase);
|
||||
} else {
|
||||
this.setPhase(currentPhase, RightPanelStore.instance.currentCard.state);
|
||||
RightPanelStore.instance.showOrHidePanel(currentPhase, RightPanelStore.instance.currentCard.state);
|
||||
}
|
||||
} else {
|
||||
// This toggles for us, if needed
|
||||
this.setPhase(RightPanelPhases.RoomSummary);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
|
||||
}
|
||||
};
|
||||
|
||||
private onNotificationsClicked = (): void => {
|
||||
// This toggles for us, if needed
|
||||
this.setPhase(RightPanelPhases.NotificationPanel);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel);
|
||||
};
|
||||
|
||||
private onPinnedMessagesClicked = (): void => {
|
||||
// This toggles for us, if needed
|
||||
this.setPhase(RightPanelPhases.PinnedMessages);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.PinnedMessages);
|
||||
};
|
||||
private onTimelineCardClicked = (): void => {
|
||||
this.setPhase(RightPanelPhases.Timeline);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.Timeline);
|
||||
};
|
||||
|
||||
private onThreadsPanelClicked = (ev: ButtonEvent): void => {
|
||||
|
|
|
@ -28,7 +28,6 @@ import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
|
|||
|
||||
import { useRoomName } from "../../../hooks/useRoomName";
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
import { useTopic } from "../../../hooks/room/useTopic";
|
||||
import { useAccountData } from "../../../hooks/useAccountData";
|
||||
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
|
||||
|
@ -49,6 +48,7 @@ import FacePile from "../elements/FacePile";
|
|||
import { useRoomState } from "../../../hooks/useRoomState";
|
||||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
import { formatCount } from "../../../utils/FormattingUtils";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
|
||||
/**
|
||||
* A helper to transform a notification color to the what the Compound Icon Button
|
||||
|
@ -64,16 +64,6 @@ function notificationColorToIndicator(color: NotificationColor): React.Component
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A helper to show or hide the right panel
|
||||
*/
|
||||
function showOrHidePanel(phase: RightPanelPhases): void {
|
||||
const rightPanel = RightPanelStore.instance;
|
||||
rightPanel.isOpen && rightPanel.currentCard.phase === phase
|
||||
? rightPanel.togglePanel(null)
|
||||
: rightPanel.setCard({ phase });
|
||||
}
|
||||
|
||||
export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
||||
const client = useMatrixClientContext();
|
||||
|
||||
|
@ -117,7 +107,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
gap="var(--cpd-space-3x)"
|
||||
className="mx_RoomHeader light-panel"
|
||||
onClick={() => {
|
||||
showOrHidePanel(RightPanelPhases.RoomSummary);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
|
||||
}}
|
||||
>
|
||||
<RoomAvatar room={room} size="40px" />
|
||||
|
@ -205,7 +195,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
indicator={notificationColorToIndicator(threadNotifications)}
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation();
|
||||
showOrHidePanel(RightPanelPhases.ThreadPanel);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.ThreadPanel);
|
||||
}}
|
||||
title={_t("common|threads")}
|
||||
>
|
||||
|
@ -217,7 +207,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
indicator={notificationColorToIndicator(globalNotificationState.color)}
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation();
|
||||
showOrHidePanel(RightPanelPhases.NotificationPanel);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel);
|
||||
}}
|
||||
title={_t("Notifications")}
|
||||
>
|
||||
|
@ -232,7 +222,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
weight="medium"
|
||||
aria-label={_t("%(count)s members", { count: memberCount })}
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
showOrHidePanel(RightPanelPhases.RoomMemberList);
|
||||
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
|
|
|
@ -29,6 +29,7 @@ import {
|
|||
convertToStatePanel,
|
||||
convertToStorePanel,
|
||||
IRightPanelCard,
|
||||
IRightPanelCardState,
|
||||
IRightPanelForRoom,
|
||||
} from "./RightPanelStoreIPanelState";
|
||||
import { ActionPayload } from "../../dispatcher/payloads";
|
||||
|
@ -226,6 +227,24 @@ export default class RightPanelStore extends ReadyWatchingStore {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to show a right panel phase.
|
||||
* If the UI is already showing that phase, the right panel will be hidden.
|
||||
*
|
||||
* Calling the same phase twice with a different state will update the current
|
||||
* phase and push the old state in the right panel history.
|
||||
* @param phase The right panel phase.
|
||||
* @param cardState The state within the phase.
|
||||
*/
|
||||
public showOrHidePanel(phase: RightPanelPhases, cardState?: Partial<IRightPanelCardState>): void {
|
||||
if (this.currentCard.phase == phase && !cardState && this.isOpen) {
|
||||
this.togglePanel(null);
|
||||
} else {
|
||||
this.setCard({ phase, state: cardState });
|
||||
if (!this.isOpen) this.togglePanel(null);
|
||||
}
|
||||
}
|
||||
|
||||
private loadCacheFromSettings(): void {
|
||||
if (this.viewedRoomId) {
|
||||
const room = this.mxClient?.getRoom(this.viewedRoomId);
|
||||
|
|
Loading…
Reference in New Issue