From c20be761a86d2f3bb5f83d73195b181180f1083f Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 30 Sep 2021 09:22:24 +0000
Subject: [PATCH] [FIX] note: kanban cards layout

Prior to this commits note's kanban inner components were not aligned
properly. Moreover followers' avatars and the activity widget button
position were not visually consistent with the rest of the UI.

This commit fixes the design and limits the maximum number of rendered
avatars, adding a "+ [number]" label when the followers number
crosses the threshold of 5 entries.

task-2658852

closes odoo/odoo#77653

X-original-commit: 372c5287213ae71ae59381150a190520f81cd420
Signed-off-by: Arnaud Joset <arj-odoo@users.noreply.github.com>
---
 addons/note/views/note_views.xml | 50 +++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/addons/note/views/note_views.xml b/addons/note/views/note_views.xml
index 7c986d2c66a..a17827c804c 100644
--- a/addons/note/views/note_views.xml
+++ b/addons/note/views/note_views.xml
@@ -91,6 +91,7 @@
           <progressbar field="activity_state" colors='{"planned": "success", "today": "warning", "overdue": "danger"}'/>
           <templates>
             <t t-name="kanban-box">
+              <t t-set="noteHasFollowers" t-value="record.message_partner_ids.raw_value.length &gt; 1"/>
 
               <div t-attf-class="#{!selection_mode ? kanban_color(record.color.raw_value) : ''} oe_kanban_global_click_edit oe_semantic_html_override oe_kanban_card">
 
@@ -105,25 +106,40 @@
                         <ul class="oe_kanban_colorpicker" data-field="color"/>
                     </div>
                 </div>
-                  <span>
-                    <a name="action_close" type="object" t-if="record.open.raw_value"><i class="fa fa-check" role="img" aria-label="Opened" title="Opened"/></a>
-                    <a name="action_open" type="object" t-if="!record.open.raw_value"><i class="fa fa-undo" role="img" aria-label="Closed" title="Closed"/></a>
-                  </span>
-                <!-- kanban note -->
-                <span t-attf-class="oe_kanban_content #{record.open.raw_value ? '' : 'note_text_line_through'}">
-                  <!-- title -->
-                  <field name="name"/>
-                  <div class="o_kanban_inline_block float-right mr4">
+                <div t-attf-class="d-flex #{noteHasFollowers ? 'flex-wrap' : 'flex-nowrap'}">
+                  <div class="d-flex flex-grow-1">
+                    <span class="mr-2">
+                      <a name="action_close" type="object" t-if="record.open.raw_value">
+                        <i class="fa fa-check" role="img" aria-label="Opened" title="Opened"/>
+                      </a>
+                      <a name="action_open" type="object" t-if="!record.open.raw_value">
+                        <i class="fa fa-undo" role="img" aria-label="Closed" title="Closed"/>
+                      </a>
+                    </span>
+
+                    <span t-attf-class="oe_kanban_content flex-grow-1 #{record.open.raw_value ? '' : 'note_text_line_through'}">
+                      <!-- title -->
+                      <field name="name"/>
+                    </span>
+                  </div>
+                  <div t-attf-class="d-flex #{noteHasFollowers ? 'w-100 align-items-center justify-content-end' : 'align-items-end'}">
+                    <div t-if="noteHasFollowers" class="d-flex align-items-center mr-2 mt-2">
+                      <t t-foreach="record.message_partner_ids.raw_value" t-as="follower">
+                        <img
+                            t-if="follower_index &lt; 5"
+                            t-att-src="kanban_image('res.partner', 'avatar_128', follower)"
+                            class="oe_kanban_avatar o_image_24_cover rounded-circle border border-white bg-white ml-n2"
+                            t-att-data-member_id="follower"
+                            alt="Follower"/>
+                        <small
+                            t-if="follower_index == 5"
+                            t-esc="'+' + (follower_size - 5)"
+                            class="text-info font-weight-bold ml-1"/>
+                      </t>
+                    </div>
                     <field name="activity_ids" widget="kanban_activity" />
                   </div>
-                </span>
-                <t t-if="record.message_partner_ids.raw_value.length &gt; 1">
-                    <div class="clearfix"></div>
-                      <t t-foreach="record.message_partner_ids.raw_value" t-as="follower">
-                        <img t-att-src="kanban_image('res.partner', 'avatar_128', follower)" class="oe_kanban_avatar o_image_24_cover float-right mt-2" t-att-data-member_id="follower" alt="Follower"/>
-                      </t>
-                    <div class="clearfix"></div>
-                </t>
+                </div>
               </div>
             </t>
           </templates>