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:
parent
f6e919021a
commit
3342aa5ff8
8 changed files with 296 additions and 164 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue