95430cecbc
* Add notification dots to thread summary icons Adopts new IndicatorIcon from compound to have threads icons with indicator dot (that aren't also buttons). Adds green & red dots on the threads icon in the thread summary to indicate notifications. Changes the notification level dots colours in the threads panel to be green to match. * Update test for new CSS class * Update snapshots with new class name * Another snapshot update for new class name * Replace more uses of old class name in tests * More snapshot updates for new class name * Unsure how this ever worked in chronological mode * More snapshot updates * Fix dot colours * Upgrade to compound-web 3 * Fix computed notification levels * Add test for notificationLevelToIndicator
96 lines
2.7 KiB
Text
96 lines
2.7 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`RoomHeader does not show the face pile for DMs 1`] = `
|
|
<DocumentFragment>
|
|
<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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
|
|
data-color="7"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 40px;"
|
|
>
|
|
!
|
|
</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"
|
|
>
|
|
!1:example.org
|
|
</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="true"
|
|
aria-label="There's no one here to call"
|
|
class="_icon-button_16nk7_17"
|
|
data-state="closed"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_jtb4d_26"
|
|
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-disabled="true"
|
|
aria-label="There's no one here to call"
|
|
class="_icon-button_16nk7_17"
|
|
data-state="closed"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_jtb4d_26"
|
|
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
<button
|
|
aria-label="Threads"
|
|
class="_icon-button_16nk7_17"
|
|
data-state="closed"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_jtb4d_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
</DocumentFragment>
|
|
`;
|