789dba7b3d
* Remove NoOneHere disabled reason. This was used to prohibit starting calls if the user is alone in the room. Since there are currently issues with the user count calculation this can disable the button even when not appropriate. On top of that, there is a reason to start a call if the room was just created and the user is still waiting for the others to join the room to then join the call. Signed-off-by: Timo K <toger5@hotmail.de> * some ci fixes Signed-off-by: Timo K <toger5@hotmail.de> * fix test snapshots Signed-off-by: Timo K <toger5@hotmail.de> * fix test to expect enabled call buttons * Update snapshot for unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx --------- Signed-off-by: Timo K <toger5@hotmail.de> Co-authored-by: fkwp <github-fkwp@w4ve.de>
2403 lines
83 KiB
Plaintext
2403 lines
83 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 mx_MessageComposer_e2eStatus"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_e2eIconWrapper"
|
||
>
|
||
<svg
|
||
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
|
||
color="var(--cpd-color-icon-info-primary)"
|
||
fill="currentColor"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
width="12"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
|
||
/>
|
||
</svg>
|
||
</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 unencrypted 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\\ unencrypted\\ 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 mx_MessageComposer_e2eStatus"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_e2eIconWrapper"
|
||
>
|
||
<svg
|
||
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
|
||
color="var(--cpd-color-icon-info-primary)"
|
||
fill="currentColor"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
width="12"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
|
||
/>
|
||
</svg>
|
||
</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 unencrypted 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\\ unencrypted\\ 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="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="«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="false"
|
||
aria-label="Voice 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%;"
|
||
>
|
||
<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="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="«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="false"
|
||
aria-label="Voice 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%;"
|
||
>
|
||
<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"
|
||
data-testid="e2e-icon"
|
||
>
|
||
<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 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>
|
||
</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 mx_MessageComposer_e2eStatus"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_e2eIconWrapper"
|
||
>
|
||
<svg
|
||
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
|
||
color="var(--cpd-color-icon-info-primary)"
|
||
fill="currentColor"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
width="12"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
|
||
/>
|
||
</svg>
|
||
</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 unencrypted 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\\ unencrypted\\ 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>
|
||
`;
|