From 00219d8b1bad744395084212c66623319d027929 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 08:58:16 +0100 Subject: [PATCH 01/19] Create useRoomName hook Mark RoomName component as deprecated --- src/components/views/elements/RoomName.tsx | 5 +- src/components/views/rooms/RoomHeader.tsx | 32 +++--------- src/hooks/useRoomName.ts | 51 +++++++++++++++++++ .../views/rooms/RoomHeader-test.tsx | 12 +++++ .../__snapshots__/RoomHeader-test.tsx.snap | 16 ++++-- 5 files changed, 87 insertions(+), 29 deletions(-) create mode 100644 src/hooks/useRoomName.ts diff --git a/src/components/views/elements/RoomName.tsx b/src/components/views/elements/RoomName.tsx index 05a106024c0..58f4f043b9a 100644 --- a/src/components/views/elements/RoomName.tsx +++ b/src/components/views/elements/RoomName.tsx @@ -20,10 +20,13 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/models/room"; import { useTypedEventEmitter } from "../../../hooks/useEventEmitter"; interface IProps { - room: Room; + room?: Room; children?(name: string): JSX.Element; } +/** + * @deprecated use `useRoomName.ts` instead + */ const RoomName = ({ room, children }: IProps): JSX.Element => { const [name, setName] = useState(room?.name); useTypedEventEmitter(room, RoomEvent.Name, () => { diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 8cf09e0d019..5b67357422c 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -18,36 +18,18 @@ import React from "react"; import type { Room } from "matrix-js-sdk/src/models/room"; import { _t } from "../../../languageHandler"; -import RoomName from "../elements/RoomName"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; +import useRoomName from "../../../hooks/useRoomName"; export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element { - let oobName = _t("Join Room"); - if (oobData && oobData.name) { - oobName = oobData.name; - } + const roomName = useRoomName(room, oobData); return ( -
-
- {room && ( - - {(name) => { - const roomName = name || oobName; - return ( -
- {roomName} -
- ); - }} - - )} +
+
+
+ {roomName} +
); diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts new file mode 100644 index 00000000000..42cac38bb09 --- /dev/null +++ b/src/hooks/useRoomName.ts @@ -0,0 +1,51 @@ +/* +Copyright 2021 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, RoomEvent } from "matrix-js-sdk"; +import { IOOBData } from "../stores/ThreepidInviteStore"; +import { useCallback, useEffect, useState } from "react"; +import { useTypedEventEmitter } from "./useEventEmitter"; +import { _t } from "../languageHandler"; + +/** + * Determines the room name from a combination of the room model and potential + * out-of-band information + * @param room - The room model + * @param oobData - out-of-band information about the room + * @returns {string} the room name + */ +export default function useRoomName(room?: Room, oobData?: IOOBData): string { + let oobName = _t("Join Room"); + if (oobData && oobData.name) { + oobName = oobData.name; + } + + const [name, setName] = useState(room?.name || oobName || ""); + + const setRoomName = useCallback(() => { + setName(room?.name || oobName || ""); + }, [room?.name, oobData]); + + useTypedEventEmitter(room, RoomEvent.Name, () => { + setRoomName(); + }); + + useEffect(() => { + setRoomName(); + }, [room?.name, oobData]); + + return name; +} diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 819d98a2f69..6f59117fd1d 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -43,4 +43,16 @@ describe("Roomeader", () => { const { container } = render(); expect(container).toHaveTextContent(ROOM_ID); }); + + it("display the out-of-band room name", () => { + const OOB_NAME = "My private room"; + const { container } = render( + , + ); + expect(container).toHaveTextContent(OOB_NAME); + }); }); diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 01105de9cb0..0fafcad5ed6 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -3,11 +3,21 @@ exports[`Roomeader renders with no props 1`] = `
+ class="mx_RoomHeader_wrapper" + > +
+ Join Room +
+
`; From ea286557ef2526fc2d26e5b24955fbf75665258b Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 08:58:36 +0100 Subject: [PATCH 02/19] Pass out-of-band data to relevant RoomHeader component --- src/components/structures/RoomView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index ecdfdf2d327..bdbb827a002 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2470,7 +2470,7 @@ export class RoomView extends React.Component { )} {SettingsStore.getValue("feature_new_room_decoration_ui") ? ( - + ) : ( Date: Tue, 1 Aug 2023 08:58:45 +0100 Subject: [PATCH 03/19] Mark LegacyRoomHeader as deprecated --- src/components/views/rooms/LegacyRoomHeader.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index e3be6cca88a..1e4634eef0d 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -483,6 +483,9 @@ interface IState { rightPanelOpen: boolean; } +/** + * @deprecated use `src/components/views/rooms/RoomHeader.tsx` instead + */ export default class RoomHeader extends React.Component { public static defaultProps: Partial = { inRoom: false, From 4a64f04d8b7933bb799417878cc79d6cc242109f Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 09:11:57 +0100 Subject: [PATCH 04/19] Fix incorrect search&replace in _RoomHeader.pcss --- res/css/views/rooms/_RoomHeader.pcss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 80f43c0b317..8fa887c5647 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -20,13 +20,13 @@ limitations under the License. --RoomHeader-indicator-pulseColor: $alert; } -.mx_LegacyRoomHeader { +.mx_RoomHeader { flex: 0 0 50px; border-bottom: 1px solid $primary-hairline-color; background-color: $background; } -.mx_LegacyRoomHeader_wrapper { +.mx_RoomHeader_wrapper { height: 44px; display: flex; align-items: center; @@ -36,7 +36,7 @@ limitations under the License. border-bottom: 1px solid $separator; } -.mx_LegacyRoomHeader_name { +.mx_RoomHeader_name { flex: 0 1 auto; overflow: hidden; color: $primary-content; From cc699132107b823bbce9214b91e862acf3250975 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 10:10:05 +0100 Subject: [PATCH 05/19] lintfix --- src/components/views/rooms/RoomHeader.tsx | 1 - src/hooks/useRoomName.ts | 9 +++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 5b67357422c..b9d90b45861 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from "react"; import type { Room } from "matrix-js-sdk/src/models/room"; -import { _t } from "../../../languageHandler"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; import useRoomName from "../../../hooks/useRoomName"; diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index 42cac38bb09..fe986ca7103 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -14,9 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Room, RoomEvent } from "matrix-js-sdk"; -import { IOOBData } from "../stores/ThreepidInviteStore"; +import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { useCallback, useEffect, useState } from "react"; + +import { IOOBData } from "../stores/ThreepidInviteStore"; import { useTypedEventEmitter } from "./useEventEmitter"; import { _t } from "../languageHandler"; @@ -37,7 +38,7 @@ export default function useRoomName(room?: Room, oobData?: IOOBData): string { const setRoomName = useCallback(() => { setName(room?.name || oobName || ""); - }, [room?.name, oobData]); + }, [room?.name, oobName]); useTypedEventEmitter(room, RoomEvent.Name, () => { setRoomName(); @@ -45,7 +46,7 @@ export default function useRoomName(room?: Room, oobData?: IOOBData): string { useEffect(() => { setRoomName(); - }, [room?.name, oobData]); + }); return name; } From 8f0dfcd5ee976661f68f8e4e5b2d1fe9f7f40ee7 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 12:22:32 +0100 Subject: [PATCH 06/19] Mark room as optional in room topic hook --- src/hooks/room/useTopic.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hooks/room/useTopic.ts b/src/hooks/room/useTopic.ts index fcdc1ce4367..d6103f2ef64 100644 --- a/src/hooks/room/useTopic.ts +++ b/src/hooks/room/useTopic.ts @@ -25,14 +25,14 @@ import { Optional } from "matrix-events-sdk"; import { useTypedEventEmitter } from "../useEventEmitter"; -export const getTopic = (room: Room): Optional => { +export const getTopic = (room?: Room): Optional => { const content = room?.currentState?.getStateEvents(EventType.RoomTopic, "")?.getContent(); return !!content ? parseTopicContent(content) : null; }; -export function useTopic(room: Room): Optional { +export function useTopic(room?: Room): Optional { const [topic, setTopic] = useState(getTopic(room)); - useTypedEventEmitter(room.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => { + useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => { if (ev.getType() !== EventType.RoomTopic) return; setTopic(getTopic(room)); }); From 886d181680ff8e11069cc1cc93989f5c1041c798 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:46:51 +0100 Subject: [PATCH 07/19] Fix i18n --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f0f042cde28..06caa0c7236 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1102,6 +1102,7 @@ "Sorry — this call is currently full": "Sorry — this call is currently full", "User": "User", "Room": "Room", + "Join Room": "Join Room", "Create account": "Create account", "You made it!": "You made it!", "Find and invite your friends": "Find and invite your friends", @@ -1958,7 +1959,6 @@ "Close call": "Close call", "View chat timeline": "View chat timeline", "Room options": "Room options", - "Join Room": "Join Room", "(~%(count)s results)|other": "(~%(count)s results)", "(~%(count)s results)|one": "(~%(count)s result)", "Video rooms are a beta feature": "Video rooms are a beta feature", From b0cdc29ce8944cf757c2262826331922c81b54d6 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:47:03 +0100 Subject: [PATCH 08/19] Discard use of useCallback --- src/hooks/useRoomName.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index fe986ca7103..618f087da6f 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -15,12 +15,14 @@ limitations under the License. */ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; -import { useCallback, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { IOOBData } from "../stores/ThreepidInviteStore"; import { useTypedEventEmitter } from "./useEventEmitter"; import { _t } from "../languageHandler"; +const getRoomName = (room?: Room, oobName = "") => room?.name || oobName; + /** * Determines the room name from a combination of the room model and potential * out-of-band information @@ -34,18 +36,14 @@ export default function useRoomName(room?: Room, oobData?: IOOBData): string { oobName = oobData.name; } - const [name, setName] = useState(room?.name || oobName || ""); - - const setRoomName = useCallback(() => { - setName(room?.name || oobName || ""); - }, [room?.name, oobName]); + const [name, setName] = useState(getRoomName(room, oobName)); useTypedEventEmitter(room, RoomEvent.Name, () => { - setRoomName(); + setName(getRoomName(room, oobName)); }); useEffect(() => { - setRoomName(); + setName(getRoomName(room, oobName)); }); return name; From 2808593b6871285b90516a711cba15dc156049d0 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:48:09 +0100 Subject: [PATCH 09/19] Change export of useRoomName --- src/components/views/rooms/RoomHeader.tsx | 2 +- src/hooks/useRoomName.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index b9d90b45861..aae3c1d0776 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -18,7 +18,7 @@ import React from "react"; import type { Room } from "matrix-js-sdk/src/models/room"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; -import useRoomName from "../../../hooks/useRoomName"; +import { useRoomName } from "../../../hooks/useRoomName"; export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element { const roomName = useRoomName(room, oobData); diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index 618f087da6f..714c75ff77f 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -30,7 +30,7 @@ const getRoomName = (room?: Room, oobName = "") => room?.name || oobName; * @param oobData - out-of-band information about the room * @returns {string} the room name */ -export default function useRoomName(room?: Room, oobData?: IOOBData): string { +export function useRoomName(room?: Room, oobData?: IOOBData): string { let oobName = _t("Join Room"); if (oobData && oobData.name) { oobName = oobData.name; From 9cfbc7adc2f859b895e7903330117451cb0ebf56 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:49:13 +0100 Subject: [PATCH 10/19] fix ts issue --- src/components/views/elements/RoomName.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/RoomName.tsx b/src/components/views/elements/RoomName.tsx index 58f4f043b9a..8e3353ee003 100644 --- a/src/components/views/elements/RoomName.tsx +++ b/src/components/views/elements/RoomName.tsx @@ -36,7 +36,7 @@ const RoomName = ({ room, children }: IProps): JSX.Element => { setName(room?.name); }, [room]); - if (children) return children(name); + if (children) return children(name ?? ""); return <>{name || ""}; }; From 4f63b764411b7dc2c7949526a2b1c9b0abe0e634 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:55:09 +0100 Subject: [PATCH 11/19] lints --- src/hooks/useRoomName.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index 714c75ff77f..01e681e3967 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -21,7 +21,7 @@ import { IOOBData } from "../stores/ThreepidInviteStore"; import { useTypedEventEmitter } from "./useEventEmitter"; import { _t } from "../languageHandler"; -const getRoomName = (room?: Room, oobName = "") => room?.name || oobName; +const getRoomName = (room?: Room, oobName = ""): string => room?.name || oobName; /** * Determines the room name from a combination of the room model and potential @@ -44,7 +44,7 @@ export function useRoomName(room?: Room, oobData?: IOOBData): string { useEffect(() => { setName(getRoomName(room, oobName)); - }); + }, [room, oobName]); return name; } From 169a1cbe6b79c832b408d54ed7b2d8c81e17c4a0 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 14:45:50 +0100 Subject: [PATCH 12/19] Add room topic to room header --- res/css/views/rooms/_RoomHeader.pcss | 61 ++++++++++--------- .../views/avatars/DecoratedRoomAvatar.tsx | 4 +- src/components/views/rooms/RoomHeader.tsx | 21 ++++++- .../views/rooms/RoomHeader-test.tsx | 28 ++++++++- .../__snapshots__/RoomHeader-test.tsx.snap | 2 +- 5 files changed, 81 insertions(+), 35 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 8fa887c5647..369df9eb09c 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -14,40 +14,45 @@ See the License for the specific language governing permissions and limitations under the License. */ -:root { - --RoomHeader-indicator-dot-size: 8px; - --RoomHeader-indicator-dot-offset: -3px; - --RoomHeader-indicator-pulseColor: $alert; -} - .mx_RoomHeader { - flex: 0 0 50px; - border-bottom: 1px solid $primary-hairline-color; - background-color: $background; -} - -.mx_RoomHeader_wrapper { - height: 44px; display: flex; align-items: center; - min-width: 0; - margin: 0 20px 0 16px; - padding-top: 6px; + height: 64px; + gap: var(--cpd-space-3x); + padding: 0 var(--cpd-space-3x); border-bottom: 1px solid $separator; + background-color: $background; + + &:hover { + cursor: pointer; + } } +/* To remove when compound is integrated */ .mx_RoomHeader_name { - flex: 0 1 auto; + font: var(--cpd-font-body-lg-semibold); +} + +.mx_RoomHeader_topic { + /* To remove when compound is integrated */ + font: var(--cpd-font-body-sm-regular); + + height: 0; + opacity: 0; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; - color: $primary-content; - font: var(--cpd-font-heading-sm-semibold); - font-weight: var(--cpd-font-weight-semibold); - min-height: 24px; - align-items: center; - border-radius: 6px; - margin: 0 3px; - padding: 1px 4px; - display: flex; - user-select: none; - cursor: pointer; + word-break: break-all; + text-overflow: ellipsis; + + transition: all .3s ease; +} + +.mx_RoomHeader:hover .mx_RoomHeader_topic { + /* height needed to compute the transition, it equals to the `line-height` + value in pixels */ + height: calc($font-13px * 1.5); + opacity: 1; } diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 711bacda870..e1c71280e4b 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -86,7 +86,9 @@ export default class DecoratedRoomAvatar extends React.PureComponent -
-
+
{ + const rightPanel = RightPanelStore.instance; + rightPanel.isOpen + ? rightPanel.togglePanel(null) + : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary }); + }} + > + {room && } +
+
{roomName}
+ {roomTopic &&
{roomTopic.text}
}
); diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 6f59117fd1d..3439dde4e0e 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -21,7 +21,10 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { stubClient } from "../../../test-utils"; import RoomHeader from "../../../../src/components/views/rooms/RoomHeader"; -import type { MatrixClient } from "matrix-js-sdk/src/client"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import DMRoomMap from "../../../../src/utils/DMRoomMap"; +import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; describe("Roomeader", () => { let client: Mocked; @@ -31,7 +34,10 @@ describe("Roomeader", () => { beforeEach(async () => { stubClient(); - room = new Room(ROOM_ID, client, "@alice:example.org"); + room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org"); + DMRoomMap.setShared({ + getUserIdForRoomId: jest.fn(), + } as unknown as DMRoomMap); }); it("renders with no props", () => { @@ -55,4 +61,22 @@ describe("Roomeader", () => { ); expect(container).toHaveTextContent(OOB_NAME); }); + + it("renders the room topic", async () => { + const TOPIC = "Hello World!"; + + const roomTopic = new MatrixEvent({ + type: EventType.RoomTopic, + event_id: "$00002", + room_id: room.roomId, + sender: "@alice:example.com", + origin_server_ts: 1, + content: { topic: TOPIC }, + state_key: "", + }); + await room.addLiveEvents([roomTopic]); + + const { container } = render(); + expect(container).toHaveTextContent(TOPIC); + }); }); diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 0fafcad5ed6..809fe8e73c6 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -6,7 +6,7 @@ exports[`Roomeader renders with no props 1`] = ` class="mx_RoomHeader light-panel" >
Date: Tue, 1 Aug 2023 17:07:10 +0100 Subject: [PATCH 13/19] lintfix --- res/css/views/rooms/_RoomHeader.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 369df9eb09c..c668ace8a22 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -47,7 +47,7 @@ limitations under the License. word-break: break-all; text-overflow: ellipsis; - transition: all .3s ease; + transition: all 0.3s ease; } .mx_RoomHeader:hover .mx_RoomHeader_topic { From 21bb26a3e8d7c04345a926616d7f0e57a5409c28 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 17:11:05 +0100 Subject: [PATCH 14/19] lintfix & clamp to one line --- res/css/views/rooms/_RoomHeader.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index c668ace8a22..a1c1aca97a6 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -41,7 +41,7 @@ limitations under the License. opacity: 0; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 1; overflow: hidden; word-break: break-all; From ef03541be94db85e2887ada9de00132ae7dbf7be Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:19:15 +0100 Subject: [PATCH 15/19] Revert optimisations to DecoratedRoomAvatar --- src/components/views/avatars/DecoratedRoomAvatar.tsx | 4 +--- test/components/views/rooms/RoomHeader-test.tsx | 4 +++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index e1c71280e4b..711bacda870 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -86,9 +86,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent { beforeEach(async () => { stubClient(); - room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org"); + room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org", { + pendingEventOrdering: PendingEventOrdering.Detached, + }); DMRoomMap.setShared({ getUserIdForRoomId: jest.fn(), } as unknown as DMRoomMap); From b8311f1aeacf630fc71a5dfa8d61634845a54aa0 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:20:05 +0100 Subject: [PATCH 16/19] Add test for opening the room summary --- test/components/views/rooms/RoomHeader-test.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 7a89c8aa699..e6855822cbe 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -17,18 +17,23 @@ limitations under the License. import React from "react"; import { render } from "@testing-library/react"; import { Room } from "matrix-js-sdk/src/models/room"; -import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { EventType, MatrixEvent, PendingEventOrdering } from "matrix-js-sdk/src/matrix"; +import userEvent from "@testing-library/user-event"; import { stubClient } from "../../../test-utils"; import RoomHeader from "../../../../src/components/views/rooms/RoomHeader"; import DMRoomMap from "../../../../src/utils/DMRoomMap"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; +import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore"; +import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases"; describe("Roomeader", () => { let room: Room; const ROOM_ID = "!1:example.org"; + let setCardSpy: jest.SpyInstance | undefined; + beforeEach(async () => { stubClient(); room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org", { @@ -37,6 +42,8 @@ describe("Roomeader", () => { DMRoomMap.setShared({ getUserIdForRoomId: jest.fn(), } as unknown as DMRoomMap); + + setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard"); }); it("renders with no props", () => { @@ -78,4 +85,11 @@ describe("Roomeader", () => { const { container } = render(); expect(container).toHaveTextContent(TOPIC); }); + + it("opens the room summary", async () => { + const { container } = render(); + + await userEvent.click(container.firstChild! as Element); + expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomSummary }); + }); }); From ad0810528624a560f91cd563c2a311ae12cef602 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:20:57 +0100 Subject: [PATCH 17/19] Make transition honour prefer-reduced-motion --- res/css/views/rooms/_RoomHeader.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index a1c1aca97a6..9dfc771abed 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -47,7 +47,7 @@ limitations under the License. word-break: break-all; text-overflow: ellipsis; - transition: all 0.3s ease; + transition: all var(--transition-standard) ease; } .mx_RoomHeader:hover .mx_RoomHeader_topic { From cdd5b1543c791adb5f00c92ab7b22b05608fd4ac Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 11:04:17 +0100 Subject: [PATCH 18/19] Fallback when room is undefined --- src/components/views/rooms/RoomHeader.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 95a496f37ca..9745f77ead6 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -23,6 +23,7 @@ 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 RoomAvatar from "../avatars/RoomAvatar"; export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element { const roomName = useRoomName(room, oobData); @@ -38,7 +39,11 @@ export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: I : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary }); }} > - {room && } + {room ? ( + + ) : ( + + )}
{roomName} From e6f70eaa9c015f6cf4b8a12920d056bd8cea69c0 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 11:27:45 +0100 Subject: [PATCH 19/19] fix snapshot --- .../__snapshots__/RoomHeader-test.tsx.snap | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 809fe8e73c6..7c50d742f81 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -5,6 +5,27 @@ exports[`Roomeader renders with no props 1`] = `
+ + + +