[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. task-1958000 PR: #31811
This commit is contained in:
Sébastien Theys
@@ -177,21 +177,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 = {
|
||||
@@ -202,10 +200,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.
|
After Width: | Height: | Size: 2.4 KiB |
@@ -502,37 +502,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 && !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' && 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>
|
||||
|
||||
Reference in New Issue
Block a user