From 330ed0bfb5ab6b89be49071067f791e14d6716b6 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 26 Jul 2023 12:28:26 +0000
Subject: [PATCH] [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/odoo#130485

X-original-commit: 649a58cd88c4d74cdd62f47c1c0c354ced143481
Related: odoo/enterprise#45028
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../static/src/core/tags_list/tags_list.scss  |  8 ----
 .../static/src/core/tags_list/tags_list.xml   | 37 +++++++++++++++++--
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/core/tags_list/tags_list.scss b/addons/web/static/src/core/tags_list/tags_list.scss
index a76a4d0f321..dd447728339 100644
--- a/addons/web/static/src/core/tags_list/tags_list.scss
+++ b/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%);
diff --git a/addons/web/static/src/core/tags_list/tags_list.xml b/addons/web/static/src/core/tags_list/tags_list.xml
index 3283cd2ced1..eeed772d8a4 100644
--- a/addons/web/static/src/core/tags_list/tags_list.xml
+++ b/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">