mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-29 14:00:48 +08:00
cfa322cd62
* New user profile UI in User Settings Using new Edit In Place component. * Show avatar upload error * Fix avatar upload error * Wire up errors & feedback for display name setting * Implement avatar upload / remove progress toast * Add 768px breakpoint * Fix room profile display * Update to released compund-web with required components / fixes * Require compound-web 4.4.0 because we do need it * Update snapshots Because of course all the auto-generated IDs of unrelated things have changed. * Fix duplicate import * Fix CSS comment * Update snapshot * Run all the tests so the ids stay the same * Start of a test for ProfileSettings * More tests * Test that a toast appears * Test ToastRack * Update snapshots * Add the usernamee control * Fix playwright tests * New compound version for editinplace fixes * Fix useId to not just generate a constant ID * Use the label in the username component * Fix widths of test boxes * Update screenshots * Put ^ back on compound-web version * Split CSS for room & user profile settings and name the components correspondingly * Fix playwright test * Update room settings screenshot * Use original screenshot instead * Fix styling of unrelated buttons Needed to be added in other places otherwise the specificity changes. Also put the old screenshots back. * Add copyright year * Fix copyright year
551 lines
17 KiB
Plaintext
551 lines
17 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
|
|
<div
|
|
aria-labelledby="radix-16"
|
|
aria-orientation="vertical"
|
|
class="_menu_1x5h1_17"
|
|
data-align="start"
|
|
data-orientation="vertical"
|
|
data-radix-menu-content=""
|
|
data-side="top"
|
|
data-state="open"
|
|
dir="ltr"
|
|
id="radix-17"
|
|
role="menu"
|
|
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
|
|
tabindex="-1"
|
|
>
|
|
<h3
|
|
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
|
|
id=":r6:"
|
|
>
|
|
Threads activity
|
|
</h3>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_rows"
|
|
>
|
|
<button
|
|
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
|
|
data-kind="primary"
|
|
data-orientation="vertical"
|
|
data-radix-collection-item=""
|
|
role="menuitem"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
class="_icon_1gwvj_44"
|
|
>
|
|
<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: 32px;"
|
|
>
|
|
T
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
|
>
|
|
This is a real highlight
|
|
</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="_nav-hint_1gwvj_60"
|
|
fill="currentColor"
|
|
height="24"
|
|
viewBox="8 0 8 24"
|
|
width="8"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
|
/>
|
|
</svg>
|
|
<div
|
|
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
|
|
>
|
|
<span
|
|
class="mx_NotificationBadge_count"
|
|
/>
|
|
</div>
|
|
</button>
|
|
<button
|
|
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
|
|
data-kind="primary"
|
|
data-orientation="vertical"
|
|
data-radix-collection-item=""
|
|
role="menuitem"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
class="_icon_1gwvj_44"
|
|
>
|
|
<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: 32px;"
|
|
>
|
|
A
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
|
>
|
|
A notification
|
|
</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="_nav-hint_1gwvj_60"
|
|
fill="currentColor"
|
|
height="24"
|
|
viewBox="8 0 8 24"
|
|
width="8"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
|
/>
|
|
</svg>
|
|
<div
|
|
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_dot"
|
|
>
|
|
<span
|
|
class="mx_NotificationBadge_count"
|
|
/>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`ThreadsActivityCentre should close the release announcement when the TAC button is clicked 1`] = `
|
|
<body
|
|
data-scroll-locked="1"
|
|
style="pointer-events: none;"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
data-aria-hidden="true"
|
|
data-radix-focus-guard=""
|
|
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
|
|
tabindex="0"
|
|
/>
|
|
<div
|
|
aria-hidden="true"
|
|
data-aria-hidden="true"
|
|
>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_container"
|
|
>
|
|
<button
|
|
aria-controls="radix-3"
|
|
aria-disabled="false"
|
|
aria-expanded="true"
|
|
aria-haspopup="menu"
|
|
aria-label="Threads"
|
|
class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
|
|
data-state="open"
|
|
id="radix-2"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
type="button"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div
|
|
class="mx_ThreadsActivityCentreButton_Icon"
|
|
/>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-radix-popper-content-wrapper=""
|
|
dir="ltr"
|
|
style="position: fixed; left: 0px; top: 0px; transform: translate(0px, -8px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
|
|
>
|
|
<div
|
|
aria-labelledby="radix-2"
|
|
aria-orientation="vertical"
|
|
class="_menu_1x5h1_17"
|
|
data-align="start"
|
|
data-orientation="vertical"
|
|
data-radix-menu-content=""
|
|
data-side="top"
|
|
data-state="open"
|
|
dir="ltr"
|
|
id="radix-3"
|
|
role="menu"
|
|
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
|
|
tabindex="-1"
|
|
>
|
|
<h3
|
|
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
|
|
id=":r1:"
|
|
>
|
|
Threads activity
|
|
</h3>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_rows"
|
|
>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_emptyCaption"
|
|
>
|
|
You don't have rooms with thread notifications yet.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span
|
|
aria-hidden="true"
|
|
data-aria-hidden="true"
|
|
data-radix-focus-guard=""
|
|
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
|
|
tabindex="0"
|
|
/>
|
|
</body>
|
|
`;
|
|
|
|
exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
|
|
<div
|
|
aria-labelledby="radix-22"
|
|
aria-orientation="vertical"
|
|
class="_menu_1x5h1_17"
|
|
data-align="start"
|
|
data-orientation="vertical"
|
|
data-radix-menu-content=""
|
|
data-side="top"
|
|
data-state="open"
|
|
dir="ltr"
|
|
id="radix-23"
|
|
role="menu"
|
|
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
|
|
tabindex="-1"
|
|
>
|
|
<h3
|
|
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
|
|
id=":r8:"
|
|
>
|
|
Threads activity
|
|
</h3>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_rows"
|
|
>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_emptyCaption"
|
|
>
|
|
You don't have rooms with thread notifications yet.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
|
|
<div
|
|
aria-labelledby="radix-24"
|
|
aria-orientation="vertical"
|
|
class="_menu_1x5h1_17"
|
|
data-align="start"
|
|
data-orientation="vertical"
|
|
data-radix-menu-content=""
|
|
data-side="top"
|
|
data-state="open"
|
|
dir="ltr"
|
|
id="radix-25"
|
|
role="menu"
|
|
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
|
|
tabindex="-1"
|
|
>
|
|
<h3
|
|
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
|
|
id=":r9:"
|
|
>
|
|
Threads activity
|
|
</h3>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_rows"
|
|
>
|
|
<button
|
|
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
|
|
data-kind="primary"
|
|
data-orientation="vertical"
|
|
data-radix-collection-item=""
|
|
role="menuitem"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
class="_icon_1gwvj_44"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="5"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 32px;"
|
|
>
|
|
T
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
|
>
|
|
This is a third real highlight
|
|
</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="_nav-hint_1gwvj_60"
|
|
fill="currentColor"
|
|
height="24"
|
|
viewBox="8 0 8 24"
|
|
width="8"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
|
/>
|
|
</svg>
|
|
<div
|
|
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
|
|
>
|
|
<span
|
|
class="mx_NotificationBadge_count"
|
|
/>
|
|
</div>
|
|
</button>
|
|
<button
|
|
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
|
|
data-kind="primary"
|
|
data-orientation="vertical"
|
|
data-radix-collection-item=""
|
|
role="menuitem"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
class="_icon_1gwvj_44"
|
|
>
|
|
<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: 32px;"
|
|
>
|
|
T
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
|
>
|
|
This is a real highlight
|
|
</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="_nav-hint_1gwvj_60"
|
|
fill="currentColor"
|
|
height="24"
|
|
viewBox="8 0 8 24"
|
|
width="8"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
|
/>
|
|
</svg>
|
|
<div
|
|
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
|
|
>
|
|
<span
|
|
class="mx_NotificationBadge_count"
|
|
/>
|
|
</div>
|
|
</button>
|
|
<button
|
|
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
|
|
data-kind="primary"
|
|
data-orientation="vertical"
|
|
data-radix-collection-item=""
|
|
role="menuitem"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
class="_icon_1gwvj_44"
|
|
>
|
|
<span
|
|
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
|
data-color="4"
|
|
data-testid="avatar-img"
|
|
data-type="round"
|
|
role="presentation"
|
|
style="--cpd-avatar-size: 32px;"
|
|
>
|
|
T
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
|
|
>
|
|
This is a second real highlight
|
|
</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="_nav-hint_1gwvj_60"
|
|
fill="currentColor"
|
|
height="24"
|
|
viewBox="8 0 8 24"
|
|
width="8"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
|
/>
|
|
</svg>
|
|
<div
|
|
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
|
|
>
|
|
<span
|
|
class="mx_NotificationBadge_count"
|
|
/>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`ThreadsActivityCentre should render the release announcement 1`] = `
|
|
<body>
|
|
<div
|
|
data-floating-ui-inert=""
|
|
>
|
|
<div
|
|
class="mx_ThreadsActivityCentre_container"
|
|
>
|
|
<button
|
|
aria-controls="floating-ui-6"
|
|
aria-describedby="floating-ui-6"
|
|
aria-expanded="true"
|
|
aria-haspopup="dialog"
|
|
aria-label="Threads"
|
|
class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div
|
|
class="mx_ThreadsActivityCentreButton_Icon"
|
|
/>
|
|
</div>
|
|
</button>
|
|
<span
|
|
data-floating-ui-focus-guard=""
|
|
data-type="outside"
|
|
role="button"
|
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
|
|
tabindex="0"
|
|
/>
|
|
<span
|
|
aria-owns="floating-ui-12"
|
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
|
|
/>
|
|
<span
|
|
data-floating-ui-focus-guard=""
|
|
data-type="outside"
|
|
role="button"
|
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-floating-ui-portal=""
|
|
id="floating-ui-12"
|
|
>
|
|
<span
|
|
data-floating-ui-focus-guard=""
|
|
data-floating-ui-inert=""
|
|
data-type="inside"
|
|
role="button"
|
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
|
|
tabindex="0"
|
|
/>
|
|
<div
|
|
aria-describedby="floating-ui-5"
|
|
aria-labelledby="floating-ui-4"
|
|
class="_content_1oa1y_17"
|
|
id="floating-ui-6"
|
|
role="dialog"
|
|
style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
|
|
tabindex="-1"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="_arrow_1oa1y_62"
|
|
height="20"
|
|
style="position: absolute; pointer-events: none; right: calc(100% - 0px); transform: rotate(90deg);"
|
|
viewBox="0 0 20 20"
|
|
width="20"
|
|
>
|
|
<path
|
|
d="M0,0 H20 L10,12 Q10,12 10,12 Z"
|
|
stroke="none"
|
|
/>
|
|
<clippath
|
|
id="floating-ui-13"
|
|
>
|
|
<rect
|
|
height="20"
|
|
width="20"
|
|
x="0"
|
|
y="0"
|
|
/>
|
|
</clippath>
|
|
</svg>
|
|
<h3
|
|
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 _header_1oa1y_46"
|
|
id="floating-ui-4"
|
|
>
|
|
Threads Activity Centre
|
|
</h3>
|
|
<span
|
|
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _description_1oa1y_52"
|
|
id="floating-ui-5"
|
|
>
|
|
Threads notifications have moved, find them here from now on.
|
|
</span>
|
|
<button
|
|
class="_button_dyfp8_17 _button_1oa1y_57"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
<span
|
|
data-floating-ui-focus-guard=""
|
|
data-floating-ui-inert=""
|
|
data-type="inside"
|
|
role="button"
|
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
</body>
|
|
`;
|