[FIX] web: tagsList, enhanced edition

This commit focuses on fixing the UX for managing avatars and badges
within `tagsList` in edition mode. The changes include:

For Avatars:

- Implemented an overlay effect on :hover, making it clearer which entry
  is currently selected, providing a visual cue for users.
- The "remove" button now appears on :hover only, reducing visual
  clutter and improving visual scanning.

For Badges:

- Added visual feedback when hovering the "remove" button, making it
  more apparent and user-friendly.

task-3439555
part of task-3326263

closes odoo#130485

X-original-commit: 649a58c
Related: odoo/enterprise#45028
Signed-off-by: Pierre Paridans (app) <[email protected]>

addons/web/static/src/core/tags_list/tags_list.scss

@@ -2,14 +2,6 @@
     font-size: var(--Tag-font-size, #{$font-size-sm});
     max-width: var(--Tag-max-width, 100%);
 
-    .o_badge_text, a {
-        line-height: 1.1;
-    }
-
-    a {
-        color: inherit;
-    }
-
     @for $size from 1 through length($o-colors) {
         &.o_tag_color_#{$size - 1} {
             $-bg: adjust-color(nth($o-colors, $size), $lightness: 25%, $saturation: 15%);

addons/web/static/src/core/tags_list/tags_list.xml

@@ -7,7 +7,7 @@
                 class="o_tag position-relative d-inline-flex align-items-center user-select-none"
                 t-att-class="{
                     'o_avatar opacity-trigger-hover' : tag.img,
-                    'o_badge badge rounded-pill': !tag.img,
+                    'o_badge badge rounded-pill lh-1': !tag.img,
                 }"
                 t-attf-class="{{ !tag.img ? 'o_tag_color_' + (tag.colorIndex ? tag.colorIndex : '0') : '' }}"
                 tabindex="-1"
@@ -16,10 +16,39 @@
                 t-on-click="(ev) => tag.onClick and tag.onClick(ev)"
                 t-on-keydown="tag.onKeydown">
 
-                <img t-if="tag.img" t-att-src="tag.img" class="o_avatar o_m2m_avatar rounded" t-att-class="tag.imageClass"/>
+                <!-- Avatar's :hover backdrop -->
+                <span
+                    t-if="tag.img &amp;&amp; props.displayText"
+                    class="o_avatar_backdrop position-absolute top-0 end-0 bottom-0 start-0 ms-n2 mt-n1 mb-n1 bg-view rounded border shadow opacity-0 opacity-100-hover"/>
+
+                <img
+                    t-if="tag.img"
+                    t-att-src="tag.img"
+                    class="o_avatar o_m2m_avatar position-relative rounded"
+                    t-att-class="tag.imageClass"/>
+
                 <i t-if="tag.icon" t-attf-class="p-1 fa {{ tag.icon }}" t-att-class="tag.className"/>
-                <div t-if="props.displayText" class="o_tag_badge_text" t-att-class="{'ms-1' : tag.img}" t-esc="tag.text" />
-                <a tabIndex="-1" t-if="tag.onDelete" t-on-click.stop.prevent="(ev) => tag.onDelete and tag.onDelete(ev)" href="#" class="o_delete oi oi-close ps-1" title="Delete" aria-label="Delete"/>
+
+                <div
+                    t-if="props.displayText"
+                    class="o_tag_badge_text"
+                    t-att-class="{'position-relative ms-1' : tag.img}"
+                    t-out="tag.text"/>
+
+                <a
+                    t-if="tag.onDelete"
+                    t-on-click.stop.prevent="(ev) => tag.onDelete and tag.onDelete(ev)"
+                    class="o_delete opacity-100-hover"
+                    t-att-class="{
+                            'btn btn-link position-relative py-0 px-1 text-danger opacity-0': tag.img,
+                            'ps-1 opacity-75': !tag.img
+                        }"
+                    title="Delete"
+                    aria-label="Delete"
+                    tabIndex="-1"
+                    href="#">
+                        <i class="oi oi-close align-text-top"/>
+                </a>
             </span>
         </t>
         <span t-if="props.tags and otherTags.length" class="o_m2m_avatar_empty rounded-circle text-center fw-bold" data-tooltip-template="web.TagsList.Tooltip" data-tooltip-position="right" t-att-data-tooltip-info="tooltipInfo">