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

Fix consistent avatar output for Percy (#11472)

Browse source 
* Fix consistent avatar output for Percy

* Fix last room in list clipped

Fixes https://github.com/vector-im/element-web/issues/26049

* Fix decorated avatar indicator centering

Fixes https://github.com/vector-im/element-web/issues/26052

* Fix uploader centering
This commit is contained in:
Germain 2023-08-25 14:52:20 +01:00 committed by GitHub
parent c6d9228f94
commit 64f762d7b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/views/avatars/_BaseAvatar.pcss
View file

@ -19,5 +19,6 @@ limitations under the License.
/* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */ /* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
.mx_BaseAvatar { .mx_BaseAvatar {
background-color: var(--percy-color-avatar) !important; background-color: var(--percy-color-avatar) !important;
color: white !important;
} }
} }

9
res/css/views/avatars/_DecoratedRoomAvatar.pcss
View file

@ -18,7 +18,7 @@ limitations under the License.
.mx_ExtraTile { .mx_ExtraTile {
position: relative; position: relative;
contain: content; contain: content;
line-height: 1; line-height: 0;
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar { &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg"); mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg");
@ -30,10 +30,9 @@ limitations under the License.
.mx_DecoratedRoomAvatar_icon { .mx_DecoratedRoomAvatar_icon {
position: absolute; position: absolute;
/* the following percentage based sizings are to match the scalable svg mask for the cutout */ /* the following percentage based sizings are to match the scalable svg mask for the cutout */
bottom: 0; bottom: 6.25%; // 2px for a 32x32 avatar
right: 0; right: 6.25%;
transform: translate(-25%, -70%); width: 25%; // 8px for a 32x32 avatar
width: 25%;
height: 25%; height: 25%;
border-radius: 50%; border-radius: 50%;
} }

2
res/css/views/elements/_MiniAvatarUploader.pcss
View file

@ -43,6 +43,8 @@ limitations under the License.
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
line-height: 0;
.mx_MiniAvatarUploader_cameraIcon { .mx_MiniAvatarUploader_cameraIcon {
height: 100%; height: 100%;
width: 100%; width: 100%;