Update styling of UserInfo right panel card (#12788)
* Add colour to PresenceLabel in UserInfo Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update button positions & styles in UserInfo Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update UserInfo styles Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert Ignore->Block copy change Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
2920e76b64
commit
f706ac4fa1
8 changed files with 670 additions and 419 deletions
|
|
@ -56,6 +56,9 @@ import { clearAllModals, flushPromises } from "../../../test-utils";
|
|||
import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog";
|
||||
import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
|
||||
import { UIComponent } from "../../../../src/settings/UIFeature";
|
||||
import { Action } from "../../../../src/dispatcher/actions";
|
||||
import ShareDialog from "../../../../src/components/views/dialogs/ShareDialog";
|
||||
import BulkRedactDialog from "../../../../src/components/views/dialogs/BulkRedactDialog";
|
||||
|
||||
jest.mock("../../../../src/utils/direct-messages", () => ({
|
||||
...jest.requireActual("../../../../src/utils/direct-messages"),
|
||||
|
|
@ -323,7 +326,7 @@ describe("<UserInfo />", () => {
|
|||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
screen.getByRole("button", { name: "Message" });
|
||||
screen.getByRole("button", { name: "Send message" });
|
||||
});
|
||||
|
||||
it("hides the message button if the visibility customisation hides all create room features", () => {
|
||||
|
|
@ -342,6 +345,64 @@ describe("<UserInfo />", () => {
|
|||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe("Ignore", () => {
|
||||
const member = new RoomMember(defaultRoomId, defaultUserId);
|
||||
|
||||
it("shows block button when member userId does not match client userId", () => {
|
||||
// call to client.getUserId returns undefined, which will not match member.userId
|
||||
renderComponent();
|
||||
|
||||
expect(screen.getByRole("button", { name: "Ignore" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows a modal before ignoring the user", async () => {
|
||||
const originalCreateDialog = Modal.createDialog;
|
||||
const modalSpy = (Modal.createDialog = jest.fn().mockReturnValue({
|
||||
finished: Promise.resolve([true]),
|
||||
close: () => {},
|
||||
}));
|
||||
|
||||
try {
|
||||
mockClient.getIgnoredUsers.mockReturnValue([]);
|
||||
renderComponent();
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Ignore" }));
|
||||
expect(modalSpy).toHaveBeenCalled();
|
||||
expect(mockClient.setIgnoredUsers).toHaveBeenLastCalledWith([member.userId]);
|
||||
} finally {
|
||||
Modal.createDialog = originalCreateDialog;
|
||||
}
|
||||
});
|
||||
|
||||
it("cancels ignoring the user", async () => {
|
||||
const originalCreateDialog = Modal.createDialog;
|
||||
const modalSpy = (Modal.createDialog = jest.fn().mockReturnValue({
|
||||
finished: Promise.resolve([false]),
|
||||
close: () => {},
|
||||
}));
|
||||
|
||||
try {
|
||||
mockClient.getIgnoredUsers.mockReturnValue([]);
|
||||
renderComponent();
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Ignore" }));
|
||||
expect(modalSpy).toHaveBeenCalled();
|
||||
expect(mockClient.setIgnoredUsers).not.toHaveBeenCalled();
|
||||
} finally {
|
||||
Modal.createDialog = originalCreateDialog;
|
||||
}
|
||||
});
|
||||
|
||||
it("unignores the user", async () => {
|
||||
mockClient.isUserIgnored.mockReturnValue(true);
|
||||
mockClient.getIgnoredUsers.mockReturnValue([member.userId]);
|
||||
renderComponent();
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Unignore" }));
|
||||
expect(mockClient.setIgnoredUsers).toHaveBeenCalledWith([]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("with crypto enabled", () => {
|
||||
|
|
@ -801,7 +862,7 @@ describe("<DeviceItem />", () => {
|
|||
|
||||
describe("<UserOptionsSection />", () => {
|
||||
const member = new RoomMember(defaultRoomId, defaultUserId);
|
||||
const defaultProps = { member, isIgnored: false, canInvite: false, isSpace: false };
|
||||
const defaultProps = { member, canInvite: false, isSpace: false };
|
||||
|
||||
const renderComponent = (props = {}) => {
|
||||
const Wrapper = (wrapperProps = {}) => {
|
||||
|
|
@ -828,9 +889,13 @@ describe("<UserOptionsSection />", () => {
|
|||
inviteSpy.mockRestore();
|
||||
});
|
||||
|
||||
it("always shows share user button", () => {
|
||||
it("always shows share user button and clicking it should produce a ShareDialog", async () => {
|
||||
const spy = jest.spyOn(Modal, "createDialog");
|
||||
|
||||
renderComponent();
|
||||
expect(screen.getByRole("button", { name: /share link to user/i })).toBeInTheDocument();
|
||||
await userEvent.click(screen.getByRole("button", { name: "Share profile" }));
|
||||
|
||||
expect(spy).toHaveBeenCalledWith(ShareDialog, { target: defaultProps.member });
|
||||
});
|
||||
|
||||
it("does not show ignore or direct message buttons when member userId matches client userId", () => {
|
||||
|
|
@ -842,20 +907,31 @@ describe("<UserOptionsSection />", () => {
|
|||
expect(screen.queryByRole("button", { name: /message/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows ignore, direct message and mention buttons when member userId does not match client userId", () => {
|
||||
it("shows direct message and mention buttons when member userId does not match client userId", () => {
|
||||
// call to client.getUserId returns undefined, which will not match member.userId
|
||||
renderComponent();
|
||||
|
||||
expect(screen.getByRole("button", { name: /ignore/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /message/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /mention/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Send message" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Mention" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("mention button fires ComposerInsert Action", async () => {
|
||||
renderComponent();
|
||||
|
||||
const button = screen.getByRole("button", { name: "Mention" });
|
||||
await userEvent.click(button);
|
||||
expect(dis.dispatch).toHaveBeenCalledWith({
|
||||
action: Action.ComposerInsert,
|
||||
timelineRenderingType: "Room",
|
||||
userId: "@user:example.com",
|
||||
});
|
||||
});
|
||||
|
||||
it("when call to client.getRoom is null, does not show read receipt button", () => {
|
||||
mockClient.getRoom.mockReturnValueOnce(null);
|
||||
renderComponent();
|
||||
|
||||
expect(screen.queryByRole("button", { name: /jump to read receipt/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "Jump to read receipt" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("when call to client.getRoom is non-null and room.getEventReadUpTo is null, does not show read receipt button", () => {
|
||||
|
|
@ -863,7 +939,7 @@ describe("<UserOptionsSection />", () => {
|
|||
mockClient.getRoom.mockReturnValueOnce(mockRoom);
|
||||
renderComponent();
|
||||
|
||||
expect(screen.queryByRole("button", { name: /jump to read receipt/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "Jump to read receipt" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("when calls to client.getRoom and room.getEventReadUpTo are non-null, shows read receipt button", () => {
|
||||
|
|
@ -871,7 +947,7 @@ describe("<UserOptionsSection />", () => {
|
|||
mockClient.getRoom.mockReturnValueOnce(mockRoom);
|
||||
renderComponent();
|
||||
|
||||
expect(screen.getByRole("button", { name: /jump to read receipt/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Jump to read receipt" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("clicking the read receipt button calls dispatch with correct event_id", async () => {
|
||||
|
|
@ -880,7 +956,7 @@ describe("<UserOptionsSection />", () => {
|
|||
mockClient.getRoom.mockReturnValue(mockRoom);
|
||||
renderComponent();
|
||||
|
||||
const readReceiptButton = screen.getByRole("button", { name: /jump to read receipt/i });
|
||||
const readReceiptButton = screen.getByRole("button", { name: "Jump to read receipt" });
|
||||
|
||||
expect(readReceiptButton).toBeInTheDocument();
|
||||
await userEvent.click(readReceiptButton);
|
||||
|
|
@ -904,7 +980,7 @@ describe("<UserOptionsSection />", () => {
|
|||
mockClient.getRoom.mockReturnValue(mockRoom);
|
||||
renderComponent();
|
||||
|
||||
const readReceiptButton = screen.getByRole("button", { name: /jump to read receipt/i });
|
||||
const readReceiptButton = screen.getByRole("button", { name: "Jump to read receipt" });
|
||||
|
||||
expect(readReceiptButton).toBeInTheDocument();
|
||||
await userEvent.click(readReceiptButton);
|
||||
|
|
@ -964,52 +1040,6 @@ describe("<UserOptionsSection />", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("shows a modal before ignoring the user", async () => {
|
||||
const originalCreateDialog = Modal.createDialog;
|
||||
const modalSpy = (Modal.createDialog = jest.fn().mockReturnValue({
|
||||
finished: Promise.resolve([true]),
|
||||
close: () => {},
|
||||
}));
|
||||
|
||||
try {
|
||||
mockClient.getIgnoredUsers.mockReturnValue([]);
|
||||
renderComponent({ isIgnored: false });
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Ignore" }));
|
||||
expect(modalSpy).toHaveBeenCalled();
|
||||
expect(mockClient.setIgnoredUsers).toHaveBeenLastCalledWith([member.userId]);
|
||||
} finally {
|
||||
Modal.createDialog = originalCreateDialog;
|
||||
}
|
||||
});
|
||||
|
||||
it("cancels ignoring the user", async () => {
|
||||
const originalCreateDialog = Modal.createDialog;
|
||||
const modalSpy = (Modal.createDialog = jest.fn().mockReturnValue({
|
||||
finished: Promise.resolve([false]),
|
||||
close: () => {},
|
||||
}));
|
||||
|
||||
try {
|
||||
mockClient.getIgnoredUsers.mockReturnValue([]);
|
||||
renderComponent({ isIgnored: false });
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Ignore" }));
|
||||
expect(modalSpy).toHaveBeenCalled();
|
||||
expect(mockClient.setIgnoredUsers).not.toHaveBeenCalled();
|
||||
} finally {
|
||||
Modal.createDialog = originalCreateDialog;
|
||||
}
|
||||
});
|
||||
|
||||
it("unignores the user", async () => {
|
||||
mockClient.getIgnoredUsers.mockReturnValue([member.userId]);
|
||||
renderComponent({ isIgnored: true });
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Unignore" }));
|
||||
expect(mockClient.setIgnoredUsers).toHaveBeenCalledWith([]);
|
||||
});
|
||||
|
||||
it.each([
|
||||
["for a RoomMember", member, member.getMxcAvatarUrl()],
|
||||
["for a User", defaultUser, defaultUser.avatarUrl],
|
||||
|
|
@ -1020,10 +1050,10 @@ describe("<UserOptionsSection />", () => {
|
|||
mocked(startDmOnFirstMessage).mockReturnValue(deferred.promise);
|
||||
|
||||
renderComponent({ member });
|
||||
await userEvent.click(screen.getByText("Message"));
|
||||
await userEvent.click(screen.getByRole("button", { name: "Send message" }));
|
||||
|
||||
// Checking the attribute, because the button is a DIV and toBeDisabled() does not work.
|
||||
expect(screen.getByText("Message")).toHaveAttribute("disabled");
|
||||
expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
|
||||
|
||||
expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockClient, [
|
||||
new DirectoryMember({
|
||||
|
|
@ -1039,7 +1069,7 @@ describe("<UserOptionsSection />", () => {
|
|||
});
|
||||
|
||||
// Checking the attribute, because the button is a DIV and toBeDisabled() does not work.
|
||||
expect(screen.getByText("Message")).not.toHaveAttribute("disabled");
|
||||
expect(screen.getByRole("button", { name: "Send message" })).not.toBeDisabled();
|
||||
},
|
||||
);
|
||||
});
|
||||
|
|
@ -1396,10 +1426,30 @@ describe("<RoomAdminToolsContainer />", () => {
|
|||
|
||||
renderComponent({ member: defaultMemberWithPowerLevel });
|
||||
|
||||
expect(screen.getByRole("heading", { name: /admin tools/i })).toBeInTheDocument();
|
||||
expect(screen.getByText(/disinvite from room/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/ban from room/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/remove recent messages/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Disinvite from room" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Ban from room" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Remove messages" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should show BulkRedactDialog upon clicking the Remove messages button", async () => {
|
||||
const spy = jest.spyOn(Modal, "createDialog");
|
||||
|
||||
mockClient.getRoom.mockReturnValue(mockRoom);
|
||||
mockClient.getUserId.mockReturnValue("@arbitraryId:server");
|
||||
const mockMeMember = new RoomMember(mockRoom.roomId, mockClient.getUserId()!);
|
||||
mockMeMember.powerLevel = 51; // defaults to 50
|
||||
const defaultMemberWithPowerLevel = { ...defaultMember, powerLevel: 0 } as RoomMember;
|
||||
mockRoom.getMember.mockImplementation((userId) =>
|
||||
userId === mockClient.getUserId() ? mockMeMember : defaultMemberWithPowerLevel,
|
||||
);
|
||||
|
||||
renderComponent({ member: defaultMemberWithPowerLevel });
|
||||
await userEvent.click(screen.getByRole("button", { name: "Remove messages" }));
|
||||
|
||||
expect(spy).toHaveBeenCalledWith(
|
||||
BulkRedactDialog,
|
||||
expect.objectContaining({ member: defaultMemberWithPowerLevel }),
|
||||
);
|
||||
});
|
||||
|
||||
it("returns mute toggle button if conditions met", () => {
|
||||
|
|
@ -1441,10 +1491,9 @@ describe("<RoomAdminToolsContainer />", () => {
|
|||
isUpdating: true,
|
||||
});
|
||||
|
||||
const button = screen.getByText(/mute/i);
|
||||
const button = screen.getByRole("button", { name: "Mute" });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("disabled");
|
||||
expect(button).toHaveAttribute("aria-disabled", "true");
|
||||
expect(button).toBeDisabled();
|
||||
});
|
||||
|
||||
it("should not show mute button for one's own member", () => {
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 230.39999999999998px;"
|
||||
style="--cpd-avatar-size: 120px;"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
|
|
@ -126,44 +126,51 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container mx_UserInfo_separator"
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_profile"
|
||||
class="mx_Flex mx_UserInfo_profile"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
<div>
|
||||
<h2>
|
||||
<span
|
||||
aria-label="@user:example.com"
|
||||
dir="auto"
|
||||
title="@user:example.com"
|
||||
>
|
||||
@user:example.com
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_profile_mxid"
|
||||
>
|
||||
customUserIdentifier
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_profileStatus"
|
||||
<h1
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
dir="auto"
|
||||
>
|
||||
<div
|
||||
class="mx_PresenceLabel"
|
||||
class="mx_Flex"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
Unknown
|
||||
@user:example.com
|
||||
</div>
|
||||
</h1>
|
||||
<div
|
||||
class="mx_PresenceLabel mx_UserInfo_profileStatus"
|
||||
>
|
||||
Unknown
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_UserInfo_profile_mxid"
|
||||
>
|
||||
<div
|
||||
class="mx_CopyableText"
|
||||
>
|
||||
customUserIdentifier
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<h3>
|
||||
<h2>
|
||||
Security
|
||||
</h3>
|
||||
</h2>
|
||||
<p>
|
||||
Messages in this room are not end-to-end encrypted.
|
||||
</p>
|
||||
|
|
@ -201,32 +208,100 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
|||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<h3>
|
||||
Options
|
||||
</h3>
|
||||
<div>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Message
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
Send message
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_nav-hint_1gwvj_60"
|
||||
fill="currentColor"
|
||||
height="24"
|
||||
viewBox="8 0 8 24"
|
||||
width="8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
Share Link to User
|
||||
</div>
|
||||
<path
|
||||
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Share profile
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_nav-hint_1gwvj_60"
|
||||
fill="currentColor"
|
||||
height="24"
|
||||
viewBox="8 0 8 24"
|
||||
width="8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="critical"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Ignore
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_nav-hint_1gwvj_60"
|
||||
fill="currentColor"
|
||||
height="24"
|
||||
viewBox="8 0 8 24"
|
||||
width="8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -282,7 +357,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 230.39999999999998px;"
|
||||
style="--cpd-avatar-size: 120px;"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
|
|
@ -290,44 +365,51 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container mx_UserInfo_separator"
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_profile"
|
||||
class="mx_Flex mx_UserInfo_profile"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
<div>
|
||||
<h2>
|
||||
<span
|
||||
aria-label="@user:example.com"
|
||||
dir="auto"
|
||||
title="@user:example.com"
|
||||
>
|
||||
@user:example.com
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_profile_mxid"
|
||||
>
|
||||
customUserIdentifier
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_profileStatus"
|
||||
<h1
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
dir="auto"
|
||||
>
|
||||
<div
|
||||
class="mx_PresenceLabel"
|
||||
class="mx_Flex"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
Unknown
|
||||
@user:example.com
|
||||
</div>
|
||||
</h1>
|
||||
<div
|
||||
class="mx_PresenceLabel mx_UserInfo_profileStatus"
|
||||
>
|
||||
Unknown
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_UserInfo_profile_mxid"
|
||||
>
|
||||
<div
|
||||
class="mx_CopyableText"
|
||||
>
|
||||
customUserIdentifier
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<h3>
|
||||
<h2>
|
||||
Security
|
||||
</h3>
|
||||
</h2>
|
||||
<p>
|
||||
Messages in this room are not end-to-end encrypted.
|
||||
</p>
|
||||
|
|
@ -365,50 +447,134 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
|
|||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<h3>
|
||||
Options
|
||||
</h3>
|
||||
<div>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Message
|
||||
</div>
|
||||
Send message
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_nav-hint_1gwvj_60"
|
||||
fill="currentColor"
|
||||
height="24"
|
||||
viewBox="8 0 8 24"
|
||||
width="8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="primary"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Share Link to User
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
Share profile
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_nav-hint_1gwvj_60"
|
||||
fill="currentColor"
|
||||
height="24"
|
||||
viewBox="8 0 8 24"
|
||||
width="8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
Ignore
|
||||
</div>
|
||||
</div>
|
||||
<path
|
||||
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<h3>
|
||||
Admin Tools
|
||||
</h3>
|
||||
<div
|
||||
class="mx_UserInfo_buttons"
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="critical"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Deactivate user
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_nav-hint_1gwvj_60"
|
||||
fill="currentColor"
|
||||
height="24"
|
||||
viewBox="8 0 8 24"
|
||||
width="8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<button
|
||||
class="_item_1gwvj_17 _interactive_1gwvj_36"
|
||||
data-kind="critical"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="_icon_1gwvj_44"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
||||
>
|
||||
Ignore
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_nav-hint_1gwvj_60"
|
||||
fill="currentColor"
|
||||
height="24"
|
||||
viewBox="8 0 8 24"
|
||||
width="8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue