imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New user profile UI in User Settings (#12548)

Browse source 
* 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
This commit is contained in:
David Baker 2024-06-06 14:56:38 +01:00 • committed by GitHub
parent c4c1faff97
commit cfa322cd62
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 919 additions and 307 deletions
Download patch file Download diff file Expand all files Collapse all files

26
res/css/_common.pcss
View file

@ -597,7 +597,10 @@ legend {
* Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
* For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
*/
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton),
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_ProfileSettings button
),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@ -614,11 +617,17 @@ legend {
font-family: inherit;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):last-child {
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_ProfileSettings button
):last-child {
margin-right: 0px;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_ProfileSettings button
):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
@ -627,7 +636,8 @@ legend {
.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_ProfileSettings button),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
@ -637,7 +647,8 @@ legend {
.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_ProfileSettings button),
.mx_Dialog_buttons input[type="submit"].danger {
background-color: var(--cpd-color-bg-critical-primary);
border: solid 1px var(--cpd-color-bg-critical-primary);
@ -650,7 +661,10 @@ legend {
color: var(--cpd-color-text-critical-primary);
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_ProfileSettings button
):disabled,
.mx_Dialog input[type="submit"]:disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {