Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Update room summary card header
Browse files Browse the repository at this point in the history
  • Loading branch information
Germain committed Oct 31, 2023
1 parent 8fa9b9d commit 81a6096
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 95 deletions.
60 changes: 4 additions & 56 deletions res/css/views/right_panel/_RoomSummaryCard.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,68 +31,12 @@ limitations under the License.

.mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-17px;
}

.mx_RoomSummaryCard_alias {
font: var(--cpd-font-body-md-regular);
color: $secondary-content;
text-overflow: ellipsis;
}

.mx_RoomSummaryCard_avatar {
display: flex;
justify-content: center;
align-items: center;

.mx_RoomSummaryCard_e2ee {
display: inline-block;
position: relative;
width: 54px;
height: 54px;
border-radius: 50%;
background-color: #737d8c;
margin-left: -10px; /* overlap */
border: 3px solid $dark-panel-bg-color;

&::before {
content: "";
position: absolute;
top: 13px;
left: 13px;
height: 28px;
width: 28px;
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url("$(res)/img/e2e/disabled.svg");
background-color: #ffffff;
}
}

.mx_RoomSummaryCard_e2ee_normal {
background-color: #424446;
&::before {
mask-image: url("$(res)/img/e2e/normal.svg");
}
}

.mx_RoomSummaryCard_e2ee_verified {
background-color: $e2e-verified-color;
&::before {
mask-image: url("$(res)/img/e2e/verified.svg");
}
}

.mx_RoomSummaryCard_e2ee_warning {
background-color: $e2e-warning-color;
&::before {
mask-image: url("$(res)/img/e2e/warning.svg");
}
}
}

.mx_RoomSummaryCard_aboutGroup {
.mx_RoomSummaryCard_Button {
padding-left: 44px;
Expand Down Expand Up @@ -244,6 +188,10 @@ limitations under the License.
}
}

.mx_RoomSummaryCard_badges {
margin: var(--cpd-space-4x) 0;
}

.mx_RoomSummaryCard_header {
padding: 15px 12px;

Expand Down
86 changes: 67 additions & 19 deletions src/components/views/right_panel/RoomSummaryCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,13 @@ limitations under the License.

import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
import classNames from "classnames";
import { Room } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
import { Badge, Heading, Text, Tooltip } from "@vector-im/compound-web";
import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.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 MatrixClientContext from "../../../contexts/MatrixClientContext";
import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
Expand All @@ -34,7 +38,6 @@ import { useEventEmitter } from "../../../hooks/useEventEmitter";
import WidgetUtils from "../../../utils/WidgetUtils";
import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
import SettingsStore from "../../../settings/SettingsStore";
import TextWithTooltip from "../elements/TextWithTooltip";
import WidgetAvatar from "../avatars/WidgetAvatar";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import WidgetStore, { IApp } from "../../../stores/WidgetStore";
Expand All @@ -56,6 +59,8 @@ import PosthogTrackers from "../../../PosthogTrackers";
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
import { PollHistoryDialog } from "../dialogs/PollHistoryDialog";
import { Flex } from "../../utils/Flex";
import { useAccountData } from "../../../hooks/useAccountData";
import { useRoomState } from "../../../hooks/useRoomState";

interface IProps {
room: Room;
Expand Down Expand Up @@ -307,31 +312,74 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
const isVideoRoom =
videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()));

const roomState = useRoomState(room);
const directRoomsList = useAccountData<Record<string, string[]>>(room.client, EventType.Direct);
const [isDirectMessage, setDirectMessage] = useState(false);
useEffect(() => {
for (const [, dmRoomList] of Object.entries(directRoomsList)) {
if (dmRoomList.includes(room?.roomId ?? "")) {
setDirectMessage(true);
break;
}
}
}, [room, directRoomsList]);

const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
const header = (
<header className="mx_RoomSummaryCard_container">
<div className="mx_RoomSummaryCard_avatar" role="presentation">
<RoomAvatar room={room} size="54px" viewAvatarOnClick />
<TextWithTooltip
tooltip={isRoomEncrypted ? _t("common|encrypted") : _t("common|unencrypted")}
class={classNames("mx_RoomSummaryCard_e2ee", {
mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,
mx_RoomSummaryCard_e2ee_verified: isRoomEncrypted && e2eStatus === E2EStatus.Verified,
})}
/>
</div>

<RoomAvatar room={room} size="80px" viewAvatarOnClick />
<RoomName room={room}>
{(name) => (
<h1 className="mx_RoomSummaryCard_roomName" title={name}>
<Heading
as="h1"
size="md"
weight="semibold"
className="mx_RoomSummaryCard_roomName text-primary"
title={name}
>
{name}
</h1>
</Heading>
)}
</RoomName>
<div className="mx_RoomSummaryCard_alias" title={alias}>
<Text
as="div"
size="sm"
weight="semibold"
className="mx_RoomSummaryCard_alias text-secondary"
title={alias}
>
{alias}
</div>
</Text>

<Flex as="section" justify="center" gap="var(--cpd-space-2x)" className="mx_RoomSummaryCard_badges">
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
<Badge kind="default">
<PublicIcon width="1em" />
{_t("common|public_room")}
</Badge>
)}

{isRoomEncrypted && e2eStatus !== E2EStatus.Warning && (
<Badge kind="success">
<LockIcon width="1em" />
{_t("common|encrypted")}
</Badge>
)}

{!e2eStatus && (
<Badge kind="default">
<LockOffIcon width="1em" />
{_t("common|unencrypted")}
</Badge>
)}

{e2eStatus === E2EStatus.Warning && (
<Badge kind="critical">
<ErrorIcon width="1em" />
{_t("common|not_trusted")}
</Badge>
)}
</Flex>
</header>
);

Expand Down
44 changes: 24 additions & 20 deletions test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,36 +35,40 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<header
class="mx_RoomSummaryCard_container"
>
<div
class="mx_RoomSummaryCard_avatar"
<span
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 80px;"
>
<span
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 54px;"
>
!
</span>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_TextWithTooltip_target mx_RoomSummaryCard_e2ee"
tabindex="0"
/>
</div>
!
</span>
<h1
class="mx_RoomSummaryCard_roomName"
class="_font-heading-md-semibold_1jx6b_121 mx_RoomSummaryCard_roomName text-primary"
title="!room:domain.org"
>
!room:domain.org
</h1>
<div
class="mx_RoomSummaryCard_alias"
class="_font-body-sm-semibold_1jx6b_45 mx_RoomSummaryCard_alias text-secondary"
title=""
/>
<section
class="mx_Flex mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
>
<span
class="_font-body-sm-medium_1jx6b_50 _badge_qipht_17"
data-kind="default"
>
<div
width="1em"
/>
Not encrypted
</span>
</section>
</header>
<div
class="mx_BaseCard_Group mx_RoomSummaryCard_aboutGroup"
Expand Down

0 comments on commit 81a6096

Please sign in to comment.