pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: tagsList, enhanced edition

Browse Source 
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>
This commit is contained in:
stefanorigano (SRI)
2023-08-02 16:00:46 +02:00
parent b88a846866
commit 330ed0bfb5
2 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/tags_list/tags_list.scss
-8
View File
@@ -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
+33 -4
View File
@@ -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">