[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>
This commit is contained in:
stefanorigano (SRI)
2021-10-06 12:39:43 +00:00
parent 8742b14110
commit c20be761a8
+33 -17
View File
@@ -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>