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

Commit bf94340

Browse files
MidhunSureshRMidhunSureshR
committed
Add announcement for the new room header
1 parent 62c5625 commit bf94340

File tree

3 files changed

+72
-61
lines changed

3 files changed

+72
-61
lines changed

‎src/components/views/rooms/RoomHeader.tsx

+69-60
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import { isVideoRoom } from "../../../utils/video-rooms";
5757
import { notificationLevelToIndicator } from "../../../utils/notifications";
5858
import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
5959
import { ButtonEvent } from "../elements/AccessibleButton";
60+
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
6061

6162
export default function RoomHeader({
6263
room,
@@ -241,71 +242,79 @@ export default function RoomHeader({
241242
return (
242243
<>
243244
<Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
244-
<button
245-
aria-label={_t("right_panel|room_summary_card|title")}
246-
tabIndex={0}
247-
onClick={() => {
248-
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
249-
}}
250-
className="mx_RoomHeader_infoWrapper"
245+
<ReleaseAnnouncement
246+
feature="newRoomHeader"
247+
header={_t("room|header|release_announcement_header")}
248+
description={_t("room|header|release_announcement_description")}
249+
closeLabel={_t("action|ok")}
250+
placement="bottom"
251251
>
252-
<RoomAvatar room={room} size="40px" />
253-
<Box flex="1" className="mx_RoomHeader_info">
254-
<BodyText
255-
as="div"
256-
size="lg"
257-
weight="semibold"
258-
dir="auto"
259-
role="heading"
260-
aria-level={1}
261-
className="mx_RoomHeader_heading"
262-
>
263-
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
264-
265-
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
266-
<Tooltip label={_t("common|public_room")} placement="right">
267-
<PublicIcon
268-
width="16px"
269-
height="16px"
270-
className="mx_RoomHeader_icon text-secondary"
271-
aria-label={_t("common|public_room")}
272-
/>
273-
</Tooltip>
274-
)}
275-
276-
{isDirectMessage && e2eStatus === E2EStatus.Verified && (
277-
<Tooltip label={_t("common|verified")} placement="right">
278-
<VerifiedIcon
279-
width="16px"
280-
height="16px"
281-
className="mx_RoomHeader_icon mx_Verified"
282-
aria-label={_t("common|verified")}
283-
/>
284-
</Tooltip>
285-
)}
286-
287-
{isDirectMessage && e2eStatus === E2EStatus.Warning && (
288-
<Tooltip label={_t("room|header_untrusted_label")} placement="right">
289-
<ErrorIcon
290-
width="16px"
291-
height="16px"
292-
className="mx_RoomHeader_icon mx_Untrusted"
293-
aria-label={_t("room|header_untrusted_label")}
294-
/>
295-
</Tooltip>
296-
)}
297-
</BodyText>
298-
{roomTopic && (
252+
<button
253+
aria-label={_t("right_panel|room_summary_card|title")}
254+
tabIndex={0}
255+
onClick={() => {
256+
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
257+
}}
258+
className="mx_RoomHeader_infoWrapper"
259+
>
260+
<RoomAvatar room={room} size="40px" />
261+
<Box flex="1" className="mx_RoomHeader_info">
299262
<BodyText
300263
as="div"
301-
size="sm"
302-
className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
264+
size="lg"
265+
weight="semibold"
266+
dir="auto"
267+
role="heading"
268+
aria-level={1}
269+
className="mx_RoomHeader_heading"
303270
>
304-
<Linkify>{roomTopicBody}</Linkify>
271+
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
272+
273+
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
274+
<Tooltip label={_t("common|public_room")} placement="right">
275+
<PublicIcon
276+
width="16px"
277+
height="16px"
278+
className="mx_RoomHeader_icon text-secondary"
279+
aria-label={_t("common|public_room")}
280+
/>
281+
</Tooltip>
282+
)}
283+
284+
{isDirectMessage && e2eStatus === E2EStatus.Verified && (
285+
<Tooltip label={_t("common|verified")} placement="right">
286+
<VerifiedIcon
287+
width="16px"
288+
height="16px"
289+
className="mx_RoomHeader_icon mx_Verified"
290+
aria-label={_t("common|verified")}
291+
/>
292+
</Tooltip>
293+
)}
294+
295+
{isDirectMessage && e2eStatus === E2EStatus.Warning && (
296+
<Tooltip label={_t("room|header_untrusted_label")} placement="right">
297+
<ErrorIcon
298+
width="16px"
299+
height="16px"
300+
className="mx_RoomHeader_icon mx_Untrusted"
301+
aria-label={_t("room|header_untrusted_label")}
302+
/>
303+
</Tooltip>
304+
)}
305305
</BodyText>
306-
)}
307-
</Box>
308-
</button>
306+
{roomTopic && (
307+
<BodyText
308+
as="div"
309+
size="sm"
310+
className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
311+
>
312+
<Linkify>{roomTopicBody}</Linkify>
313+
</BodyText>
314+
)}
315+
</Box>
316+
</button>
317+
</ReleaseAnnouncement>
309318
<Flex align="center" gap="var(--cpd-space-2x)">
310319
{additionalButtons?.map((props) => {
311320
const label = props.label();

‎src/i18n/strings/en_EN.json

+2
Original file line numberDiff line numberDiff line change
@@ -1950,6 +1950,8 @@
19501950
"one": "Asking to join",
19511951
"other": "%(count)s people asking to join"
19521952
},
1953+
"release_announcement_description": "Enjoy a simpler, more accessible room header.",
1954+
"release_announcement_header": "New design!",
19531955
"room_is_public": "This room is public",
19541956
"show_widgets_button": "Show Widgets",
19551957
"video_call_button_ec": "Video call (%(brand)s)",

‎src/stores/ReleaseAnnouncementStore.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { Features } from "../settings/Settings";
2727
/**
2828
* The features are shown in the array order.
2929
*/
30-
const FEATURES = ["threadsActivityCentre"] as const;
30+
const FEATURES = ["threadsActivityCentre", "newRoomHeader"] as const;
3131
/**
3232
* All the features that can be shown in the release announcements.
3333
*/

0 commit comments

Comments
 (0)