Skip to content
Permalink
Browse files

[IMP] base,web: adapt kanban image following image tools changes

Since the images are not guaranteed to be square anymore, the kanban image had
to be adapted to better handle the different image ratios.

Also the placeholder has been moved into the actual image div instead of
being a separate div that acted differently.

The avatar placeholder was white... displayed on top of white. Now it's grey
so we can actually see it.

PR: #31811
  • Loading branch information...
seb-odoo committed Mar 19, 2019
1 parent 1a02949 commit 0d24f78d17987f2482b8a87c6cb2f225f711e433
@@ -176,21 +176,19 @@ var KanbanRecord = Widget.extend({
* @param {string} model the name of the model
* @param {string} field the name of the field
* @param {integer} id the id of the resource
* @param {integer} cache the cache duration, in seconds
* @param {Object} options
* @param {string} placeholder
* @returns {string} the url of the image
*/
_getImageURL: function (model, field, id, cache, options) {
options = options || {};
_getImageURL: function (model, field, id, placeholder) {
id = (_.isArray(id) ? id[0] : id) || false;
field = options.preview_image || field;
placeholder = placeholder || "/web/static/src/img/placeholder.png";
var isCurrentRecord = this.modelName === model && this.recordData.id === id;
var url;
if (isCurrentRecord && this.record[field] && this.record[field].raw_value && !utils.is_bin_size(this.record[field].raw_value)) {
// Use magic-word technique for detecting image type
url = 'data:image/' + this.file_type_magic_word[this.record[field].raw_value[0]] + ';base64,' + this.record[field].raw_value;
} else if (!model || !field || !id || (isCurrentRecord && this.record[field] && !this.record[field].raw_value)) {
url = "/web/static/src/img/placeholder.png";
url = placeholder;
} else {
var session = this.getSession();
var params = {
@@ -201,10 +199,6 @@ var KanbanRecord = Widget.extend({
if (isCurrentRecord) {
params.unique = this.record.__last_update && this.record.__last_update.value.replace(/[^0-9]/g, '');
}
if (cache !== undefined) {
// Set the cache duration in seconds.
params.cache = parseInt(cache, 10);
}
url = session.url('/web/image', params);
}
return url;
@@ -146,7 +146,15 @@
margin-right: $o-kanban-inside-hgutter*2;
flex: 1 0 $o-kanban-image-fill-width;
min-height: 95px;
background: {size: cover; position: center };
background: {
size: cover;
position: center;
repeat: no-repeat;
};

&.o_kanban_image_full {
background-size: contain;
}
}

// Adapt default 'o_kanban_image' element if present.
@@ -158,6 +166,10 @@
flex: 0 0 $o-kanban-image-width;
min-height: $o-kanban-image-width;
align-self: baseline;
background: {
repeat: no-repeat;
position: center;
}

// On medium screen size, align 'o_kanban_image' to 'o_kanban_image_fill_left' elements.
@include media-breakpoint-up(md) {
Binary file not shown.
@@ -499,37 +499,25 @@
<field name="mobile"/>
<field name="state_id"/>
<field name="category_id"/>
<field name="image_small"/>
<field name="image_medium"/>
<field name="type"/>
<templates>
<t t-name="kanban-box">
<div class="oe_kanban_global_click o_kanban_record_has_image_fill o_res_partner_kanban">
<t t-if="record.image_small.raw_value &amp;&amp; !record.is_company.raw_value">
<div class="o_kanban_image_fill_left d-none d-md-block" t-attf-style="background-image:url('#{kanban_image('res.partner', 'image_medium', record.id.raw_value)}')">
<t t-if="!record.is_company.raw_value">
<t t-if="record.type.raw_value === 'delivery'" t-set="placeholder" t-value="'/base/static/img/truck.png'"/>
<t t-elif="record.type.raw_value === 'invoice'" t-set="placeholder" t-value="'/base/static/img/money.png'"/>
<t t-else="" t-set="placeholder" t-value="'/base/static/img/avatar_grey.png'"/>
<div class="o_kanban_image_fill_left d-none d-md-block" t-attf-style="background-image:url('#{kanban_image('res.partner', 'image_medium', record.id.raw_value, placeholder)}')">
<img class="o_kanban_image_inner_pic" t-if="record.parent_id.raw_value" t-att-alt="record.parent_id.value" t-att-src="kanban_image('res.partner', 'image_small', record.parent_id.raw_value)"/>
</div>
<div class="o_kanban_image rounded-circle d-md-none" t-attf-style="background-image:url('#{kanban_image('res.partner', 'image_small', record.id.raw_value)}')">
<div class="o_kanban_image rounded-circle d-md-none" t-attf-style="background-image:url('#{kanban_image('res.partner', 'image_medium', record.id.raw_value, placeholder)}')">
<img class="o_kanban_image_inner_pic" t-if="record.parent_id.raw_value" t-att-alt="record.parent_id.value" t-att-src="kanban_image('res.partner', 'image_small', record.parent_id.raw_value)"/>
</div>
</t>
<t t-elif="record.is_company.raw_value">
<img class="o_kanban_image" t-att-src="kanban_image('res.partner', 'image_small', record.id.raw_value)" t-att-alt="record.display_name"/>
</t>
<t t-else="">
<t t-if="record.type.raw_value === 'delivery'">
<img alt="Delivery" t-att-src='_s + "/base/static/img/truck.png"' class="o_kanban_image oe_kanban_avatar_smallbox"/>
</t>
<t t-if="record.type.raw_value === 'invoice'">
<img alt="Invoice" t-att-src='_s + "/base/static/img/money.png"' class="o_kanban_image oe_kanban_avatar_smallbox"/>
</t>
<t t-if="record.type.raw_value != 'invoice' &amp;&amp; record.type.raw_value != 'delivery'">
<t t-if="record.is_company.raw_value === true">
<img class="o_kanban_image" alt="Logo" t-att-src='_s + "/base/static/img/company_image.png"'/>
</t>
<t t-if="record.is_company.raw_value === false">
<img class="o_kanban_image" alt="Avatar" t-att-src='_s + "/base/static/img/avatar.png"'/>
</t>
</t>
<t t-set="placeholder" t-value="'/base/static/img/company_image.png'"/>
<div class="o_kanban_image_fill_left o_kanban_image_full" t-attf-style="background-image: url(#{kanban_image('res.partner', 'image_medium', record.id.raw_value, placeholder)})" role="img"/>
</t>
<div class="oe_kanban_details">
<strong class="o_kanban_record_title oe_partner_heading"><field name="display_name"/></strong>

0 comments on commit 0d24f78

Please sign in to comment.
You can’t perform that action at this time.