From f5801472124b92bbfc5e53d256e12fe0a2037df9 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Fri, 20 Oct 2023 08:57:12 +0200
Subject: [PATCH] [IMP] calendar: improve attendee tags list

The attendee tags list which is used in the calendar event's popups
needed adapting because the backdrop was being cropped.
Also, in the popups, these tags aren't clickable but seemed to be so
with the backdrop appearing on `:hover`.

task-3389317

Part-of: odoo/odoo#138670
---
 .../src/views/fields/attendee_tags_list.scss       | 14 ++++++--------
 .../static/src/views/fields/attendee_tags_list.xml |  8 ++++++--
 .../static/src/views/fields/many2many_attendee.xml |  3 +++
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/addons/calendar/static/src/views/fields/attendee_tags_list.scss b/addons/calendar/static/src/views/fields/attendee_tags_list.scss
index e7eb4430991..9f6fcb06f35 100644
--- a/addons/calendar/static/src/views/fields/attendee_tags_list.scss
+++ b/addons/calendar/static/src/views/fields/attendee_tags_list.scss
@@ -1,14 +1,12 @@
-.o_attendee_tags_list{
+.o_attendee_tags_list {
     --Avatar-size: 24px;
+
     position: relative;
 
     .attendee_tag_status {
-        position: absolute;
-        bottom: -0.375em;
-        right: -0.375em;
-        display: block;
-        border-radius: 100%;
-        border: 1px white solid;
+        @include o-position-absolute($bottom: -0.375em, $right: -0.375em);
+        aspect-ratio: 1;
+        border: 1px $o-view-background-color solid;
     }
 
     .o_attendee_status_accepted {
@@ -20,7 +18,7 @@
         color: $danger;
     }
     .o_attendee_status_tentative {
-        background-color: tint-color($dark, 80%);
+        background-color: $gray-200;
         color: $dark;
     }
 }
diff --git a/addons/calendar/static/src/views/fields/attendee_tags_list.xml b/addons/calendar/static/src/views/fields/attendee_tags_list.xml
index 5ca5b05b7d1..0e7f48dbe57 100644
--- a/addons/calendar/static/src/views/fields/attendee_tags_list.xml
+++ b/addons/calendar/static/src/views/fields/attendee_tags_list.xml
@@ -1,13 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
     <t t-name="calendar.AttendeeTagsList" t-inherit="web.TagsList" t-inherit-mode="primary">
+        <xpath expr="//span[hasclass('o_avatar_backdrop')]" position="attributes">
+            <attribute name="class" remove="opacity-100-hover" separator=" "/>
+        </xpath>
+
         <xpath expr="//img[hasclass('o_m2m_avatar')]" position="replace">
-            <div class="o_attendee_tags_list mb-2">
+            <div class="o_attendee_tags_list">
                 <img t-if="tag.img"
                     t-att-src="tag.img"
                     class="o_avatar o_m2m_avatar position-relative rounded"
                     t-att-class="tag.imageClass"/>
-                <div t-if="tag.status &amp;&amp; tag.statusIcon" t-attf-class="attendee_tag_status o_attendee_status_{{tag.status}} fa fa-icon {{tag.statusIcon}}"/>
+                <div t-if="tag.status &amp;&amp; tag.statusIcon" t-attf-class="attendee_tag_status o_attendee_status_{{tag.status}} fa fa-fw {{tag.statusIcon}} rounded-circle"/>
             </div>
         </xpath>
     </t>
diff --git a/addons/calendar/static/src/views/fields/many2many_attendee.xml b/addons/calendar/static/src/views/fields/many2many_attendee.xml
index ee79e626e2c..9ce4cea2a07 100644
--- a/addons/calendar/static/src/views/fields/many2many_attendee.xml
+++ b/addons/calendar/static/src/views/fields/many2many_attendee.xml
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
     <t t-name="calendar.Many2ManyAttendee" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary">
+        <xpath expr="//div[hasclass('many2many_tags_avatar_field_container')]" position="attributes">
+            <attribute name="class" add="flex-column" separator=" "/>
+        </xpath>
         <xpath expr="//Many2XAutocomplete" position="attributes">
             <attribute name="placeholder">props.placeholder</attribute>
         </xpath>