[IMP] mail: turn 'AttachmentViewer/imageStyle' into field

Task-2793280

closes odoo/odoo#86371

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Alexandre Kühn
2022-03-14 17:28:47 +00:00
parent 371c28a8ba
commit 7269d9e4f8
3 changed files with 27 additions and 24 deletions
@@ -79,29 +79,6 @@ export class AttachmentViewer extends Component {
return this.messaging && this.messaging.models['AttachmentViewer'].get(this.props.localId);
}
/**
* Compute the style of the image (scale + rotation).
*
* @returns {string}
*/
get imageStyle() {
const attachmentViewer = this.attachmentViewer;
let style = `transform: ` +
`scale3d(${attachmentViewer.scale}, ${attachmentViewer.scale}, 1) ` +
`rotate(${attachmentViewer.angle}deg);`;
if (attachmentViewer.angle % 180 !== 0) {
style += `` +
`max-height: ${window.innerWidth}px; ` +
`max-width: ${window.innerHeight}px;`;
} else {
style += `` +
`max-height: 100%; ` +
`max-width: 100%;`;
}
return style;
}
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
@@ -43,7 +43,7 @@
<i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin" role="img" title="Loading"/>
</div>
</t>
<img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
<img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
</div>
</t>
<t t-if="attachmentViewer.attachment.isPdf">
@@ -30,6 +30,26 @@ registerModel({
const accessToken = this.attachment.accessToken ? `?access_token=${this.attachment.accessToken}` : '';
return `/web/image/${this.attachment.id}${accessToken}`;
},
/**
* @private
* @returns {string}
*/
_computeImageStyle() {
let style = `transform: ` +
`scale3d(${this.scale}, ${this.scale}, 1) ` +
`rotate(${this.angle}deg);`;
if (this.angle % 180 !== 0) {
style += `` +
`max-height: ${window.innerWidth}px; ` +
`max-width: ${window.innerHeight}px;`;
} else {
style += `` +
`max-height: 100%; ` +
`max-width: 100%;`;
}
return style;
},
},
fields: {
/**
@@ -60,6 +80,12 @@ registerModel({
isCausal: true,
readonly: true,
}),
/**
* Style of the image (scale + rotation).
*/
imageStyle: attr({
compute: '_computeImageStyle',
}),
/**
* Determines the source URL to use for the image.
*/