Member avatars without canvas (#9990)

* Strict typechecking fixes for Base/Member/Avatar Update the core avatar files to pass `--strict --noImplicitAny` typechecks. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Add tests for Base/Member/Avatar More thoroughly test the core avatar files. Not necessarily the most thorough, but an improvement. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Extract TextAvatar from BaseAvatar Extracted the fallback/textual avatar into its own component. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Use standard HTML for non-image avatars Firefox users with `resistFingerprinting` enabled were seeing random noise for rooms and users without avatars. There's no real reason to use data URLs to present flat colors. This converts non-image avatars to inline blocks with background colors. See https://github.com/vector-im/element-web/issues/23936 Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Have pills use solid backgrounds rather than colored images Similar to room and member avatars, pills now use colored pseudo-elements rather than background images. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> --------- Signed-off-by: Clark Fischer <clark.fischer@gmail.com> Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
2023-01-30 09:50:08 +00:00
parent 64cec31981
commit a8aa4de4b4
22 changed files with 806 additions and 311 deletions
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomPillPart matches snapshot (avatar) 1`] = `
+<span
+  class="mx_Pill mx_RoomPill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: url('http://this.is.a.url/www.example.com/avatars/room1.jpeg'); --avatar-letter: '';"
+>
+  !room:example.com
+</span>
+`;
+
+exports[`RoomPillPart matches snapshot (no avatar) 1`] = `
+<span
+  class="mx_Pill mx_RoomPill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: #ac3ba8; --avatar-letter: '!';"
+>
+  !room:example.com
+</span>
+`;
+
+exports[`UserPillPart matches snapshot (avatar) 1`] = `
+<span
+  class="mx_UserPill mx_Pill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: url('http://this.is.a.url/www.example.com/avatar.png'); --avatar-letter: '';"
+>
+  DisplayName
+</span>
+`;
+
+exports[`UserPillPart matches snapshot (no avatar) 1`] = `
+<span
+  class="mx_UserPill mx_Pill"
+  contenteditable="false"
+  spellcheck="false"
+  style="--avatar-background: #ac3ba8; --avatar-letter: 'U';"
+>
+  DisplayName
+</span>
+`;