[IMP] web: add new many2many_tags_avatar field widget to show avatar with tags

addons/web/static/src/js/fields/field_registry.js

@@ -74,6 +74,7 @@ registry
     .add('many2many', relational_fields.FieldMany2Many)
     .add('many2many_binary', relational_fields.FieldMany2ManyBinaryMultiFiles)
     .add('many2many_tags', relational_fields.FieldMany2ManyTags)
+    .add('many2many_tags_avatar', relational_fields.FieldMany2ManyTagsAvatar)
     .add('form.many2many_tags', relational_fields.FormFieldMany2ManyTags)
     .add('kanban.many2many_tags', relational_fields.KanbanFieldMany2ManyTags)
     .add('many2many_checkboxes', relational_fields.FieldMany2ManyCheckBoxes)

addons/web/static/src/js/fields/relational_fields.js

@@ -2209,6 +2209,26 @@ var FieldMany2ManyTags = AbstractField.extend({
     },
 });
 
+var FieldMany2ManyTagsAvatar = FieldMany2ManyTags.extend({
+    tag_template: 'FieldMany2ManyTagAvatar',
+    className: 'o_field_many2manytags avatar',
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     * @private
+     */
+    _getRenderTagsContext: function () {
+        var result = this._super.apply(this, arguments);
+        result.avatarModel = this.nodeOptions.avatarModel || this.field.relation;
+        result.avatarField = this.nodeOptions.avatarField || 'image';
+        return result;
+    },
+});
+
 var FormFieldMany2ManyTags = FieldMany2ManyTags.extend({
     events: _.extend({}, FieldMany2ManyTags.prototype.events, {
         'click .dropdown-toggle': '_onOpenColorPicker',
@@ -2972,6 +2992,7 @@ return {
     FieldMany2ManyBinaryMultiFiles: FieldMany2ManyBinaryMultiFiles,
     FieldMany2ManyCheckBoxes: FieldMany2ManyCheckBoxes,
     FieldMany2ManyTags: FieldMany2ManyTags,
+    FieldMany2ManyTagsAvatar: FieldMany2ManyTagsAvatar,
     FormFieldMany2ManyTags: FormFieldMany2ManyTags,
     KanbanFieldMany2ManyTags: KanbanFieldMany2ManyTags,
 

addons/web/static/src/scss/fields.scss

@@ -190,6 +190,24 @@
                 color: #FF0000;
             }
         }
+        // Many2many tags avatar
+        &.avatar {
+            .badge {
+                padding-left: 4px;
+                img {
+                    height: 18px;
+                    width: 18px;
+                }
+                &.o_tag_color_0 {
+                    background-color: #F1F1F1;
+                    box-shadow: none;
+                    border: 1px solid gray('300');
+                }
+                .o_delete {
+                    margin-top: 3px;
+                }
+            }
+        }
     }
 
     // Stars

addons/web/static/src/xml/base.xml

@@ -741,6 +741,11 @@
         </div>
     </t>
 </t>
+<t t-name="FieldMany2ManyTagAvatar" t-extend="FieldMany2ManyTag">
+    <t t-jquery="span:first" t-operation="prepend">
+        <img t-attf-src="/web/image/#{avatarModel}/#{el.id}/#{avatarField}" class="rounded-circle"/>
+    </t>
+</t>
 <t t-name="FieldMany2ManyTag.colorpicker">
     <div class="o_colorpicker dropdown-menu tagcolor_dropdown_menu" role="menu">
         <ul>