[IMP] mail: pdf preview and small improvement

When you click on pdf it should show preview of pdf.
Don't show the previous/next arrows if there is only one attachment.
This commit is contained in:
Kishan Gajjar
2017-09-13 12:46:52 +02:00
committed by fwi-odoo
parent 6552ae68d1
commit c1fa3b8ab3
4 changed files with 48 additions and 12 deletions
+4 -3
View File
@@ -40,9 +40,10 @@ var DocumentViewer = Widget.extend({
init: function (parent, attachments, activeAttachmentID) {
this._super.apply(this, arguments);
this.attachment = _.filter(attachments, function (attachment) {
var type = attachment.mimetype.split('/').shift();
if (type === 'image' || type === 'video') {
attachment.type = type;
var match = attachment.mimetype.match("(image|video|application/pdf)");
if (match) {
attachment.type = match[1];
return true;
}
});
@@ -357,6 +357,12 @@
max-height: 100%;
transition: 0.3s cubic-bezier(0, 0, 0.49, 1.6) 0s, opacity 0.15s;
}
.o_viewer_pdf {
width: 80%;
height: 90%;
border: 0px;
box-shadow: 1px 1px 20px 1px #000;
}
.o_viewer_video {
height: 80%;
}
+22 -6
View File
@@ -42,6 +42,7 @@
<i class="fa fa-spinner fa-spin fa-3x fa-fw" aria-hidden="true"/>
</div>
<img t-if="widget.activeAttachment.type == 'image'" class="o_viewer_img" t-attf-src="/web/image/#{widget.activeAttachment.id}?unique=1"/>
<iframe class="mb48 o_viewer_pdf" t-if="widget.activeAttachment.type == 'application/pdf'" t-attf-src="/web/static/lib/pdfjs/web/viewer.html?file=/web/content/#{widget.activeAttachment.id}" />
<video t-if="widget.activeAttachment.type == 'video'" class="o_viewer_video" controls="controls">
<source t-attf-src="/web/image/#{widget.activeAttachment.id}" t-att-data-type="widget.activeAttachment.mimetype"/>
</video>
@@ -72,12 +73,15 @@
<t t-name="DocumentViewer">
<div class="modal o_modal_fullscreen" tabindex="-1" role="dialog" aria-hidden="true">
<t t-call="DocumentViewer.Content"/>
<a class="arrow arrow-left move_previous" href="#">
<span class="fa fa-3x fa-chevron-left"/>
</a>
<a class="arrow arrow-right move_next" href="#">
<span class="fa fa-3x fa-chevron-right"/>
</a>
<t t-if="widget.attachment.length != 1">
<a class="arrow arrow-left move_previous" href="#">
<span class="fa fa-3x fa-chevron-left"/>
</a>
<a class="arrow arrow-right move_next" href="#">
<span class="fa fa-3x fa-chevron-right"/>
</a>
</t>
</div>
</t>
<t t-name="PrintImage">
@@ -281,6 +285,18 @@
</div>
</div>
</t>
<t t-elif="attachment.mimetype == 'application/pdf'">
<div class="o_image_box">
<div class="o_image_box">
<img src="/web/static/src/img/mimetypes/pdf.png"/>
<div class="o_image_overlay o_attachment_view" t-att-data-id="attachment.id">
<a class="o_attachment_download" t-att-href='attachment.url' target="_blank">
<i t-attf-class="fa fa-2x fa-arrow-circle-o-down" title="Download this PDF" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</t>
<t t-else="">
<div class="o_image_box">
<img class="o_image" t-att-data-mimetype="attachment.mimetype"/>
+16 -3
View File
@@ -495,7 +495,7 @@ QUnit.test('chatter: post, receive and star messages', function (assert) {
});
QUnit.test('chatter: Attachment viewer', function (assert) {
assert.expect(5);
assert.expect(6);
this.data.partner.records[0].message_ids = [1];
var messages = [{
attachment_ids: [{
@@ -516,6 +516,12 @@ QUnit.test('chatter: Attachment viewer', function (assert) {
mimetype: 'image/jpeg',
name: 'Test Image 3',
url: '/web/content/3?download=true'
},{
filename: 'pdf1.pdf',
id:4,
mimetype: 'application/pdf',
name: 'Test PDF 1',
url: '/web/content/4?download=true'
}],
author_id: ["1", "John Doe"],
body: "Attachement viewer test",
@@ -541,7 +547,8 @@ QUnit.test('chatter: Attachment viewer', function (assert) {
'</form>',
res_id: 2,
mockRPC: function (route) {
if(_.str.contains(route, '/mail/attachment/preview/')){
if(_.str.contains(route, '/mail/attachment/preview/') ||
_.str.contains(route, '/web/static/lib/pdfjs/web/viewer.html')){
var canvas = document.createElement('canvas');
return $.when(canvas.toDataURL());
}
@@ -561,7 +568,7 @@ QUnit.test('chatter: Attachment viewer', function (assert) {
},
},
});
assert.strictEqual(form.$('.o_thread_message .o_attachment').length, 3,
assert.strictEqual(form.$('.o_thread_message .o_attachment').length, 4,
"there should be three attachment on message");
assert.strictEqual(form.$('.o_thread_message .o_attachment .caption a').first().attr('href'), '/web/content/1?download=true',
"image caption should have correct download link");
@@ -577,6 +584,12 @@ QUnit.test('chatter: Attachment viewer', function (assert) {
"Modal popup should have download button");
// close attachment popup
$('.o_modal_fullscreen .o_viewer-header .o_close_btn').click();
// click on pdf attachement
form.$('.o_thread_message .o_attachment .o_image_box .o_image_overlay').eq(3).click();
assert.strictEqual($('.o_modal_fullscreen iframe[src*="/web/content/4"]').length, 1,
"Modal popup should open with the pdf preview");
// close attachment popup
$('.o_modal_fullscreen .o_viewer-header .o_close_btn').click();
form.destroy();
});