Update RoomSummaryCard navigation links (#11812)
* Update RoomSummaryCard navigation links * Fix tests * remove unneeded test * "@vector-im/compound-web": "0.8.0" * Fix: search button no transition on hover * Fix: disabled invite option is not reflected in UI * test canInviteTo * update snapshots for CW 0.8.1 * unit test inviteToRoom * unit test tagRoom * add member link to roomsummarycard when using legacy room header * use onChange instead of onClick for ToggleMenuItem favourite room * update selectors in cypress tests * always show people menu item * add hover style to close button * add padding around room name * prettier --------- Co-authored-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Germain
GitHub
parent
b8ff3c169b
commit
f96583e74a
25 changed files with 857 additions and 245 deletions
|
|
@ -16,7 +16,6 @@ limitations under the License.
|
|||
|
||||
import React, { useContext } from "react";
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
|
||||
import IconizedContextMenu, {
|
||||
|
|
@ -30,7 +29,6 @@ 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 RoomListActions from "../../../actions/RoomListActions";
|
||||
import { EchoChamber } from "../../../stores/local-echo/EchoChamber";
|
||||
import { RoomNotifState } from "../../../RoomNotifs";
|
||||
import Modal from "../../../Modal";
|
||||
|
|
@ -52,6 +50,7 @@ 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";
|
||||
|
||||
interface IProps extends IContextMenuProps {
|
||||
room: Room;
|
||||
|
|
@ -333,15 +332,7 @@ const RoomContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
|
|||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) {
|
||||
const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
|
||||
const isApplied = RoomListStore.instance.getTagsForRoom(room).includes(tagId);
|
||||
const removeTag = isApplied ? tagId : inverseTag;
|
||||
const addTag = isApplied ? null : tagId;
|
||||
dis.dispatch(RoomListActions.tagRoom(cli, room, removeTag, addTag, 0));
|
||||
} else {
|
||||
logger.warn(`Unexpected tag ${tagId} applied to ${room.roomId}`);
|
||||
}
|
||||
tagRoom(room, tagId);
|
||||
|
||||
const action = getKeyBindingsManager().getAccessibilityAction(ev as React.KeyboardEvent);
|
||||
switch (action) {
|
||||
|
|
|
|||
|
|
@ -16,25 +16,35 @@ limitations under the License.
|
|||
|
||||
import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
|
||||
import classNames from "classnames";
|
||||
import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { Badge, Heading, Text, Tooltip } from "@vector-im/compound-web";
|
||||
import { MenuItem, Tooltip, Separator, ToggleMenuItem, Text, Badge, Heading } from "@vector-im/compound-web";
|
||||
import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.svg";
|
||||
import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite-off.svg";
|
||||
import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
|
||||
import { Icon as UserProfileSolidIcon } from "@vector-im/compound-design-tokens/icons/user-profile-solid.svg";
|
||||
import { Icon as LinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
|
||||
import { Icon as SettingsIcon } from "@vector-im/compound-design-tokens/icons/settings.svg";
|
||||
import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg";
|
||||
import { Icon as LeaveIcon } from "@vector-im/compound-design-tokens/icons/leave.svg";
|
||||
import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg";
|
||||
import { Icon as PollsIcon } from "@vector-im/compound-design-tokens/icons/polls.svg";
|
||||
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-off.svg";
|
||||
import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg";
|
||||
import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
|
||||
import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
|
||||
import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
|
||||
import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
|
||||
import BaseCard, { Group } from "./BaseCard";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
import AccessibleButton, { ButtonEvent, IAccessibleButtonProps } from "../elements/AccessibleButton";
|
||||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import defaultDispatcher from "../../../dispatcher/dispatcher";
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import Modal from "../../../Modal";
|
||||
import ShareDialog from "../dialogs/ShareDialog";
|
||||
import { useEventEmitter } from "../../../hooks/useEventEmitter";
|
||||
import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter";
|
||||
import WidgetUtils from "../../../utils/WidgetUtils";
|
||||
import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
|
|
@ -47,7 +57,6 @@ import RoomContext from "../../../contexts/RoomContext";
|
|||
import { UIComponent, UIFeature } from "../../../settings/UIFeature";
|
||||
import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
|
||||
import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
|
||||
import { useRoomMemberCount } from "../../../hooks/useRoomMembers";
|
||||
import { useFeatureEnabled } from "../../../hooks/useSettings";
|
||||
import { usePinnedEvents } from "./PinnedMessagesCard";
|
||||
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
|
||||
|
|
@ -59,6 +68,11 @@ import PosthogTrackers from "../../../PosthogTrackers";
|
|||
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
|
||||
import { PollHistoryDialog } from "../dialogs/PollHistoryDialog";
|
||||
import { Flex } from "../../utils/Flex";
|
||||
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
|
||||
import { DefaultTagID } from "../../../stores/room-list/models";
|
||||
import { tagRoom } from "../../../utils/room/tagRoom";
|
||||
import { canInviteTo } from "../../../utils/room/canInviteTo";
|
||||
import { inviteToRoom } from "../../../utils/room/inviteToRoom";
|
||||
import { useAccountData } from "../../../hooks/useAccountData";
|
||||
import { useRoomState } from "../../../hooks/useRoomState";
|
||||
|
||||
|
|
@ -73,23 +87,6 @@ interface IAppsSectionProps {
|
|||
room: Room;
|
||||
}
|
||||
|
||||
interface IButtonProps extends IAccessibleButtonProps {
|
||||
className: string;
|
||||
onClick(ev: ButtonEvent): void;
|
||||
}
|
||||
|
||||
const Button: React.FC<IButtonProps> = ({ children, className, onClick, ...props }) => {
|
||||
return (
|
||||
<AccessibleButton
|
||||
{...props}
|
||||
className={classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</AccessibleButton>
|
||||
);
|
||||
};
|
||||
|
||||
export const useWidgets = (room: Room): IApp[] => {
|
||||
const [apps, setApps] = useState<IApp[]>(() => WidgetStore.instance.getApps(room.roomId));
|
||||
|
||||
|
|
@ -263,11 +260,6 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const onRoomMembersClick = (ev: ButtonEvent): void => {
|
||||
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
|
||||
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
|
||||
};
|
||||
|
||||
const onRoomFilesClick = (): void => {
|
||||
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, true);
|
||||
};
|
||||
|
|
@ -304,6 +296,18 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
|
|||
});
|
||||
};
|
||||
|
||||
const onLeaveRoomClick = (): void => {
|
||||
defaultDispatcher.dispatch({
|
||||
action: "leave_room",
|
||||
room_id: room.roomId,
|
||||
});
|
||||
};
|
||||
|
||||
const onRoomMembersClick = (ev: ButtonEvent): void => {
|
||||
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
|
||||
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
|
||||
};
|
||||
|
||||
const isRoomEncrypted = useIsEncrypted(cli, room);
|
||||
const roomContext = useContext(RoomContext);
|
||||
const e2eStatus = roomContext.e2eStatus;
|
||||
|
|
@ -383,10 +387,14 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
|
|||
</header>
|
||||
);
|
||||
|
||||
const memberCount = useRoomMemberCount(room);
|
||||
const pinningEnabled = useFeatureEnabled("feature_pinning");
|
||||
const pinCount = usePinnedEvents(pinningEnabled ? room : undefined)?.length;
|
||||
|
||||
const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () =>
|
||||
RoomListStore.instance.getTagsForRoom(room),
|
||||
);
|
||||
const isFavorite = roomTags.includes(DefaultTagID.Favourite);
|
||||
|
||||
return (
|
||||
<BaseCard header={null} className="mx_RoomSummaryCard" onClose={onClose}>
|
||||
<Flex
|
||||
|
|
@ -417,43 +425,58 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
|
|||
</Flex>
|
||||
|
||||
{header}
|
||||
<Group title={_t("common|about")} className="mx_RoomSummaryCard_aboutGroup">
|
||||
<Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
|
||||
{_t("common|people")}
|
||||
<span className="mx_BaseCard_Button_sublabel">{memberCount}</span>
|
||||
</Button>
|
||||
{!isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
|
||||
{_t("right_panel|files_button")}
|
||||
</Button>
|
||||
)}
|
||||
{!isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_poll" onClick={onRoomPollHistoryClick}>
|
||||
{_t("right_panel|polls_button")}
|
||||
</Button>
|
||||
)}
|
||||
{pinningEnabled && !isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_pins" onClick={onRoomPinsClick}>
|
||||
{_t("right_panel|pinned_messages_button")}
|
||||
{pinCount > 0 && <span className="mx_BaseCard_Button_sublabel">{pinCount}</span>}
|
||||
</Button>
|
||||
)}
|
||||
{!isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
|
||||
{_t("right_panel|export_chat_button")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
data-testid="shareRoomButton"
|
||||
className="mx_RoomSummaryCard_icon_share"
|
||||
onClick={onShareRoomClick}
|
||||
>
|
||||
{_t("right_panel|share_button")}
|
||||
</Button>
|
||||
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
|
||||
{_t("right_panel|settings_button")}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Separator />
|
||||
|
||||
<ToggleMenuItem
|
||||
Icon={FavouriteIcon}
|
||||
label={_t("room|context_menu|favourite")}
|
||||
checked={isFavorite}
|
||||
onChange={() => tagRoom(room, DefaultTagID.Favourite)}
|
||||
/>
|
||||
<MenuItem
|
||||
Icon={UserAddIcon}
|
||||
label={_t("action|invite")}
|
||||
disabled={!canInviteTo(room)}
|
||||
onClick={() => inviteToRoom(room)}
|
||||
/>
|
||||
<MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onClick={onShareRoomClick} />
|
||||
<MenuItem Icon={SettingsIcon} label={_t("common|settings")} onClick={onRoomSettingsClick} />
|
||||
|
||||
<Separator />
|
||||
<MenuItem
|
||||
// this icon matches the legacy implementation
|
||||
// and is a short term solution until legacy room header is removed
|
||||
Icon={UserProfileSolidIcon}
|
||||
label={_t("common|people")}
|
||||
onClick={onRoomMembersClick}
|
||||
/>
|
||||
{!isVideoRoom && (
|
||||
<>
|
||||
<MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onClick={onRoomFilesClick} />
|
||||
<MenuItem
|
||||
Icon={PollsIcon}
|
||||
label={_t("right_panel|polls_button")}
|
||||
onClick={onRoomPollHistoryClick}
|
||||
/>
|
||||
{pinningEnabled && (
|
||||
<MenuItem
|
||||
Icon={PinIcon}
|
||||
label={_t("right_panel|pinned_messages_button")}
|
||||
onClick={onRoomPinsClick}
|
||||
>
|
||||
<Text as="span" size="sm">
|
||||
{pinCount}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem Icon={ExportArchiveIcon} label={_t("export_chat|title")} onClick={onRoomExportClick} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
|
||||
<MenuItem Icon={LeaveIcon} kind="critical" label={_t("action|leave_room")} onClick={onLeaveRoomClick} />
|
||||
|
||||
{SettingsStore.getValue(UIFeature.Widgets) &&
|
||||
!isVideoRoom &&
|
||||
|
|
|
|||
|
|
@ -418,7 +418,6 @@
|
|||
"spaceinvaders_message": "sends space invaders"
|
||||
},
|
||||
"common": {
|
||||
"about": "About",
|
||||
"access_token": "Access Token",
|
||||
"accessibility": "Accessibility",
|
||||
"advanced": "Advanced",
|
||||
|
|
@ -1854,8 +1853,6 @@
|
|||
"room_summary_card": {
|
||||
"title": "Room info"
|
||||
},
|
||||
"settings_button": "Room settings",
|
||||
"share_button": "Share room",
|
||||
"thread_list": {
|
||||
"context_menu_label": "Thread options"
|
||||
},
|
||||
|
|
|
|||
33
src/utils/room/canInviteTo.ts
Normal file
33
src/utils/room/canInviteTo.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { JoinRule, Room } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
|
||||
import { UIComponent } from "../../settings/UIFeature";
|
||||
|
||||
/**
|
||||
* Can a user invite new members to the room
|
||||
* @param room
|
||||
* @returns whether the user can invite new members to the room
|
||||
*/
|
||||
export function canInviteTo(room: Room): boolean {
|
||||
const client = room.client;
|
||||
const canInvite =
|
||||
!!room.canInvite(client.getSafeUserId()) || !!(room.isSpaceRoom() && room.getJoinRule() === JoinRule.Public);
|
||||
|
||||
return canInvite && room.getMyMembership() === "join" && shouldShowComponent(UIComponent.InviteUsers);
|
||||
}
|
||||
36
src/utils/room/inviteToRoom.ts
Normal file
36
src/utils/room/inviteToRoom.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import dis from "../../dispatcher/dispatcher";
|
||||
|
||||
/**
|
||||
* Invite to a room and prompts guests to registers
|
||||
* @param room
|
||||
*/
|
||||
export function inviteToRoom(room: Room): void {
|
||||
if (room.client.isGuest()) {
|
||||
dis.dispatch({ action: "require_registration" });
|
||||
return;
|
||||
}
|
||||
|
||||
// open the room inviter
|
||||
dis.dispatch({
|
||||
action: "view_invite",
|
||||
roomId: room.roomId,
|
||||
});
|
||||
}
|
||||
40
src/utils/room/tagRoom.ts
Normal file
40
src/utils/room/tagRoom.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import RoomListStore from "../../stores/room-list/RoomListStore";
|
||||
import { DefaultTagID, TagID } from "../../stores/room-list/models";
|
||||
import RoomListActions from "../../actions/RoomListActions";
|
||||
import dis from "../../dispatcher/dispatcher";
|
||||
|
||||
/**
|
||||
* Toggle tag for a given room
|
||||
* @param room The room to tag
|
||||
* @param tagId The tag to invert
|
||||
*/
|
||||
export function tagRoom(room: Room, tagId: TagID): void {
|
||||
if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) {
|
||||
const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
|
||||
const isApplied = RoomListStore.instance.getTagsForRoom(room).includes(tagId);
|
||||
const removeTag = isApplied ? tagId : inverseTag;
|
||||
const addTag = isApplied ? null : tagId;
|
||||
dis.dispatch(RoomListActions.tagRoom(room.client, room, removeTag, addTag, 0));
|
||||
} else {
|
||||
logger.warn(`Unexpected tag ${tagId} applied to ${room.roomId}`);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue