PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add in-progress view to display name EditInPlace (#12609)

Browse source 
* Add in-progress view to display name EditInPlace

Requires https://github.com/element-hq/compound-web/pull/180

* Update to new compound-web

for editinplace component with spinner

* Update snapshots

for https://github.com/element-hq/compound-web/pull/178

* Update screenshots

* Remove margin

which isn't necessary now there's no 'Remove' link on the bottom

* Update screenshots
This commit is contained in:
David Baker 2024-06-14 15:16:13 +01:00 committed by GitHub
parent 6fc9d7641c
commit 650b9cb0cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 29 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -77,7 +77,7 @@
"@sentry/browser": "^8.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@vector-im/compound-design-tokens": "^1.2.0",
"@vector-im/compound-web": "^4.4.1",
"@vector-im/compound-web": "^4.6.0",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",
"@zxcvbn-ts/language-en": "^3.0.2",

BIN
playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

BIN
playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

3
res/css/views/settings/_UserProfileSettings.pcss
View file

@ -21,12 +21,11 @@ limitations under the License.
display: flex;
margin-top: var(--cpd-space-6x);
gap: 16px;
/* This is temporary until the 'Remove' link is replaced by a context menu. */
margin-bottom: 20px;
.mx_UserProfileSettings_profile_displayName {
flex-grow: 1;
width: 100%;
gap: 0;
}
}

1
src/components/views/settings/UserProfileSettings.tsx
View file

@ -164,6 +164,7 @@ const UserProfileSettings: React.FC = () => {
saveButtonLabel={_t("common|save")}
cancelButtonLabel={_t("common|cancel")}
savedLabel={_t("common|saved")}
savingLabel={_t("common|updating")}
onChange={onDisplayNameChanged}
onCancel={onDisplayNameCancel}
onSave={onDisplayNameSave}

1
src/i18n/strings/en_EN.json
View file

@ -573,6 +573,7 @@
"unnamed_space": "Unnamed Space",
"unsent": "Unsent",
"unverified": "Unverified",
"updating": "Updating...",
"user": "User",
"user_avatar": "Profile picture",
"username": "Username",

33
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file

@ -123,10 +123,10 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
data-orientation="horizontal"
role="separator"
/>
<label
<div
aria-checked="false"
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
for=":r3:"
role="menuitemcheckbox"
>
<div
@ -135,11 +135,12 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
height="24"
width="24"
/>
<span
<label
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
for=":r3:"
>
Favourite
</span>
</label>
<div
class="_container_ik1u1_18"
>
@ -152,7 +153,7 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
class="_ui_ik1u1_42"
/>
</div>
</label>
</div>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
@ -520,10 +521,10 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-orientation="horizontal"
role="separator"
/>
<label
<div
aria-checked="false"
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
for=":r1:"
role="menuitemcheckbox"
>
<div
@ -532,11 +533,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
height="24"
width="24"
/>
<span
<label
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
for=":r1:"
>
Favourite
</span>
</label>
<div
class="_container_ik1u1_18"
>
@ -549,7 +551,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
class="_ui_ik1u1_42"
/>
</div>
</label>
</div>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
@ -928,10 +930,10 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
data-orientation="horizontal"
role="separator"
/>
<label
<div
aria-checked="false"
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
for=":r2:"
role="menuitemcheckbox"
>
<div
@ -940,11 +942,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
height="24"
width="24"
/>
<span
<label
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
for=":r2:"
>
Favourite
</span>
</label>
<div
class="_container_ik1u1_18"
>
@ -957,7 +960,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
class="_ui_ik1u1_42"
/>
</div>
</label>
</div>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"

40
yarn.lock
View file

@ -3235,10 +3235,10 @@
dependencies:
svg2vectordrawable "^2.9.1"
"@vector-im/compound-web@^4.4.1":
version "4.4.1"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.4.1.tgz#378c6874888becd4b6dd3541904f63300b9ba09a"
integrity sha512-KLYSU8GxR8EBuz+gKSoLLs4+s5xV4stUDbqJu5GG52OmO3YQlvmz/e5/uHYvzfbqBBU5dMmZhz5bdJJ38qxHPQ==
"@vector-im/compound-web@^4.6.0":
version "4.6.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.6.0.tgz#3fcdbf11f911580aa90c56fd2894cfc3e3848844"
integrity sha512-N/Q6FX1v1P7EWHQB8lj8tdBgLIDy7xkz8hnNschW/q5PrasT4kzHlBy0rvcqfcYUBu1puwQCBpVEz8IuTv452g==
dependencies:
"@floating-ui/react" "^0.26.9"
"@floating-ui/react-dom" "^2.0.8"
@ -3250,7 +3250,6 @@
"@radix-ui/react-tooltip" "^1.0.6"
"@storybook/manager-api" "^8.1.1"
classnames "^2.3.2"
graphemer "^1.4.0"
vaul "^0.7.0"
"@zxcvbn-ts/core@^3.0.4":
@ -8918,16 +8917,7 @@ string-length@^4.0.1:
char-regex "^1.0.2"
strip-ansi "^6.0.0"
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"
string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -9033,14 +9023,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -9870,7 +9853,7 @@ which@^2.0.1:
dependencies:
isexe "^2.0.0"
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -9888,15 +9871,6 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"