matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-30 02:21:17 +03:00
Code Activity

New right panel visual language (#11664)

Browse Source 
* New right panel visual language

* Upgrade Compound

* Align old room header with right panel

* Rigth panel look and feel

* Fix linting and e2e tests

* Update snapshot

* Add test

* Lint

* Remove screenshot local script

* Update snapshots and UI based on feedback

* fix i18n key

* Update right panel visuals

* Fix tests

* lintfixes

* fix tests

* fix tests

* Add tests for search icon

* Fix invite dialog spec
This commit is contained in:
Germain
2023-10-20 14:30:37 +01:00
committed by GitHub
parent a63b99f687
commit f784a085fd
31 changed files with 331 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

@ -739,7 +739,7 @@ exports[`RoomView should show error view if failed to look up room alias 1`] = `
data-room-header="legacy"
>
<div
class="mx_RoomPreviewBar dark-panel mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
>
<div
class="mx_RoomPreviewBar_message"

2
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`AppTile destroys non-persisted right panel widget on room change 1`] = `
<DocumentFragment>
<aside
class="mx_RightPanel dark-panel"
class="mx_RightPanel"
id="mx_RightPanel"
>
<div

12
test/components/views/right_panel/RoomSummaryCard-test.tsx
View File

@ -31,6 +31,7 @@ import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelS
import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
import { _t } from "../../../../src/languageHandler";
describe("<RoomSummaryCard />", () => {
const userId = "@alice:domain.org";
@ -84,6 +85,17 @@ describe("<RoomSummaryCard />", () => {
expect(container).toMatchSnapshot();
});
it("opens the search", async () => {
const onSearchClick = jest.fn();
const { getByLabelText } = getComponent({
onSearchClick,
});
const searchBtn = getByLabelText(_t("action|search"));
fireEvent.click(searchBtn);
expect(onSearchClick).toHaveBeenCalled();
});
it("opens room members list on button click", () => {
const { getByText } = getComponent();

98
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View File

@ -5,51 +5,67 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<div
class="mx_BaseCard mx_RoomSummaryCard"
>
<div
class="mx_BaseCard_header"
>
<div
class="mx_AccessibleButton mx_BaseCard_close"
data-testid="base-card-close-button"
role="button"
tabindex="0"
title="Close"
/>
<div
class="mx_RoomSummaryCard_avatar"
role="presentation"
>
<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>
<h1
class="mx_RoomSummaryCard_roomName"
title="!room:domain.org"
>
!room:domain.org
</h1>
<div
class="mx_RoomSummaryCard_alias"
title=""
/>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<header
class="mx_Flex mx_RoomSummaryCard_header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
>
<button
aria-label="Search"
class="mx_RoomSummaryCard_searchBtn"
data-state="closed"
data-testid="summary-search"
>
<div
height="100%"
width="100%"
/>
</button>
<div
class="mx_AccessibleButton mx_BaseCard_close"
data-testid="base-card-close-button"
role="button"
tabindex="0"
title="Close"
/>
</header>
<header
class="mx_RoomSummaryCard_container"
>
<div
class="mx_RoomSummaryCard_avatar"
role="presentation"
>
<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>
<h1
class="mx_RoomSummaryCard_roomName"
title="!room:domain.org"
>
!room:domain.org
</h1>
<div
class="mx_RoomSummaryCard_alias"
title=""
/>
</header>
<div
class="mx_BaseCard_Group mx_RoomSummaryCard_aboutGroup"
>

11
test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View File

@ -84,6 +84,12 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
tabindex="0"
title="Close"
/>
<span />
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<div
class="mx_UserInfo_avatar"
>
@ -141,11 +147,6 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<div
class="mx_UserInfo_container"
>

2
test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View File

@ -27,7 +27,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
role="heading"
>
<span
class="mx_RoomHeader_truncated"
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>