Room header UI updates (#11507)
* Fix performance issues with useRoomMembers With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless * Add public room indicator * Format room members count better * Add public room test * Add search to room summary card * Update settings UI * Update snapshot * Remove default title attribute
This commit is contained in:
Germain
GitHub
parent
30d997e21c
commit
d551469543
32 changed files with 176 additions and 112 deletions
|
|
@ -134,6 +134,14 @@ code {
|
|||
color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_Verified {
|
||||
color: $e2e-verified-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -268,3 +268,7 @@ limitations under the License.
|
|||
.mx_RoomSummaryCard_icon_poll::before {
|
||||
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_icon_search::before {
|
||||
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,12 @@ limitations under the License.
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_heading {
|
||||
display: flex;
|
||||
gap: var(--cpd-space-1x);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_topic {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ interface RoomlessProps extends BaseProps {
|
|||
interface RoomProps extends BaseProps {
|
||||
room: Room;
|
||||
permalinkCreator: RoomPermalinkCreator;
|
||||
onSearchClick?: () => void;
|
||||
}
|
||||
|
||||
type Props = XOR<RoomlessProps, RoomProps>;
|
||||
|
|
@ -293,6 +294,7 @@ export default class RightPanel extends React.Component<Props, IState> {
|
|||
onClose={this.onClose}
|
||||
// whenever RightPanel is passed a room it is passed a permalinkcreator
|
||||
permalinkCreator={this.props.permalinkCreator!}
|
||||
onSearchClick={this.props.onSearchClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2443,6 +2443,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
|||
resizeNotifier={this.props.resizeNotifier}
|
||||
permalinkCreator={this.permalinkCreator}
|
||||
e2eStatus={this.state.e2eStatus}
|
||||
onSearchClick={this.onSearchClick}
|
||||
/>
|
||||
) : undefined;
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
|
|||
const {
|
||||
name,
|
||||
idName,
|
||||
title = "",
|
||||
title,
|
||||
url,
|
||||
urls,
|
||||
size = "40px",
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ interface IProps {
|
|||
room: Room;
|
||||
permalinkCreator: RoomPermalinkCreator;
|
||||
onClose(): void;
|
||||
onSearchClick?: () => void;
|
||||
}
|
||||
|
||||
interface IAppsSectionProps {
|
||||
|
|
@ -272,7 +273,7 @@ const onRoomSettingsClick = (ev: ButtonEvent): void => {
|
|||
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
|
||||
};
|
||||
|
||||
const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose }) => {
|
||||
const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, onSearchClick }) => {
|
||||
const cli = useContext(MatrixClientContext);
|
||||
|
||||
const onShareRoomClick = (): void => {
|
||||
|
|
@ -342,6 +343,14 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
|
|||
{_t("common|people")}
|
||||
<span className="mx_BaseCard_Button_sublabel">{memberCount}</span>
|
||||
</Button>
|
||||
<Button
|
||||
className="mx_RoomSummaryCard_icon_search"
|
||||
onClick={() => {
|
||||
onSearchClick?.();
|
||||
}}
|
||||
>
|
||||
{_t("Search")}
|
||||
</Button>
|
||||
{!isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
|
||||
{_t("Files")}
|
||||
|
|
|
|||
|
|
@ -22,18 +22,18 @@ import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/thr
|
|||
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
|
||||
import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg";
|
||||
import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
|
||||
import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
|
||||
import { CallType } from "matrix-js-sdk/src/webrtc/call";
|
||||
import { EventType, type Room } from "matrix-js-sdk/src/matrix";
|
||||
import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { useRoomName } from "../../../hooks/useRoomName";
|
||||
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
|
||||
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";
|
||||
import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers";
|
||||
import { _t, getCurrentLanguage } from "../../../languageHandler";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { Flex } from "../../utils/Flex";
|
||||
import { Box } from "../../utils/Box";
|
||||
import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus";
|
||||
|
|
@ -46,6 +46,9 @@ import { placeCall } from "../../../utils/room/placeCall";
|
|||
import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus";
|
||||
import { E2EStatus } from "../../../utils/ShieldUtils";
|
||||
import FacePile from "../elements/FacePile";
|
||||
import { useRoomState } from "../../../hooks/useRoomState";
|
||||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
import { formatCount } from "../../../utils/FormattingUtils";
|
||||
|
||||
/**
|
||||
* A helper to transform a notification color to the what the Compound Icon Button
|
||||
|
|
@ -76,9 +79,10 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
|
||||
const roomName = useRoomName(room);
|
||||
const roomTopic = useTopic(room);
|
||||
const roomState = useRoomState(room);
|
||||
|
||||
const members = useRoomMembers(room);
|
||||
const memberCount = useRoomMemberCount(room);
|
||||
const members = useRoomMembers(room, 2500);
|
||||
const memberCount = useRoomMemberCount(room, { throttleWait: 2500 });
|
||||
|
||||
const { voiceCallDisabledReason, voiceCallType, videoCallDisabledReason, videoCallType } = useRoomCallStatus(room);
|
||||
|
||||
|
|
@ -116,7 +120,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
showOrHidePanel(RightPanelPhases.RoomSummary);
|
||||
}}
|
||||
>
|
||||
<DecoratedRoomAvatar room={room} size="40px" displayBadge={false} />
|
||||
<RoomAvatar room={room} size="40px" />
|
||||
<Box flex="1" className="mx_RoomHeader_info">
|
||||
<BodyText
|
||||
as="div"
|
||||
|
|
@ -126,9 +130,21 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
title={roomName}
|
||||
role="heading"
|
||||
aria-level={1}
|
||||
className="mx_RoomHeader_heading"
|
||||
>
|
||||
{roomName}
|
||||
|
||||
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
|
||||
<Tooltip label={_t("Public room")}>
|
||||
<PublicIcon
|
||||
width="16px"
|
||||
height="16px"
|
||||
className="text-secondary"
|
||||
aria-label={_t("Public room")}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{isDirectMessage && e2eStatus === E2EStatus.Verified && (
|
||||
<Tooltip label={_t("common|verified")}>
|
||||
<VerifiedIcon
|
||||
|
|
@ -214,7 +230,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
size="20px"
|
||||
overflow={false}
|
||||
>
|
||||
{memberCount.toLocaleString(getCurrentLanguage())}
|
||||
{formatCount(memberCount)}
|
||||
</FacePile>
|
||||
</BodyText>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@ import { useTypedEventEmitter } from "./useEventEmitter";
|
|||
// Hook to simplify watching Matrix Room joined members
|
||||
export const useRoomMembers = (room: Room, throttleWait = 250): RoomMember[] => {
|
||||
const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers());
|
||||
useTypedEventEmitter(
|
||||
room.currentState,
|
||||
RoomStateEvent.Members,
|
||||
|
||||
const throttledUpdate = useMemo(
|
||||
() =>
|
||||
throttle(
|
||||
() => {
|
||||
setMembers(room.getJoinedMembers());
|
||||
|
|
@ -33,7 +33,10 @@ export const useRoomMembers = (room: Room, throttleWait = 250): RoomMember[] =>
|
|||
throttleWait,
|
||||
{ leading: true, trailing: true },
|
||||
),
|
||||
[room, throttleWait],
|
||||
);
|
||||
|
||||
useTypedEventEmitter(room.currentState, RoomStateEvent.Members, throttledUpdate);
|
||||
return members;
|
||||
};
|
||||
|
||||
|
|
@ -50,11 +53,11 @@ type RoomMemberCountOpts = {
|
|||
* @param opts The options.
|
||||
* @returns the room member count.
|
||||
*/
|
||||
export const useRoomMemberCount = (room: Room, opts: RoomMemberCountOpts = { throttleWait: 250 }): number => {
|
||||
export const useRoomMemberCount = (
|
||||
room: Room,
|
||||
{ throttleWait }: RoomMemberCountOpts = { throttleWait: 250 },
|
||||
): number => {
|
||||
const [count, setCount] = useState<number>(room.getJoinedMemberCount());
|
||||
|
||||
const { throttleWait } = opts;
|
||||
|
||||
const throttledUpdate = useMemo(
|
||||
() =>
|
||||
throttle(
|
||||
|
|
|
|||
|
|
@ -897,7 +897,7 @@
|
|||
"hidebold": "Hide notification dot (only display counters badges)",
|
||||
"intentional_mentions": "Enable intentional mentions",
|
||||
"ask_to_join": "Enable ask to join",
|
||||
"new_room_decoration_ui": "Under active development, new room header & details interface"
|
||||
"new_room_decoration_ui": "New room header & details interface"
|
||||
},
|
||||
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
|
||||
"Notification Settings": "Notification Settings",
|
||||
|
|
@ -1876,6 +1876,7 @@
|
|||
"Room %(name)s": "Room %(name)s",
|
||||
"Recently visited rooms": "Recently visited rooms",
|
||||
"No recently visited rooms": "No recently visited rooms",
|
||||
"Public room": "Public room",
|
||||
"Untrusted": "Untrusted",
|
||||
"%(count)s members": {
|
||||
"other": "%(count)s members",
|
||||
|
|
@ -1883,7 +1884,6 @@
|
|||
},
|
||||
"Video room": "Video room",
|
||||
"Public space": "Public space",
|
||||
"Public room": "Public room",
|
||||
"Private space": "Private space",
|
||||
"Private room": "Private room",
|
||||
"%(names)s and %(name)s": "%(names)s and %(name)s",
|
||||
|
|
@ -2112,6 +2112,7 @@
|
|||
"Edit widgets, bridges & bots": "Edit widgets, bridges & bots",
|
||||
"Add widgets, bridges & bots": "Add widgets, bridges & bots",
|
||||
"Not encrypted": "Not encrypted",
|
||||
"Search": "Search",
|
||||
"Files": "Files",
|
||||
"Poll history": "Poll history",
|
||||
"Pinned": "Pinned",
|
||||
|
|
|
|||
|
|
@ -548,6 +548,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
|
|||
isFeature: true,
|
||||
labsGroup: LabGroup.Rooms,
|
||||
displayName: _td("labs|new_room_decoration_ui"),
|
||||
description: _td("labs|under_active_development"),
|
||||
supportedLevels: LEVELS_FEATURE,
|
||||
default: false,
|
||||
controller: new ReloadOnChangeController(),
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
|
@ -107,7 +107,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
|
@ -187,7 +187,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
|
|||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 52px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
|
|
@ -276,7 +276,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
|
@ -356,7 +356,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
|
|||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 52px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
|
|
@ -520,7 +520,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
|
@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 52px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
title=""
|
||||
title="room-id-2"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
|
|
@ -148,7 +148,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
title=""
|
||||
title="room-id-3"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
|
|
@ -220,7 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
title=""
|
||||
title="space-id-4"
|
||||
>
|
||||
N
|
||||
</span>
|
||||
|
|
@ -298,7 +298,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
title=""
|
||||
title="room-id-5"
|
||||
>
|
||||
N
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
title=""
|
||||
title="@userId:matrix.org"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="@dm_user@example.com"
|
||||
>
|
||||
D
|
||||
</span>
|
||||
|
|
@ -25,7 +25,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="@local_room_user@example.com"
|
||||
>
|
||||
l
|
||||
</span>
|
||||
|
|
@ -41,7 +41,7 @@ exports[`RoomAvatar should render as expected for a Room 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="!room:example.com"
|
||||
>
|
||||
t
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
title=""
|
||||
title="!space:server"
|
||||
>
|
||||
O
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -120,7 +120,6 @@ exports[`AppTile for a pinned widget should render 1`] = `
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="image-file-stub"
|
||||
title=""
|
||||
width="20px"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -209,7 +208,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="image-file-stub"
|
||||
title=""
|
||||
width="20px"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -366,7 +364,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="image-file-stub"
|
||||
title=""
|
||||
width="20px"
|
||||
/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="456"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="!room1:example.com"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
@ -73,7 +73,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="@user2:example.com"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
|
|
@ -105,7 +105,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="!room1:example.com"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
@ -137,7 +137,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="@user1:example.com"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
|
|
@ -169,7 +169,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="!room1:example.com"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
@ -201,7 +201,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="!space1:example.com"
|
||||
>
|
||||
S
|
||||
</span>
|
||||
|
|
@ -256,7 +256,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="!room1:example.com"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
@ -288,7 +288,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="@user1:example.com"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ exports[`<RoomFacePile /> renders 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 28px;"
|
||||
title=""
|
||||
title="@bob:example.org"
|
||||
>
|
||||
b
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
|
|||
const { container } = getComponent({ mxEvent: ev });
|
||||
const content = container.querySelector(".mx_EventTile_body");
|
||||
expect(content.innerHTML).toMatchInlineSnapshot(
|
||||
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px" title="@member:domain.bla"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
|
||||
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="@member:domain.bla" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="@member:domain.bla"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -73,7 +73,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="mxc://avatar.url/image.png"
|
||||
title="@member:domain.bla"
|
||||
width="16px"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -113,7 +112,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="!room1:example.com"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -124,7 +123,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="mxc://avatar.url/room.png"
|
||||
title="!room1:example.com"
|
||||
width="16px"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -166,7 +164,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="!room1:example.com"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -177,7 +175,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="mxc://avatar.url/room.png"
|
||||
title="!room1:example.com"
|
||||
width="16px"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -278,7 +275,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
title=""
|
||||
title="@member:domain.bla"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -289,7 +286,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="mxc://avatar.url/image.png"
|
||||
title="@member:domain.bla"
|
||||
width="16px"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -313,7 +309,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
href="https://matrix.to/#/!room1:example.com/%event_id%"
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
><span
|
||||
title=""
|
||||
title="@member:domain.bla"
|
||||
aria-label="Profile picture"
|
||||
aria-hidden="true"
|
||||
data-testid="avatar-img"
|
||||
|
|
@ -330,8 +326,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
class="_image_2lhia_45"
|
||||
data-type="round"
|
||||
width="16px"
|
||||
height="16px"
|
||||
title="@member:domain.bla" /></span
|
||||
height="16px" /></span
|
||||
><span class="mx_Pill_text">Message from Member</span></a
|
||||
></bdi
|
||||
></span
|
||||
|
|
@ -348,7 +343,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
href="https://matrix.to/#/!room2:example.com/%event_id%"
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
><span
|
||||
title=""
|
||||
title="!room2:example.com"
|
||||
aria-label="Avatar"
|
||||
aria-hidden="true"
|
||||
data-testid="avatar-img"
|
||||
|
|
@ -365,8 +360,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
class="_image_2lhia_45"
|
||||
data-type="round"
|
||||
width="16px"
|
||||
height="16px"
|
||||
title="!room2:example.com" /></span
|
||||
height="16px" /></span
|
||||
><span class="mx_Pill_text">Message in Room 2</span></a
|
||||
></bdi
|
||||
></span
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 54px;"
|
||||
title=""
|
||||
title="!room:domain.org"
|
||||
>
|
||||
!
|
||||
</span>
|
||||
|
|
@ -69,6 +69,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
|
|||
0
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_search"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Search
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_files"
|
||||
role="button"
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
|||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 230.39999999999998px;"
|
||||
title=""
|
||||
title="@user:example.com"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
|||
import React from "react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
||||
import { EventType, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { EventType, JoinRule, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { getAllByTitle, getByLabelText, getByText, getByTitle, render, screen, waitFor } from "@testing-library/react";
|
||||
|
||||
import { mkEvent, stubClient, withClientContextRenderOptions } from "../../../test-utils";
|
||||
|
|
@ -422,6 +422,26 @@ describe("RoomHeader", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("public room", () => {
|
||||
it("shows a globe", () => {
|
||||
const joinRuleEvent = new MatrixEvent({
|
||||
type: EventType.RoomJoinRules,
|
||||
content: { join_rule: JoinRule.Public },
|
||||
sender: MatrixClientPeg.get()!.getSafeUserId(),
|
||||
state_key: "",
|
||||
room_id: room.roomId,
|
||||
});
|
||||
room.addLiveEvents([joinRuleEvent]);
|
||||
|
||||
const { container } = render(
|
||||
<RoomHeader room={room} />,
|
||||
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
||||
);
|
||||
|
||||
expect(getByLabelText(container, "Public room")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("dm", () => {
|
||||
let client: MatrixClient;
|
||||
beforeEach(() => {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
title=""
|
||||
title="@alice:server.org"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
|
|||
<header
|
||||
class="mx_Flex mx_RoomHeader light-panel"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||||
>
|
||||
<div
|
||||
class="mx_DecoratedRoomAvatar"
|
||||
>
|
||||
<span
|
||||
class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
|
||||
|
|
@ -16,18 +13,17 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 40px;"
|
||||
title=""
|
||||
title="!1:example.org"
|
||||
>
|
||||
!
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||||
style="--mx-box-flex: 1;"
|
||||
>
|
||||
<div
|
||||
aria-level="1"
|
||||
class="_font-body-lg-semibold_1g2sj_89"
|
||||
class="_font-body-lg-semibold_1g2sj_89 mx_RoomHeader_heading"
|
||||
dir="auto"
|
||||
role="heading"
|
||||
title="!1:example.org"
|
||||
|
|
@ -40,7 +36,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
|
|||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
|
||||
>
|
||||
<button
|
||||
class="_icon-button_yvmcf_17"
|
||||
class="_icon-button_1k9cw_17"
|
||||
disabled=""
|
||||
style="--cpd-icon-button-size: 32px;"
|
||||
title="There's no one here to call"
|
||||
|
|
@ -48,7 +44,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
|
|||
<div />
|
||||
</button>
|
||||
<button
|
||||
class="_icon-button_yvmcf_17"
|
||||
class="_icon-button_1k9cw_17"
|
||||
disabled=""
|
||||
style="--cpd-icon-button-size: 32px;"
|
||||
title="There's no one here to call"
|
||||
|
|
@ -56,14 +52,14 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
|
|||
<div />
|
||||
</button>
|
||||
<button
|
||||
class="_icon-button_yvmcf_17"
|
||||
class="_icon-button_1k9cw_17"
|
||||
style="--cpd-icon-button-size: 32px;"
|
||||
title="Threads"
|
||||
>
|
||||
<div />
|
||||
</button>
|
||||
<button
|
||||
class="_icon-button_yvmcf_17"
|
||||
class="_icon-button_1k9cw_17"
|
||||
style="--cpd-icon-button-size: 32px;"
|
||||
title="Notifications"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="RoomPreviewBar-test-room"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
@ -222,7 +222,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="RoomPreviewBar-test-room"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
@ -281,7 +281,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="RoomPreviewBar-test-room"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
@ -347,7 +347,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 36px;"
|
||||
title=""
|
||||
title="RoomPreviewBar-test-room"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ exports[`RoomTile when message previews are enabled and there is a message in a
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
title=""
|
||||
title="!1:example.org"
|
||||
>
|
||||
!
|
||||
</span>
|
||||
|
|
@ -95,7 +95,7 @@ exports[`RoomTile when message previews are enabled and there is a message in th
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
title=""
|
||||
title="!1:example.org"
|
||||
>
|
||||
!
|
||||
</span>
|
||||
|
|
@ -170,7 +170,7 @@ exports[`RoomTile when message previews are enabled should render a room without
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
title=""
|
||||
title="!1:example.org"
|
||||
>
|
||||
!
|
||||
</span>
|
||||
|
|
@ -233,7 +233,7 @@ exports[`RoomTile when message previews are not enabled should render the room 1
|
|||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
title=""
|
||||
title="!1:example.org"
|
||||
>
|
||||
!
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
|
|||
data-testid="avatar-img"
|
||||
data-type="square"
|
||||
style="--cpd-avatar-size: 40px;"
|
||||
title=""
|
||||
title="!spaceid:example.com"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -42,7 +42,6 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
|
|||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="http://this.is.a.url/avatar.url/room.png"
|
||||
title="!spaceid:example.com"
|
||||
width="40px"
|
||||
/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ exports[`HTMLExport should export 1`] = `
|
|||
<div class="mx_LegacyRoomHeader_wrapper" aria-owns="mx_RightPanel">
|
||||
<div class="mx_LegacyRoomHeader_avatar">
|
||||
<div class="mx_DecoratedRoomAvatar">
|
||||
<span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
|
||||
<span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx_LegacyRoomHeader_name">
|
||||
|
|
@ -60,7 +60,7 @@ exports[`HTMLExport should export 1`] = `
|
|||
role="list"
|
||||
>
|
||||
<div class="mx_NewRoomIntro">
|
||||
<span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
|
||||
<span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
|
||||
<h2> !myroom:example.org </h2>
|
||||
<p> created this room. <br/><br/> <p><span>This is the start of export of <b>!myroom:example.org</b>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><b>@userId:matrix.org</b></a> at 11/17/2022.</span></p> </p>
|
||||
<br/>
|
||||
|
|
|
|||
16
yarn.lock
16
yarn.lock
|
|
@ -1443,7 +1443,7 @@
|
|||
dependencies:
|
||||
"@floating-ui/utils" "^0.1.1"
|
||||
|
||||
"@floating-ui/dom@^1.3.0":
|
||||
"@floating-ui/dom@^1.5.1":
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
|
||||
integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
|
||||
|
|
@ -1452,11 +1452,11 @@
|
|||
"@floating-ui/utils" "^0.1.1"
|
||||
|
||||
"@floating-ui/react-dom@^2.0.0":
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
|
||||
integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
|
||||
integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
|
||||
dependencies:
|
||||
"@floating-ui/dom" "^1.3.0"
|
||||
"@floating-ui/dom" "^1.5.1"
|
||||
|
||||
"@floating-ui/utils@^0.1.1":
|
||||
version "0.1.1"
|
||||
|
|
@ -3064,9 +3064,9 @@
|
|||
svg2vectordrawable "^2.9.1"
|
||||
|
||||
"@vector-im/compound-web@^0.2.3":
|
||||
version "0.2.15"
|
||||
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.15.tgz#89121053cae95cc4fa82b84fc4ebf87cdf75c564"
|
||||
integrity sha512-F4ay88XJH9LkGrHcpHyJnqqkWOdYmzwLbTQjbjokKwOPeDvcLJDZkTyRR03GbU8Ir/tlGYSx0TbrXA5XQI0g3A==
|
||||
version "0.2.16"
|
||||
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.16.tgz#cdc578ec846999a7312d572131b5749b2cf7f86f"
|
||||
integrity sha512-3ffijtHf4ibjLPsRoawTchf+DyaGbxtN6h/9WRvdOSTv+ML7oR7Aoo+jAPSTN+rNFuCIHKrayHJLl2YJOdeH8Q==
|
||||
dependencies:
|
||||
"@radix-ui/react-form" "^0.0.3"
|
||||
"@radix-ui/react-tooltip" "^1.0.6"
|
||||
|
|
|
|||
Loading…
Reference in a new issue