diff --git a/playwright/e2e/room/room-header.spec.ts b/playwright/e2e/room/room-header.spec.ts index be39d5614f..6ecf4b3b33 100644 --- a/playwright/e2e/room/room-header.spec.ts +++ b/playwright/e2e/room/room-header.spec.ts @@ -45,8 +45,8 @@ test.describe("Room Header", () => { await expect(header.getByRole("button", { name: "Threads" })).toBeVisible(); await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible(); - // Assert that there are six buttons in total - await expect(header.getByRole("button")).toHaveCount(7); + // Assert that there are eight buttons in total + await expect(header.getByRole("button")).toHaveCount(8); await expect(header).toMatchScreenshot("room-header.png"); }); @@ -119,7 +119,7 @@ test.describe("Room Header", () => { await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible(); // Assert that there is not a button except those buttons - await expect(header.getByRole("button")).toHaveCount(6); + await expect(header.getByRole("button")).toHaveCount(7); await expect(header).toMatchScreenshot("room-header-video-room.png"); }); diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts index 57f1d175fa..9d9da67a08 100644 --- a/playwright/element-web-test.ts +++ b/playwright/element-web-test.ts @@ -345,6 +345,7 @@ export const expect = baseExpect.extend({ if (!options?.showTooltips) { css += ` + [role="tooltip"], .mx_Tooltip_visible { visibility: hidden !important; } diff --git a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png index bfbfccbaeb..d0dfbc0f68 100644 Binary files a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png and b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png differ diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png index ded42af7a1..742ed77712 100644 Binary files a/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png and b/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png index a0f68616dc..32950f4dde 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 2e5b2aa71b..16bf45435a 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details. .mx_RoomHeader { height: 64px; box-sizing: border-box; - padding: 0 var(--cpd-space-3x); + padding: 0 var(--cpd-space-3x) 0 calc(var(--cpd-space-3x) + var(--cpd-space-1-5x)); border-bottom: 1px solid $separator; background-color: $background; transition: all 0.2s ease; @@ -31,6 +31,8 @@ Please see LICENSE files in the repository root for full details. cursor: pointer; gap: var(--cpd-space-3x); text-align: left; + height: 100%; + padding: 0; } .mx_RoomHeader_info { diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index 63beae20cf..db74d7b95e 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react"; +import React, { AriaRole, forwardRef, useCallback, useContext, useEffect, useState } from "react"; import classNames from "classnames"; import { ClientEvent, SyncState } from "matrix-js-sdk/src/matrix"; import { Avatar } from "@vector-im/compound-web"; @@ -33,6 +33,7 @@ interface IProps { className?: string; tabIndex?: number; altText?: string; + role?: AriaRole; } const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => { diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index b61f8fc620..fae9e264ae 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -50,6 +50,8 @@ import WithPresenceIndicator, { useDmMember } from "../avatars/WithPresenceIndic import { IOOBData } from "../../../stores/ThreepidInviteStore"; import RoomContext from "../../../contexts/RoomContext"; import { MainSplitContentType } from "../../structures/RoomView"; +import defaultDispatcher from "../../../dispatcher/dispatcher.ts"; +import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog.tsx"; export default function RoomHeader({ room, @@ -229,18 +231,33 @@ export default function RoomHeader({ roomContext.mainSplitContentType === MainSplitContentType.MaximisedWidget || roomContext.mainSplitContentType === MainSplitContentType.Call; + const onAvatarClick = (): void => { + defaultDispatcher.dispatch({ + action: "open_room_settings", + initial_tab_id: RoomSettingsTab.General, + }); + }; + return ( <> + + {/* We hide this from the tabIndex list as it is a pointer shortcut and superfluous for a11y */} + +