From f11c1fd6d7dfe7a8424bd2b6de63090fb9e7a7d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Commaille?= <zecakeh@tedomum.fr>
Date: Thu, 2 Nov 2023 17:26:33 +0100
Subject: [PATCH] read-receipts-list: Add a border between avatars

Uses a round cutout rather than a border to have a better visual
if part of the avatar is transparent.
---
 data/resources/style.css                                    | 6 ++++++
 src/session/view/content/room_history/read_receipts_list.rs | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/data/resources/style.css b/data/resources/style.css
index 51a8a1e8..2b594400 100644
--- a/data/resources/style.css
+++ b/data/resources/style.css
@@ -505,6 +505,12 @@ message-reactions .reaction-count {
   padding: 2px;
 }
 
+read-receipts-list .cutout {
+  background-color: @view_bg_color;
+  border-radius: 999px;
+  padding: 1px;
+}
+
 .divider-row {
   font-size: 0.9em;
   font-weight: bold;
diff --git a/src/session/view/content/room_history/read_receipts_list.rs b/src/session/view/content/room_history/read_receipts_list.rs
index 484935c6..c3df0067 100644
--- a/src/session/view/content/room_history/read_receipts_list.rs
+++ b/src/session/view/content/room_history/read_receipts_list.rs
@@ -41,6 +41,7 @@ mod imp {
 
         fn class_init(klass: &mut Self::Class) {
             Self::bind_template(klass);
+            klass.set_css_name("read-receipts-list");
         }
 
         fn instance_init(obj: &InitializingObject<Self>) {
@@ -112,7 +113,9 @@ impl ReadReceiptsList {
                 let avatar = Avatar::new();
                 avatar.set_size(20);
                 avatar.set_data(Some(avatar_data.clone()));
-                avatar.upcast()
+
+                let cutout = adw::Bin::builder().child(&avatar).css_classes(["cutout"]).build();
+                cutout.upcast()
             }),
         );