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

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
Download patch file Download diff file Expand all files Collapse all files

37
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,15 +82,17 @@ const BaseCard: React.FC<IProps> = ({
}
return (
<div className={classNames("mx_BaseCard", className)}>
<div className="mx_BaseCard_header">
{ backButton }
{ closeButton }
{ header }
<CardContext.Provider value={{ isCard: true }}>
<div className={classNames("mx_BaseCard", className)}>
<div className="mx_BaseCard_header">
{ backButton }
{ closeButton }
{ header }
</div>
{ children }
{ footer && <div className="mx_BaseCard_footer">{ footer }</div> }
</div>
{ children }
{ footer && <div className="mx_BaseCard_footer">{ footer }</div> }
</div>
</CardContext.Provider>
);
};

11
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({
phase: RightPanelPhases.EncryptionPanel,
state: { member, verificationRequest: verificationRequest_ },
});
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);
}

8
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>) {
RightPanelStore.instance.setCard({ phase, state: cardState });
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