From fae5bf1612d86e232d30796c41c8b3fb16608edd Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 31 Jul 2024 10:23:01 +0100 Subject: [PATCH] Remove topic from new room header and expand right panel topic (#12842) * Remove topic from new Room Header Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Hide topic edit in right panel unless user has permission to edit Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Expand right panel room topic by default Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix text align of topic in right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix topic colour in right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Exclude `Add topic` from text-align Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Don't show `Add topic` if !perms Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../e2e/create-room/create-room.spec.ts | 1 - .../views/right_panel/_RoomSummaryCard.pcss | 2 ++ res/css/views/rooms/_RoomHeader.pcss | 25 ------------------- .../views/right_panel/RoomSummaryCard.tsx | 11 ++++++-- src/components/views/rooms/RoomHeader.tsx | 17 ------------- .../right_panel/RoomSummaryCard-test.tsx | 3 +-- .../RoomSummaryCard-test.tsx.snap | 20 +++++++++++++-- .../views/rooms/RoomHeader-test.tsx | 20 --------------- 8 files changed, 30 insertions(+), 69 deletions(-) diff --git a/playwright/e2e/create-room/create-room.spec.ts b/playwright/e2e/create-room/create-room.spec.ts index 651439302d..c46de21da4 100644 --- a/playwright/e2e/create-room/create-room.spec.ts +++ b/playwright/e2e/create-room/create-room.spec.ts @@ -38,6 +38,5 @@ test.describe("Create Room", () => { await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/); const header = page.locator(".mx_RoomHeader"); await expect(header).toContainText(name); - await expect(header).toContainText(topic); }); }); diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index 549eb69ee4..75f0178cdd 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -53,12 +53,14 @@ limitations under the License. .mx_RoomSummaryCard_topic { padding: 0 12px; + color: var(--cpd-color-text-secondary); .mx_Box { width: 100%; } .mx_RoomSummaryCard_topic_container { + text-align: start; display: flex; } diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 2af5e5ca10..2c659e343f 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -63,31 +63,6 @@ limitations under the License. align-items: center; } -.mx_RoomHeader_topic { - height: 0; - opacity: 0; - transition: all var(--transition-standard) ease 0.1s; - /* Emojis are rendered a bit bigger than text in the timeline - Make them compact/the same size as text here */ - .mx_Emoji { - font-size: inherit; - } -} - -.mx_RoomHeader:hover, -.mx_RoomHeader:focus-within { - .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; - - a:hover { - text-decoration: underline; - } - } -} - .mx_RoomHeader_icon { flex-shrink: 0; } diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index ff35202b34..9896289e25 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -301,17 +301,24 @@ const onRoomSettingsClick = (ev: Event): void => { }; const RoomTopic: React.FC> = ({ room }): JSX.Element | null => { - const [expanded, setExpanded] = useState(false); + const [expanded, setExpanded] = useState(true); const topic = useTopic(room); const body = topicToHtml(topic?.text, topic?.html); + const canEditTopic = useRoomState(room, (state) => + state.maySendStateEvent(EventType.RoomTopic, room.client.getSafeUserId()), + ); const onEditClick = (e: SyntheticEvent): void => { e.preventDefault(); e.stopPropagation(); defaultDispatcher.dispatch({ action: "open_room_settings" }); }; + if (!body && !canEditTopic) { + return null; + } + if (!body) { return ( > = ({ room }): JSX.Element | null - {expanded && ( + {expanded && canEditTopic && ( diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index c4b3570b31..9cf63e474d 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -30,7 +30,6 @@ import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/Ro import { useRoomName } from "../../../hooks/useRoomName"; import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; -import { useTopic } from "../../../hooks/room/useTopic"; import { useAccountData } from "../../../hooks/useAccountData"; import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers"; @@ -49,7 +48,6 @@ import { useRoomState } from "../../../hooks/useRoomState"; import RoomAvatar from "../avatars/RoomAvatar"; import { formatCount } from "../../../utils/FormattingUtils"; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; -import { Linkify, topicToHtml } from "../../../HtmlUtils"; import PosthogTrackers from "../../../PosthogTrackers"; import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton"; import { RoomKnocksBar } from "./RoomKnocksBar"; @@ -71,7 +69,6 @@ export default function RoomHeader({ const client = useMatrixClientContext(); const roomName = useRoomName(room); - const roomTopic = useTopic(room); const roomState = useRoomState(room); const members = useRoomMembers(room, 2500); @@ -117,11 +114,6 @@ export default function RoomHeader({ const notificationsEnabled = useFeatureEnabled("feature_notifications"); - const roomTopicBody = useMemo( - () => topicToHtml(roomTopic?.text, roomTopic?.html), - [roomTopic?.html, roomTopic?.text], - ); - const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join"); const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]); @@ -310,15 +302,6 @@ export default function RoomHeader({ )} - {roomTopic && ( - - {roomTopicBody} - - )} diff --git a/test/components/views/right_panel/RoomSummaryCard-test.tsx b/test/components/views/right_panel/RoomSummaryCard-test.tsx index 1ddea76382..5823128f0f 100644 --- a/test/components/views/right_panel/RoomSummaryCard-test.tsx +++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx @@ -125,7 +125,7 @@ describe("", () => { expect(container).toMatchSnapshot(); }); - it("has button to edit topic when expanded", () => { + it("has button to edit topic", () => { room.currentState.setStateEvents([ new MatrixEvent({ type: "m.room.topic", @@ -138,7 +138,6 @@ describe("", () => { }), ]); const { container, getByText } = getComponent(); - fireEvent.click(screen.getByText("This is the room's topic.")); expect(getByText("Edit")).toBeInTheDocument(); expect(container).toMatchSnapshot(); }); diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 7c1b43e7c0..e2bee3ac7c 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` has button to edit topic when expanded 1`] = ` +exports[` has button to edit topic 1`] = `
renders the room topic in the summary 1`] = `
renders the room topic in the summary 1`] = `
+
+ +

+ Edit +

+ +
{ expect(container).toHaveTextContent(ROOM_ID); }); - it("renders the room topic", async () => { - const TOPIC = "Hello World! http://element.io"; - - 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(, getWrapper()); - expect(container).toHaveTextContent(TOPIC); - expect(getByRole(container, "link")).toHaveTextContent("http://element.io"); - }); - it("opens the room summary", async () => { const { container } = render(, getWrapper());