1117 lines
33 KiB
Plaintext
1117 lines
33 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="mx_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);"
|
|
>
|
|
<button
|
|
aria-label="Room info"
|
|
class="mx_RoomHeader_infoWrapper"
|
|
tabindex="0"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="3"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 40px;"
|
|
>
|
|
u
|
|
</span>
|
|
<div
|
|
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
|
style="--mx-box-flex: 1;"
|
|
>
|
|
<div
|
|
aria-level="1"
|
|
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
|
|
dir="auto"
|
|
role="heading"
|
|
>
|
|
<span
|
|
class="mx_RoomHeader_truncated mx_lineClamp"
|
|
>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="mx_Flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Video call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Voice call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Room info"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Threads"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
|
|
>
|
|
<div
|
|
aria-label="2 members"
|
|
class="mx_AccessibleButton mx_FacePile"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_stacked-avatars_mcap2_111"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="2"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 20px;"
|
|
>
|
|
u
|
|
</span>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
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="mx_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);"
|
|
>
|
|
<button
|
|
aria-label="Room info"
|
|
class="mx_RoomHeader_infoWrapper"
|
|
tabindex="0"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="3"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 40px;"
|
|
>
|
|
u
|
|
</span>
|
|
<div
|
|
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
|
style="--mx-box-flex: 1;"
|
|
>
|
|
<div
|
|
aria-level="1"
|
|
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
|
|
dir="auto"
|
|
role="heading"
|
|
>
|
|
<span
|
|
class="mx_RoomHeader_truncated mx_lineClamp"
|
|
>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="mx_Flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Video call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Voice call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Room info"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Threads"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
|
|
>
|
|
<div
|
|
aria-label="2 members"
|
|
class="mx_AccessibleButton mx_FacePile"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_stacked-avatars_mcap2_111"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="2"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 20px;"
|
|
>
|
|
u
|
|
</span>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
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
|
|
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_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
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
|
|
<b>
|
|
@user:example.com
|
|
</b>
|
|
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="mx_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);"
|
|
>
|
|
<button
|
|
aria-label="Room info"
|
|
class="mx_RoomHeader_infoWrapper"
|
|
tabindex="0"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="3"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 40px;"
|
|
>
|
|
u
|
|
</span>
|
|
<div
|
|
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
|
style="--mx-box-flex: 1;"
|
|
>
|
|
<div
|
|
aria-level="1"
|
|
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
|
|
dir="auto"
|
|
role="heading"
|
|
>
|
|
<span
|
|
class="mx_RoomHeader_truncated mx_lineClamp"
|
|
>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="mx_Flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Video call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Voice call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Room info"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Threads"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
|
|
>
|
|
<div
|
|
aria-label="2 members"
|
|
class="mx_AccessibleButton mx_FacePile"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_stacked-avatars_mcap2_111"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="2"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 20px;"
|
|
>
|
|
u
|
|
</span>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
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
|
|
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_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
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
|
|
<b>
|
|
@user:example.com
|
|
</b>
|
|
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="mx_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);"
|
|
>
|
|
<button
|
|
aria-label="Room info"
|
|
class="mx_RoomHeader_infoWrapper"
|
|
tabindex="0"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="3"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 40px;"
|
|
>
|
|
u
|
|
</span>
|
|
<div
|
|
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
|
style="--mx-box-flex: 1;"
|
|
>
|
|
<div
|
|
aria-level="1"
|
|
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
|
|
dir="auto"
|
|
role="heading"
|
|
>
|
|
<span
|
|
class="mx_RoomHeader_truncated mx_lineClamp"
|
|
>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="mx_Flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Video call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Voice call"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Room info"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Threads"
|
|
class="_icon-button_bh2qc_17"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
|
|
>
|
|
<div
|
|
aria-label="2 members"
|
|
class="mx_AccessibleButton mx_FacePile"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_stacked-avatars_mcap2_111"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="2"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 20px;"
|
|
>
|
|
u
|
|
</span>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
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
|
|
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_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
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
|
|
<b>
|
|
@user:example.com
|
|
</b>
|
|
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 should show error view if failed to look up room alias 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_RoomView"
|
|
data-room-header="new"
|
|
>
|
|
<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>
|
|
`;
|