Remove legacy room header and promote beta room header (#105)
* Remove legacy room header and promote beta room header Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tidy up Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused component Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Prune i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
e60d3bd1ee
commit
8a263ac1b0
19 changed files with 16 additions and 3769 deletions
|
|
@ -1,389 +0,0 @@
|
|||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021-2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { useContext } from "react";
|
||||
import { Room, RoomMemberEvent } from "matrix-js-sdk/src/matrix";
|
||||
import { KnownMembership } from "matrix-js-sdk/src/types";
|
||||
|
||||
import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
|
||||
import IconizedContextMenu, {
|
||||
IconizedContextMenuCheckbox,
|
||||
IconizedContextMenuOption,
|
||||
IconizedContextMenuOptionList,
|
||||
} from "./IconizedContextMenu";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
|
||||
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import { EchoChamber } from "../../../stores/local-echo/EchoChamber";
|
||||
import { RoomNotifState } from "../../../RoomNotifs";
|
||||
import Modal from "../../../Modal";
|
||||
import ExportDialog from "../dialogs/ExportDialog";
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog";
|
||||
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
import DMRoomMap from "../../../utils/DMRoomMap";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import PosthogTrackers from "../../../PosthogTrackers";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
|
||||
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import { SdkContextClass } from "../../../contexts/SDKContext";
|
||||
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
|
||||
import { UIComponent } from "../../../settings/UIFeature";
|
||||
import { DeveloperToolsOption } from "./DeveloperToolsOption";
|
||||
import { tagRoom } from "../../../utils/room/tagRoom";
|
||||
import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
|
||||
import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
|
||||
|
||||
interface IProps extends IContextMenuProps {
|
||||
room: Room;
|
||||
}
|
||||
|
||||
/**
|
||||
* Room context menu accessible via the room header.
|
||||
* @deprecated will be removed as part of `feature_new_room_decoration_ui`
|
||||
*/
|
||||
const RoomContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
|
||||
const cli = useContext(MatrixClientContext);
|
||||
const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () =>
|
||||
RoomListStore.instance.getTagsForRoom(room),
|
||||
);
|
||||
|
||||
let leaveOption: JSX.Element | undefined;
|
||||
if (roomTags.includes(DefaultTagID.Archived)) {
|
||||
const onForgetRoomClick = (ev: ButtonEvent): void => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
dis.dispatch({
|
||||
action: "forget_room",
|
||||
room_id: room.roomId,
|
||||
});
|
||||
onFinished();
|
||||
};
|
||||
|
||||
leaveOption = (
|
||||
<IconizedContextMenuOption
|
||||
iconClassName="mx_RoomTile_iconSignOut"
|
||||
label={_t("room|context_menu|forget")}
|
||||
className="mx_IconizedContextMenu_option_red"
|
||||
onClick={onForgetRoomClick}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
const onLeaveRoomClick = (ev: ButtonEvent): void => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
dis.dispatch({
|
||||
action: "leave_room",
|
||||
room_id: room.roomId,
|
||||
});
|
||||
onFinished();
|
||||
|
||||
PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuLeaveItem", ev);
|
||||
};
|
||||
|
||||
leaveOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={onLeaveRoomClick}
|
||||
label={_t("action|leave")}
|
||||
className="mx_IconizedContextMenu_option_red"
|
||||
iconClassName="mx_RoomTile_iconSignOut"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const isDm = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
|
||||
const isVideoRoom = calcIsVideoRoom(room);
|
||||
const canInvite = useEventEmitterState(cli, RoomMemberEvent.PowerLevel, () => room.canInvite(cli.getUserId()!));
|
||||
let inviteOption: JSX.Element | undefined;
|
||||
if (canInvite && !isDm && shouldShowComponent(UIComponent.InviteUsers)) {
|
||||
const onInviteClick = (ev: ButtonEvent): void => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
dis.dispatch({
|
||||
action: "view_invite",
|
||||
roomId: room.roomId,
|
||||
});
|
||||
onFinished();
|
||||
|
||||
PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuInviteItem", ev);
|
||||
};
|
||||
|
||||
inviteOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={onInviteClick}
|
||||
label={_t("action|invite")}
|
||||
iconClassName="mx_RoomTile_iconInvite"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let favouriteOption: JSX.Element | undefined;
|
||||
let lowPriorityOption: JSX.Element | undefined;
|
||||
let notificationOption: JSX.Element | undefined;
|
||||
if (room.getMyMembership() === KnownMembership.Join) {
|
||||
const isFavorite = roomTags.includes(DefaultTagID.Favourite);
|
||||
favouriteOption = (
|
||||
<IconizedContextMenuCheckbox
|
||||
onClick={(e) => {
|
||||
onTagRoom(e, DefaultTagID.Favourite);
|
||||
PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuFavouriteToggle", e);
|
||||
}}
|
||||
active={isFavorite}
|
||||
label={isFavorite ? _t("room|context_menu|unfavourite") : _t("room|context_menu|favourite")}
|
||||
iconClassName="mx_RoomTile_iconStar"
|
||||
/>
|
||||
);
|
||||
|
||||
const isLowPriority = roomTags.includes(DefaultTagID.LowPriority);
|
||||
lowPriorityOption = (
|
||||
<IconizedContextMenuCheckbox
|
||||
onClick={(e) => onTagRoom(e, DefaultTagID.LowPriority)}
|
||||
active={isLowPriority}
|
||||
label={_t("common|low_priority")}
|
||||
iconClassName="mx_RoomTile_iconArrowDown"
|
||||
/>
|
||||
);
|
||||
|
||||
const echoChamber = EchoChamber.forRoom(room);
|
||||
let notificationLabel: string | undefined;
|
||||
let iconClassName: string | undefined;
|
||||
switch (echoChamber.notificationVolume) {
|
||||
case RoomNotifState.AllMessages:
|
||||
notificationLabel = _t("notifications|default");
|
||||
iconClassName = "mx_RoomTile_iconNotificationsDefault";
|
||||
break;
|
||||
case RoomNotifState.AllMessagesLoud:
|
||||
notificationLabel = _t("notifications|all_messages");
|
||||
iconClassName = "mx_RoomTile_iconNotificationsAllMessages";
|
||||
break;
|
||||
case RoomNotifState.MentionsOnly:
|
||||
notificationLabel = _t("room|context_menu|mentions_only");
|
||||
iconClassName = "mx_RoomTile_iconNotificationsMentionsKeywords";
|
||||
break;
|
||||
case RoomNotifState.Mute:
|
||||
notificationLabel = _t("common|mute");
|
||||
iconClassName = "mx_RoomTile_iconNotificationsNone";
|
||||
break;
|
||||
}
|
||||
|
||||
notificationOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
dis.dispatch({
|
||||
action: "open_room_settings",
|
||||
room_id: room.roomId,
|
||||
initial_tab_id: RoomSettingsTab.Notifications,
|
||||
});
|
||||
onFinished();
|
||||
|
||||
PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuNotificationsItem", ev);
|
||||
}}
|
||||
label={_t("notifications|enable_prompt_toast_title")}
|
||||
iconClassName={iconClassName}
|
||||
>
|
||||
<span className="mx_IconizedContextMenu_sublabel">{notificationLabel}</span>
|
||||
</IconizedContextMenuOption>
|
||||
);
|
||||
}
|
||||
|
||||
let peopleOption: JSX.Element | undefined;
|
||||
let copyLinkOption: JSX.Element | undefined;
|
||||
if (!isDm) {
|
||||
peopleOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
ensureViewingRoom(ev);
|
||||
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, false);
|
||||
onFinished();
|
||||
PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuPeopleItem", ev);
|
||||
}}
|
||||
label={_t("common|people")}
|
||||
iconClassName="mx_RoomTile_iconPeople"
|
||||
>
|
||||
<span className="mx_IconizedContextMenu_sublabel">{room.getJoinedMemberCount()}</span>
|
||||
</IconizedContextMenuOption>
|
||||
);
|
||||
|
||||
copyLinkOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
dis.dispatch({
|
||||
action: "copy_room",
|
||||
room_id: room.roomId,
|
||||
});
|
||||
onFinished();
|
||||
}}
|
||||
label={_t("room|context_menu|copy_link")}
|
||||
iconClassName="mx_RoomTile_iconCopyLink"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let filesOption: JSX.Element | undefined;
|
||||
if (!isVideoRoom) {
|
||||
filesOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
ensureViewingRoom(ev);
|
||||
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, false);
|
||||
onFinished();
|
||||
}}
|
||||
label={_t("right_panel|files_button")}
|
||||
iconClassName="mx_RoomTile_iconFiles"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const pinCount = usePinnedEvents(room).length;
|
||||
|
||||
let pinsOption: JSX.Element | undefined;
|
||||
if (!isVideoRoom) {
|
||||
pinsOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
ensureViewingRoom(ev);
|
||||
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, false);
|
||||
onFinished();
|
||||
}}
|
||||
label={_t("right_panel|pinned_messages_button")}
|
||||
iconClassName="mx_RoomTile_iconPins"
|
||||
>
|
||||
{pinCount > 0 && <span className="mx_IconizedContextMenu_sublabel">{pinCount}</span>}
|
||||
</IconizedContextMenuOption>
|
||||
);
|
||||
}
|
||||
|
||||
let widgetsOption: JSX.Element | undefined;
|
||||
if (!isVideoRoom) {
|
||||
widgetsOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
ensureViewingRoom(ev);
|
||||
RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }, false);
|
||||
onFinished();
|
||||
}}
|
||||
label={_t("right_panel|widgets_section")}
|
||||
iconClassName="mx_RoomTile_iconWidgets"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let exportChatOption: JSX.Element | undefined;
|
||||
if (!isVideoRoom) {
|
||||
exportChatOption = (
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
Modal.createDialog(ExportDialog, { room });
|
||||
onFinished();
|
||||
}}
|
||||
label={_t("right_panel|export_chat_button")}
|
||||
iconClassName="mx_RoomTile_iconExport"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const onTagRoom = (ev: ButtonEvent, tagId: TagID): void => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
tagRoom(room, tagId);
|
||||
|
||||
const action = getKeyBindingsManager().getAccessibilityAction(ev as React.KeyboardEvent);
|
||||
switch (action) {
|
||||
case KeyBindingAction.Enter:
|
||||
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
|
||||
onFinished();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const ensureViewingRoom = (ev: ButtonEvent): void => {
|
||||
if (SdkContextClass.instance.roomViewStore.getRoomId() === room.roomId) return;
|
||||
dis.dispatch<ViewRoomPayload>(
|
||||
{
|
||||
action: Action.ViewRoom,
|
||||
room_id: room.roomId,
|
||||
metricsTrigger: "RoomList",
|
||||
metricsViaKeyboard: ev.type !== "click",
|
||||
},
|
||||
true,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<IconizedContextMenu {...props} onFinished={onFinished} className="mx_RoomTile_contextMenu" compact>
|
||||
<IconizedContextMenuOptionList>
|
||||
{inviteOption}
|
||||
{notificationOption}
|
||||
{favouriteOption}
|
||||
{peopleOption}
|
||||
{filesOption}
|
||||
{pinsOption}
|
||||
{widgetsOption}
|
||||
{lowPriorityOption}
|
||||
{copyLinkOption}
|
||||
|
||||
<IconizedContextMenuOption
|
||||
onClick={(ev: ButtonEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
dis.dispatch({
|
||||
action: "open_room_settings",
|
||||
room_id: room.roomId,
|
||||
});
|
||||
onFinished();
|
||||
PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuSettingsItem", ev);
|
||||
}}
|
||||
label={_t("common|settings")}
|
||||
iconClassName="mx_RoomTile_iconSettings"
|
||||
/>
|
||||
|
||||
{exportChatOption}
|
||||
|
||||
{SettingsStore.getValue("developerMode") && (
|
||||
<DeveloperToolsOption onFinished={onFinished} roomId={room.roomId} />
|
||||
)}
|
||||
|
||||
{leaveOption}
|
||||
</IconizedContextMenuOptionList>
|
||||
</IconizedContextMenu>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoomContextMenu;
|
||||
Loading…
Add table
Add a link
Reference in a new issue