Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Change avatar to use Compound implementation #11448

Merged
merged 16 commits into from
Aug 24, 2023
Merged

Change avatar to use Compound implementation #11448

merged 16 commits into from
Aug 24, 2023

Conversation

germain-gg
Copy link
Contributor

@germain-gg germain-gg commented Aug 22, 2023 •
edited by github-actions bot
Loading

For element-hq/element-web#25883
This pull request took over #11393, which became stale and difficult to update.

Changes the BaseAvatar implementation to use the Compound Avatar

Apologies for the slightly large diff, here are a couple of noteworthy things to know that will make review easier:

  • width and height prop have been changed to the single size prop
  • size takes a value with its unit (any CSS unit), hence why it's a string
  • Most of the relevant changes are in BaseAvatar.tsx and the .pcss files.

Here are a couple of examples of the UI update. Please use the deploy preview for a comprehensive overview, I will not list every scenarios here

Screenshot 2023-08-22 at 16 15 14 Screenshot 2023-08-22 at 16 14 32 Screenshot 2023-08-22 at 16 14 15

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

Here's what your changelog entry will look like:

✨ Features

  • Change avatar to use Compound implementation (#11448).

@germain-gg germain-gg added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Aug 22, 2023
@germain-gg germain-gg changed the title germain gg/compound avatar Change avatar to use Compound implementation Aug 22, 2023
This was referenced Aug 22, 2023
Closed
Closed
@germain-gg germain-gg marked this pull request as ready for review August 22, 2023 16:22
@germain-gg germain-gg requested review from a team as code owners August 22, 2023 16:22
@kerryarchibald
Copy link
Contributor

Found a couple of issues in the deployment
Opening a profile in the right panel:
Screenshot 2023-08-23 at 14 48 07
Screenshot 2023-08-23 at 14 47 53

Last item in the room list is clipped, not sure if directly related to this but it doesn't repro on develop. (Are we doing some ugly magic number calculation on room list item height?)
Screenshot 2023-08-23 at 14 50 57
Screenshot 2023-08-23 at 14 51 14

kerryarchibald
kerryarchibald reviewed Aug 23, 2023
View reviewed changes
Copy link
Contributor

@kerryarchibald kerryarchibald left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look good. Played around on the deployment and found a couple of issues with the room list and right panel.

@t3chguy t3chguy added the X-Needs-Percy Whether to run Percy screenshot tests in Merge Queue label Aug 23, 2023
@germain-gg germain-gg enabled auto-merge August 23, 2023 14:59
@germain-gg germain-gg added this pull request to the merge queue Aug 24, 2023
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Aug 24, 2023
@kerryarchibald kerryarchibald removed the X-Needs-Percy Whether to run Percy screenshot tests in Merge Queue label Aug 24, 2023
@kerryarchibald
Copy link
Contributor

Percy looks ok, removing X-Needs-Percy so it can make it through the merge queue

@kerryarchibald kerryarchibald added this pull request to the merge queue Aug 24, 2023
Merged via the queue into develop with commit 09c5e06 Aug 24, 2023
@kerryarchibald kerryarchibald deleted the germain-gg/compound-avatar branch August 24, 2023 04:20
@robintown robintown mentioned this pull request Aug 26, 2023
Closed
@t3chguy t3chguy mentioned this pull request Sep 5, 2023
Closed
@aceArt-GmbH
Copy link

The new avatars do not seem to respect the theme avatar-background-colors property.
Is this intentionally or just at the moment broken?

@t3chguy
Copy link
Member

t3chguy commented Sep 14, 2023

@aceArt-GmbH I believe it is intentional, avatars now follow displayname colours 1:1

@aceArt-GmbH
Copy link

@aceArt-GmbH I believe it is intentional, avatars now follow displayname colours 1:1

Should I send a PR removing the documentation for the avatar theme setting then?
cc element-hq/element-web#26285

@t3chguy
Copy link
Member

t3chguy commented Sep 14, 2023

I'm not on the compound team so best to wait for them to give an authoritative response

@t3chguy t3chguy mentioned this pull request Sep 19, 2023
Closed
@t3chguy t3chguy mentioned this pull request Sep 28, 2023
Closed
netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this pull request Sep 30, 2023
@Midar
Update chat/element-web to 1.11.45
d259ee9 
Changes in [1.11.45](https://github.com/vector-im/element-web/releases/tag/v1.11.45) (2023-09-29)
=================================================================================================

## 🐛 Bug Fixes
 * Fix Emoji font on Safari 17 ([\#11673](matrix-org/matrix-react-sdk#11673)).

Changes in [1.11.44](https://github.com/vector-im/element-web/releases/tag/v1.11.44) (2023-09-26)
=================================================================================================

## ✨ Features
 * Make video & voice call buttons pin conference widget if unpinned ([\#11576](matrix-org/matrix-react-sdk#11576)). Fixes vector-im/customer-retainer#72.
 * OIDC: persist refresh token ([\#11249](matrix-org/matrix-react-sdk#11249)). Contributed by @kerryarchibald.
 * ElementR: Cross user verification ([\#11364](matrix-org/matrix-react-sdk#11364)). Fixes #25752. Contributed by @florianduros.
 * Default intentional mentions ([\#11602](matrix-org/matrix-react-sdk#11602)).
 * Notify users about denied access on ask-to-join  rooms ([\#11480](matrix-org/matrix-react-sdk#11480)). Contributed by @nurjinjafar.
 * Allow setting knock room directory visibility ([\#11529](matrix-org/matrix-react-sdk#11529)). Contributed by @charlynguyen.

## 🐛 Bug Fixes
 * Revert "Fix regression around FacePile with overflow (#11527)" ([\#11634](matrix-org/matrix-react-sdk#11634)). Fixes #26209.
 * Escape placeholder before injecting it into the style ([\#11607](matrix-org/matrix-react-sdk#11607)).
 * Move ViewUser action callback to RoomView ([\#11495](matrix-org/matrix-react-sdk#11495)). Fixes #26040.
 * Fix room timeline search toggling behaviour edge case ([\#11605](matrix-org/matrix-react-sdk#11605)). Fixes #26105.
 * Avoid rendering view-message link in RoomKnocksBar unnecessarily ([\#11598](matrix-org/matrix-react-sdk#11598)). Contributed by @charlynguyen.
 * Use knock rooms sync to reflect the knock state ([\#11596](matrix-org/matrix-react-sdk#11596)). Fixes #26043 and #26044. Contributed by @charlynguyen.
 * Fix avatar in right panel not using the correct font ([\#11593](matrix-org/matrix-react-sdk#11593)). Fixes #26061. Contributed by @MidhunSureshR.
 * Add waits in Spotlight Cypress tests, hoping this unflakes them ([\#11590](matrix-org/matrix-react-sdk#11590)). Fixes #26053, #26140 #26139 and #26138. Contributed by @andybalaam.
 * Fix vertical alignment of default avatar font ([\#11582](matrix-org/matrix-react-sdk#11582)). Fixes #26081.
 * Fix avatars in public room & space search being flex shrunk ([\#11580](matrix-org/matrix-react-sdk#11580)). Fixes #26133.
 * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](matrix-org/matrix-react-sdk#11558)). Fixes #26075.

Changes in [1.11.43](https://github.com/vector-im/element-web/releases/tag/v1.11.43) (2023-09-15)
=================================================================================================

(No changes - bumping the version number for an element-desktop release.)

Changes in [1.11.42](https://github.com/vector-im/element-web/releases/tag/v1.11.42) (2023-09-13)
=================================================================================================

## 🐛 Bug Fixes
 * Update Compound to fix Firefox-specific avatar regression ([\#11604](matrix-org/matrix-react-sdk#11604)). Fixes #26155.

Changes in [1.11.41](https://github.com/vector-im/element-web/releases/tag/v1.11.41) (2023-09-12)
=================================================================================================

## 🦖 Deprecations
 * Deprecate customisations in favour of Module API ([\#25736](element-hq/element-web#25736)). Fixes #25733.

## ✨ Features
 * Make SVGR icons use forward ref ([\#26082](element-hq/element-web#26082)).
 * Add support for rendering a custom wrapper around Element ([\#25537](element-hq/element-web#25537)). Contributed by @maheichyk.
 * Allow creating public knock rooms ([\#11481](matrix-org/matrix-react-sdk#11481)). Contributed by @charlynguyen.
 * Render custom images in reactions according to MSC4027 ([\#11087](matrix-org/matrix-react-sdk#11087)). Contributed by @sumnerevans.
 * Introduce room knocks bar ([\#11475](matrix-org/matrix-react-sdk#11475)). Contributed by @charlynguyen.
 * Room header UI updates ([\#11507](matrix-org/matrix-react-sdk#11507)). Fixes #25892.
 * Remove green "verified" bar for encrypted events ([\#11496](matrix-org/matrix-react-sdk#11496)).
 * Update member count on room summary update ([\#11488](matrix-org/matrix-react-sdk#11488)).
 * Support for E2EE in Element Call  ([\#11492](matrix-org/matrix-react-sdk#11492)).
 * Allow requesting to join knock rooms via spotlight ([\#11482](matrix-org/matrix-react-sdk#11482)). Contributed by @charlynguyen.
 * Lock out the first tab if Element is opened in a second tab. ([\#11425](matrix-org/matrix-react-sdk#11425)). Fixes #25157.
 * Change avatar to use Compound implementation ([\#11448](matrix-org/matrix-react-sdk#11448)).

## 🐛 Bug Fixes
 * Fix vertical alignment of default avatar font ([\#11582](matrix-org/matrix-react-sdk#11582)). Fixes #26081.
 * Fix avatars in public room & space search being flex shrunk ([\#11580](matrix-org/matrix-react-sdk#11580)). Fixes #26133.
 * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](matrix-org/matrix-react-sdk#11558)). Fixes #26075.
 * Fix compound external assets path in bundle ([\#26069](element-hq/element-web#26069)).
 * Use RoomStateEvent.Update for knocks ([\#11516](matrix-org/matrix-react-sdk#11516)). Contributed by @charlynguyen.
 * Prevent event propagation when clicking icon buttons ([\#11515](matrix-org/matrix-react-sdk#11515)).
 * Only display RoomKnocksBar when feature flag is enabled ([\#11513](matrix-org/matrix-react-sdk#11513)). Contributed by @andybalaam.
 * Fix avatars of knock members for people tab of room settings ([\#11506](matrix-org/matrix-react-sdk#11506)). Fixes #26083. Contributed by @charlynguyen.
 * Fixes read receipt avatar offset ([\#11483](matrix-org/matrix-react-sdk#11483)). Fixes #26067, #26064 #26059 and #26061.
 * Fix avatar defects ([\#11473](matrix-org/matrix-react-sdk#11473)). Fixes #26051 and #26046.
 * Fix consistent avatar output for Percy ([\#11472](matrix-org/matrix-react-sdk#11472)). Fixes #26049 and #26052.
 * Fix colour of avatar and colour matching with username ([\#11470](matrix-org/matrix-react-sdk#11470)). Fixes #26042.
 * Fix incompatibility of Soft Logout with Element-R ([\#11468](matrix-org/matrix-react-sdk#11468)).
 * Fix instances of double translation and guard translation calls using typescript ([\#11443](matrix-org/matrix-react-sdk#11443)).
@t3chguy t3chguy mentioned this pull request Nov 29, 2023
Closed
@t3chguy t3chguy mentioned this pull request Jan 9, 2024
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@kerryarchibald kerryarchibald kerryarchibald approved these changes

@t3chguy t3chguy Awaiting requested review from t3chguy t3chguy was automatically assigned from matrix-org/element-web-team

@weeman1337 weeman1337 Awaiting requested review from weeman1337 weeman1337 is a code owner automatically assigned from matrix-org/element-web-reviewers

Assignees
No one assigned
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@germain-gg @kerryarchibald @aceArt-GmbH @t3chguy