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

Change avatar to use Compound implementation (#11448)

Browse source 
* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests
This commit is contained in:
Germain 2023-08-24 04:48:35 +01:00 • committed by GitHub
parent e34920133e
commit 09c5e06d12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
125 changed files with 936 additions and 1413 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,57 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_BaseAvatar {
position: relative;
/* In at least Firefox, the case of relative positioned inline elements */
/* (such as mx_BaseAvatar) with absolute positioned children (such as */
/* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */
/* different results during full reflow of the page vs. incremental reflow */
/* of small portions. While that's surely a browser bug, we can avoid it by */
/* using `inline-block` instead of the default `inline`. */
/* https://github.com/vector-im/element-web/issues/5594 */
/* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */
/* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */
display: inline-block;
user-select: none;
&.mx_RoomAvatar_isSpaceRoom {
&.mx_BaseAvatar_image,
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
}
.mx_BaseAvatar_initial {
position: absolute;
left: 0;
color: $avatar-initial-color;
text-align: center;
speak: none;
pointer-events: none;
font-weight: normal;
}
.mx_BaseAvatar_image {
object-fit: cover;
aspect-ratio: 1;
border-radius: 125px;
vertical-align: top;
background-color: $background;
}
/* Percy screenshot test specific CSS */
@media only percy {
/* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
.mx_BaseAvatar_initial {
.mx_BaseAvatar {
background-color: var(--percy-color-avatar) !important;
border-radius: 125px;
}
.mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial {
border-radius: 8px;
}
.mx_BaseAvatar_initial + .mx_BaseAvatar_image {
visibility: hidden;
}
}