Refactor some logic into common AvatarSetting component (#12544)

* Refactor some logic into common AvatarSetting component

We duplicated some of the logic of setting avatars between profiles &
rooms. This pulls some of that logic into the AvatarSetting component
and hopefully make things a little simpler.

* Unsed import

* Convert JS based hover to CSS

* Remove unnecessary container

* Test avatar-as-file path

* Test file upload

* Unused imports

* Add test for RoomProfileSettings

* Test removing room avatar

* Move upload control CSS too

* Remove commented code

Co-authored-by: Florian Duros <florianduros@element.io>

* Prettier

* Coments & move style to inline as per PR suggestion

* Better test names

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Fix test

Upload input doesn't have that class anymore

---------

Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
David Baker 2024-05-21 11:37:02 +01:00 committed by GitHub
parent f6e919021a
commit 3342aa5ff8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 296 additions and 164 deletions

View file

@ -23,6 +23,7 @@ limitations under the License.
.mx_AvatarSetting_hover {
transition: opacity var(--hover-transition);
opacity: 0;
/* position to place the hover bg over the entire thing */
position: absolute;
@ -50,14 +51,10 @@ limitations under the License.
}
}
&.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover {
&.mx_AvatarSetting_avatarDisplay:hover .mx_AvatarSetting_hover {
opacity: 1;
}
&:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover {
opacity: 0;
}
& > * {
box-sizing: border-box;
}

View file

@ -17,10 +17,6 @@ limitations under the License.
.mx_ProfileSettings {
border-bottom: 1px solid $quinary-content;
.mx_ProfileSettings_avatarUpload {
display: none;
}
.mx_ProfileSettings_profile {
display: flex;