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

4
res/css/structures/_RightPanel.pcss
View file

@ -111,8 +111,4 @@ limitations under the License.
margin-right: 8px;
vertical-align: middle;
}
.mx_BaseAvatar_image {
border-radius: 8px;
}
}

10
res/css/structures/_RoomStatusBar.pcss
View file

@ -25,16 +25,6 @@ limitations under the License.
text-align: left;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px;
border: 1px solid $background;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
padding-left: 1px;
padding-top: 1px;
}
.mx_RoomStatusBar_typingIndicatorRemaining {
display: inline-block;
color: #acacac;

6
res/css/structures/_SpaceHierarchy.pcss
View file

@ -108,12 +108,6 @@ limitations under the License.
}
}
.mx_SpaceHierarchy_subspace {
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
.mx_SpaceHierarchy_subspace_toggle {
position: absolute;
left: -1px;

18
res/css/structures/_SpacePanel.pcss
View file

@ -232,10 +232,6 @@ limitations under the License.
transform: rotate(45deg);
}
.mx_BaseAvatar_image {
border-radius: 8px;
}
.mx_SpaceButton_menuButton {
width: 20px;
min-width: 20px; /* yay flex */
@ -269,19 +265,6 @@ limitations under the License.
min-width: 0;
flex-grow: 1;
.mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
color: $secondary-content;
border-radius: 8px;
background-color: $panel-actions;
font-size: $font-15px !important; /* override inline style */
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-18px;
& + .mx_BaseAvatar_image {
visibility: hidden;
}
}
.mx_SpaceTreeLevel {
// Indent subspaces
padding-left: 16px;
@ -290,6 +273,7 @@ limitations under the License.
.mx_SpaceButton_avatarWrapper {
position: relative;
line-height: 0;
}
.mx_SpacePanel_badgeContainer {

4
res/css/structures/_SpaceRoomView.pcss
View file

@ -143,10 +143,6 @@ limitations under the License.
.mx_BaseAvatar {
width: 80px;
.mx_BaseAvatar_image {
border-radius: 12px;
}
}
}

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;
}
}

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

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

14
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
View file

@ -157,12 +157,6 @@ limitations under the License.
.mx_SubspaceSelector {
display: flex;
.mx_BaseAvatar_image {
border-radius: 8px;
margin: 0;
vertical-align: unset;
}
.mx_BaseAvatar {
display: inline-flex;
margin: auto 16px auto 5px;
@ -228,16 +222,10 @@ limitations under the License.
display: flex;
margin-top: 12px;
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
.mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
margin-right: 12px;
}
img.mx_RoomAvatar_isSpaceRoom,
.mx_RoomAvatar_isSpaceRoom img {
border-radius: 8px;
}
.mx_AddExistingToSpace_entry_name {
font-size: $font-15px;
line-height: 30px;

9
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
View file

@ -66,11 +66,6 @@ limitations under the License.
flex-grow: 1;
}
img.mx_RoomAvatar_isSpaceRoom,
.mx_RoomAvatar_isSpaceRoom img {
border-radius: 4px;
}
.mx_ManageRestrictedJoinRuleDialog_entry_name {
margin: 0 8px;
font-size: $font-15px;
@ -98,10 +93,6 @@ limitations under the License.
.mx_BaseAvatar {
margin-right: 12px;
}
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
.mx_ManageRestrictedJoinRuleDialog_section_info {

6
res/css/views/elements/_FacePile.pcss
View file

@ -29,14 +29,10 @@ limitations under the License.
margin-right: -8px;
}
.mx_BaseAvatar_image {
.mx_BaseAvatar {
border: 1px solid var(--facepile-background, $background);
}
.mx_BaseAvatar_initial {
margin: 1px; /* to offset the border on the image */
}
.mx_FacePile_more {
position: relative;
border-radius: 100%;

5
res/css/views/right_panel/_RoomSummaryCard.pcss
View file

@ -123,11 +123,6 @@ limitations under the License.
text-overflow: ellipsis;
overflow: hidden;
.mx_BaseAvatar_image {
vertical-align: top;
margin-right: 12px;
}
span {
color: $primary-content;
}

53
res/css/views/right_panel/_UserInfo.pcss
View file

@ -95,49 +95,14 @@ limitations under the License.
.mx_UserInfo_avatar_transition {
max-width: 30vh;
aspect-ratio: 1 / 1;
margin: 0 auto;
transition: 0.5s;
.mx_UserInfo_avatar_transition_child {
/* use padding-top instead of height to make this element square,
as the % in padding is a % of the width (including margin,
that's why we had to put the margin to center on a parent div),
and not a % of the parent height. */
padding-top: 100%;
position: relative;
.mx_BaseAvatar,
.mx_BaseAvatar_initial,
.mx_BaseAvatar_image {
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.mx_BaseAvatar {
&.mx_BaseAvatar_image {
cursor: zoom-in;
}
.mx_BaseAvatar_initial {
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
/* override the calculated sizes so that the letter isn't HUGE */
font-size: 6rem !important;
width: 100% !important;
transition: font-size 0.5s;
& + .mx_BaseAvatar_image {
cursor: default;
}
}
}
.mx_BaseAvatar,
.mx_BaseAvatar img {
width: 100%;
height: 100%;
}
}
}
@ -285,14 +250,6 @@ limitations under the License.
max-width: 72px;
margin: 0 auto;
}
.mx_UserInfo_avatar_transition_child {
.mx_BaseAvatar {
.mx_BaseAvatar_initial {
font-size: 40px !important; /* override the other override because here the avatar is smaller */
}
}
}
}
}
}

1
res/css/views/rooms/_EntityTile.pcss
View file

@ -67,6 +67,7 @@ limitations under the License.
padding-top: 4px;
padding-bottom: 4px;
position: relative;
line-height: 0;
}
.mx_EntityTile_name {

1
res/css/views/rooms/_EventTile.pcss
View file

@ -571,6 +571,7 @@ $left-gutter: 64px;
.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
line-height: 1;
margin: $spacing-block-start 0 $spacing-block-end;
}

4
res/css/views/rooms/_LegacyRoomHeader.pcss
View file

@ -163,10 +163,6 @@ limitations under the License.
cursor: pointer;
}
.mx_LegacyRoomHeader_avatar .mx_BaseAvatar_image {
object-fit: cover;
}
.mx_LegacyRoomHeader_button {
cursor: pointer;
flex: 0 0 auto;

2
res/css/views/rooms/_MemberInfo.pcss
View file

@ -96,7 +96,7 @@ limitations under the License.
display: block;
}
.mx_BaseAvatar.mx_BaseAvatar_image {
.mx_BaseAvatar img {
cursor: zoom-in;
}
}

7
res/css/views/rooms/_RoomPreviewCard.pcss
View file

@ -70,13 +70,6 @@ limitations under the License.
display: flex;
align-items: center;
.mx_RoomAvatar_isSpaceRoom {
&.mx_BaseAvatar_image,
.mx_BaseAvatar_image {
border-radius: 12px;
}
}
.mx_RoomPreviewCard_video {
width: 50px;
height: 50px;

4
res/css/views/rooms/_WhoIsTypingTile.pcss
View file

@ -31,10 +31,6 @@ limitations under the License.
margin-left: -12px;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
padding-top: 1px;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
border: 1px solid $background;
border-radius: 40px;

5
res/css/views/settings/_JoinRuleSettings.pcss
View file

@ -39,11 +39,6 @@ limitations under the License.
color: $secondary-content;
display: inline-block;
img.mx_RoomAvatar_isSpaceRoom,
.mx_RoomAvatar_isSpaceRoom img {
border-radius: 8px;
}
.mx_BaseAvatar {
margin-right: 8px;
}