[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.

4 files changed, 48 insertions, 12 deletions

diff --git a/addons/mail/static/src/js/document_viewer.js b/addons/mail/static/src/js/document_viewer.js
index 679e483c899..b3ea0e18bfc 100644
--- a/addons/mail/static/src/js/document_viewer.js
+++ b/addons/mail/static/src/js/document_viewer.js
@@ -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;
             }
         });
diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less
index 4073cef80c2..e32c1167ac2 100644
--- a/addons/mail/static/src/less/composer.less
+++ b/addons/mail/static/src/less/composer.less
@@ -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%;
                 }
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 43cf896e1cc..8237658e99e 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -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"/>
diff --git a/addons/mail/static/tests/chatter_tests.js b/addons/mail/static/tests/chatter_tests.js
index 77d1cca435a..c2a8e3d5b88 100644
--- a/addons/mail/static/tests/chatter_tests.js
+++ b/addons/mail/static/tests/chatter_tests.js
@@ -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();
 });