You've already forked element-web
mirror of
https://github.com/element-hq/element-web.git
synced 2025-08-06 16:22:46 +03:00
1e689ac098
* refactor: move Flex component in shared components * refactor: update imports * refactor: remove Flex pcss file * fix: Flex component css override * test: update snapshots * fix: html export * chore: add css module support to jest * chore: keep old copyright * refactor: change `mx_Flex` in `ErrorView` to `mx_ErrorView_flexContainer` * test: update snapshots * refactor: move Box component in shared components * refactor: update import and css override * test: update snapshots
2351 lines
80 KiB
Plaintext
2351 lines
80 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||
|
||
exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info box-flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby="«rg4»"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby="«rg9»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby="«rge»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby="«rgj»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby="«rgo»"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_LargeLoader"
|
||
>
|
||
<div
|
||
class="mx_Spinner"
|
||
>
|
||
<div
|
||
aria-label="Loading…"
|
||
class="mx_Spinner_icon"
|
||
data-testid="spinner"
|
||
role="progressbar"
|
||
style="width: 45px; height: 45px;"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="mx_LargeLoader_text"
|
||
>
|
||
We're creating a room with @user:example.com
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info box-flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby="«rh2»"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby="«rh7»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby="«rhc»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby="«rhh»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby="«rhm»"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main
|
||
aria-label="Room content"
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_RoomView_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
>
|
||
<li
|
||
class="mx_NewRoomIntro"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble_title"
|
||
>
|
||
End-to-end encryption isn't enabled
|
||
</div>
|
||
<div
|
||
class="mx_EventTileBubble_subtitle"
|
||
>
|
||
<span>
|
||
|
||
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
|
||
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
aria-label="Avatar"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 52px;"
|
||
>
|
||
u
|
||
</button>
|
||
<h2>
|
||
@user:example.com
|
||
</h2>
|
||
<p>
|
||
<span>
|
||
Send your first message to invite
|
||
<strong>
|
||
@user:example.com
|
||
</strong>
|
||
to chat
|
||
</span>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages"
|
||
>
|
||
<div
|
||
role="alert"
|
||
>
|
||
<div
|
||
class="mx_RoomStatusBar_unsentBadge"
|
||
>
|
||
<div
|
||
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
|
||
>
|
||
<span
|
||
class="mx_NotificationBadge_count"
|
||
>
|
||
!
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div
|
||
class="mx_RoomStatusBar_unsentTitle"
|
||
>
|
||
Some of your messages have not been sent
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_RoomStatusBar_unsentButtonBar"
|
||
>
|
||
<div
|
||
class="mx_AccessibleButton mx_RoomStatusBar_unsentRetry"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Retry
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info box-flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby="«rbo»"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby="«rbt»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby="«rc2»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby="«rc7»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby="«rcc»"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main
|
||
aria-label="Room content"
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_RoomView_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
>
|
||
<li
|
||
class="mx_NewRoomIntro"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble_title"
|
||
>
|
||
End-to-end encryption isn't enabled
|
||
</div>
|
||
<div
|
||
class="mx_EventTileBubble_subtitle"
|
||
>
|
||
<span>
|
||
|
||
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
|
||
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
aria-label="Avatar"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 52px;"
|
||
>
|
||
u
|
||
</button>
|
||
<h2>
|
||
@user:example.com
|
||
</h2>
|
||
<p>
|
||
<span>
|
||
Send your first message to invite
|
||
<strong>
|
||
@user:example.com
|
||
</strong>
|
||
to chat
|
||
</span>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send a message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ a\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info box-flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby="«rdu»"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby="«re3»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby="«re8»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby="«red»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby="«rei»"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main
|
||
aria-label="Room content"
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_RoomView_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble_title"
|
||
>
|
||
Encryption enabled
|
||
</div>
|
||
<div
|
||
class="mx_EventTileBubble_subtitle"
|
||
>
|
||
Messages in this chat will be end-to-end encrypted.
|
||
</div>
|
||
</div>
|
||
<li
|
||
class="mx_NewRoomIntro"
|
||
>
|
||
<button
|
||
aria-label="Avatar"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 52px;"
|
||
>
|
||
u
|
||
</button>
|
||
<h2>
|
||
@user:example.com
|
||
</h2>
|
||
<p>
|
||
<span>
|
||
Send your first message to invite
|
||
<strong>
|
||
@user:example.com
|
||
</strong>
|
||
to chat
|
||
</span>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send a message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ a\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView invites renders an invite room 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar mx_RoomPreviewBar_Invite mx_RoomPreviewBar_dialog"
|
||
role="complementary"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar_message"
|
||
>
|
||
<h3>
|
||
Do you want to join !2:example.org?
|
||
</h3>
|
||
<p>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="4"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 36px;"
|
||
>
|
||
!
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<span>
|
||
Invited by
|
||
<span
|
||
class="mx_RoomPreviewBar_inviter"
|
||
>
|
||
@bob:example.org
|
||
</span>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="mx_RoomPreviewBar_actions"
|
||
>
|
||
<div
|
||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Accept
|
||
</div>
|
||
<div
|
||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Decline
|
||
</div>
|
||
<button
|
||
class="_button_vczzf_8 _destructive_vczzf_107"
|
||
data-kind="tertiary"
|
||
data-size="lg"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Decline and block
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="mx_RoomPreviewBar_footer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`RoomView should not display the timeline when the room encryption is loading 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<canvas
|
||
aria-hidden="true"
|
||
height="768"
|
||
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
|
||
width="0"
|
||
/>
|
||
<div
|
||
class="mx_MainSplit"
|
||
>
|
||
<div
|
||
class="mx_RoomView_body mx_MainSplit_timeline"
|
||
data-layout="group"
|
||
>
|
||
<header
|
||
class="flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="5"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
!
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info box-flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
!12:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
aria-labelledby="«r2c»"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
aria-labelledby="«r2h»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby="«r2m»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby="«r2r»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="0 members"
|
||
aria-labelledby="«r30»"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
/>
|
||
0
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_AuxPanel"
|
||
role="region"
|
||
tabindex="-1"
|
||
>
|
||
<div />
|
||
</div>
|
||
<main
|
||
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
|
||
/>
|
||
<div
|
||
aria-label="Room status bar"
|
||
class="mx_RoomView_statusArea"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox_line"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`RoomView should not display the timeline when the room encryption is loading 2`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<canvas
|
||
aria-hidden="true"
|
||
height="768"
|
||
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
|
||
width="0"
|
||
/>
|
||
<div
|
||
class="mx_MainSplit"
|
||
>
|
||
<div
|
||
class="mx_RoomView_body mx_MainSplit_timeline"
|
||
data-layout="group"
|
||
>
|
||
<header
|
||
class="flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="5"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
!
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info box-flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
!12:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
aria-labelledby="«r2c»"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
aria-labelledby="«r2h»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby="«r2m»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby="«r2r»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="0 members"
|
||
aria-labelledby="«r30»"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
/>
|
||
0
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_AuxPanel"
|
||
role="region"
|
||
tabindex="-1"
|
||
>
|
||
<div />
|
||
</div>
|
||
<main
|
||
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<div
|
||
aria-label="Room status bar"
|
||
class="mx_RoomView_statusArea"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox_line"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer mx_MessageComposer_e2eStatus"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_e2eIconWrapper"
|
||
>
|
||
<span
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
aria-labelledby="«r3e»"
|
||
class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
|
||
>
|
||
<div
|
||
class="mx_E2EIcon_normal"
|
||
/>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send an encrypted message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ an\\ encrypted\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`RoomView should show error view if failed to look up room alias 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
|
||
role="complementary"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar_message"
|
||
>
|
||
<h3>
|
||
#addy:server does not exist.
|
||
</h3>
|
||
<p>
|
||
Are you sure you're at the right place?
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="mx_RoomPreviewBar_actions"
|
||
/>
|
||
<div
|
||
class="mx_RoomPreviewBar_footer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`RoomView video rooms should render joined video room view 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView mx_RoomView_immersive"
|
||
>
|
||
<canvas
|
||
aria-hidden="true"
|
||
height="768"
|
||
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
|
||
width="0"
|
||
/>
|
||
<div
|
||
class="mx_MainSplit"
|
||
>
|
||
<div
|
||
class="mx_RoomView_body mx_MainSplit_call"
|
||
data-layout="group"
|
||
>
|
||
<header
|
||
class="flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="4"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
!
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info box-flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
!17:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Chat"
|
||
aria-labelledby="«r7c»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class="mx_RoomHeader_toggled"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M2.95 16.3 1.5 21.25a.94.94 0 0 0 .25 1 .94.94 0 0 0 1 .25l4.95-1.45a10.2 10.2 0 0 0 2.1.712Q10.875 22 12 22a9.7 9.7 0 0 0 3.9-.788 10.1 10.1 0 0 0 3.175-2.137q1.35-1.35 2.137-3.175A9.7 9.7 0 0 0 22 12a9.7 9.7 0 0 0-.788-3.9 10.1 10.1 0 0 0-2.137-3.175q-1.35-1.35-3.175-2.137A9.7 9.7 0 0 0 12 2a9.7 9.7 0 0 0-3.9.788 10.1 10.1 0 0 0-3.175 2.137Q3.575 6.275 2.788 8.1A9.7 9.7 0 0 0 2 12q0 1.125.238 2.2.237 1.076.712 2.1"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby="«r7h»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby="«r7m»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="0 members"
|
||
aria-labelledby="«r7r»"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
/>
|
||
0
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_CallView"
|
||
role="main"
|
||
>
|
||
<div
|
||
class="mx_AppTile"
|
||
id="vY7Q4uEh9K38QgU2PomxwKpa"
|
||
>
|
||
<div
|
||
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading mx_AppTileBody--call"
|
||
>
|
||
<div
|
||
class="mx_AppTileBody_fadeInSpinner"
|
||
>
|
||
<div
|
||
class="mx_Spinner"
|
||
>
|
||
<div
|
||
class="mx_Spinner_Msg"
|
||
>
|
||
Loading…
|
||
</div>
|
||
|
||
<div
|
||
aria-label="Loading…"
|
||
class="mx_Spinner_icon"
|
||
data-testid="spinner"
|
||
role="progressbar"
|
||
style="width: 32px; height: 32px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_RightPanel_ResizeWrapper"
|
||
style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
|
||
>
|
||
<aside
|
||
class="mx_RightPanel"
|
||
data-testid="right-panel"
|
||
id="mx_RightPanel"
|
||
>
|
||
<div
|
||
class="mx_BaseCard mx_ThreadPanel mx_TimelineCard"
|
||
>
|
||
<div
|
||
class="mx_BaseCard_header"
|
||
>
|
||
<div
|
||
class="mx_BaseCard_header_title"
|
||
>
|
||
<p
|
||
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
|
||
role="heading"
|
||
>
|
||
Chat
|
||
</p>
|
||
</div>
|
||
<button
|
||
aria-labelledby="«r84»"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="secondary"
|
||
data-testid="base-card-close-button"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 28px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="mx_TimelineCard_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer mx_MessageComposer--compact"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send a message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ a\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div>
|
||
<div
|
||
class="mx_ResizeHandle--horizontal"
|
||
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|