[IMP] mail: attachments list design

With this commit, the attachments displayed in a thread (typically a
chatter) are properly styled.

1 files changed, 54 insertions, 55 deletions

diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index be2a81b4e92..51fa880302c 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -207,9 +207,18 @@
                     <t t-if="!(message.tracking_value_ids and message.tracking_value_ids.length &gt; 0)">
                         <t t-raw="message.body"/>
                     </t>
-                     <t t-foreach="message.attachment_ids" t-as="attachment">
-                         <t t-call="mail.Attachment"/>
-                     </t>
+                    <t t-if="message.attachment_ids.length > 0">
+                        <div t-if="message.images.length > 0" class="o_attachments_previews">
+                            <t t-foreach="message.images" t-as="attachment">
+                                <t t-call="mail.AttachmentPreview"/>
+                            </t>
+                        </div>
+                        <div t-if="message.others.length > 0" class="o_attachments_list">
+                            <t t-foreach="message.others" t-as="attachment">
+                                <t t-call="mail.Attachment"/>
+                            </t>
+                        </div>
+                    </t>
                 </div>
             </div>
         </div>
@@ -242,7 +251,7 @@
     </t>
 
     <t t-name="mail.ChatComposer.Attachments">
-        <div t-if="attachments.length > 0" class="o_attachments">
+        <div t-if="attachments.length > 0" class="o_attachments o_attachments_list">
             <t t-foreach="attachments" t-as='attachment'>
                 <t t-call="mail.Attachment">
                      <t t-set="editable" t-value="true"/>
@@ -251,68 +260,58 @@
         </div>
     </t>
 
-    <t t-name="mail.Attachment">
-        <t t-set="type" t-value="attachment.mimetype and attachment.mimetype.split('/').shift()"/>
-        <div t-attf-class="o_attachment #{attachment.upload ? 'o_attachment_uploading' : ''}" t-att-title="attachment.name">
-            <t t-if="type == 'image'">
+    <t t-name="mail.AttachmentPreview">
+        <div class="o_attachment" t-att-title="attachment.name">
+            <div class="o_attachment_wrap">
                 <div class="o_image_box">
-                    <img t-attf-src="/web/image/#{attachment.id}/200x200/?crop=True"/>
+                    <div class="o_attachment_image" t-attf-style="background-image:url('/web/image/#{attachment.id}/160x160/?crop=true')"/>
                     <div t-attf-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 attachment" aria-hidden="true"></i>
+                        <span class="o_attachment_title text-white"><t t-esc="attachment.name"/></span>
+                        <a class="o_attachment_download" t-att-href='attachment.url'>
+                            <i t-attf-class="fa fa-download text-white" t-att-title="'Download ' + attachment.name" aria-hidden="true"></i>
                         </a>
                     </div>
                 </div>
-            </t>
-            <t t-elif="type == 'video'">
-                <div class="o_image_box o_image_preview">
-                    <img class="o_image" t-att-data-mimetype="attachment.mimetype"/>
-                    <div t-attf-class="o_image_overlay o_attachment_view"  t-att-data-id="attachment.id">
-                        <a class="o_attachment_play">
-                            <i t-attf-class="fa fa-2x fa-play-circle" title="Play this video" aria-hidden="true"></i>
-                        </a>
-                        <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 attachment" aria-hidden="true"></i>
-                        </a>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="mail.Attachment">
+        <t t-set="type" t-value="attachment.mimetype and attachment.mimetype.split('/').shift()"/>
+        <div t-attf-class="o_attachment #{ editable ? 'o_attachment_editable' : '' } #{attachment.upload ? 'o_attachment_uploading' : ''}" t-att-title="attachment.name">
+            <div class="o_attachment_wrap">
+                <t t-set="has_preview" t-value="type == 'image' or type == 'video' or attachment.mimetype == 'application/pdf'"/>
+
+                <div t-attf-class="o_image_box pull-left #{has_preview ? 'o_attachment_view' : ''}" t-att-data-id="attachment.id">
+                    <div t-if="has_preview"
+                         class="o_image o_hover"
+                         t-att-style="type == 'image' ? 'background-image:url(/web/image/' + attachment.id + '/38x38/?crop=true' : '' "
+                         t-att-data-mimetype="attachment.mimetype">
                     </div>
+                    <a t-elif="!editable" t-att-href='attachment.url' t-att-title="'Download ' + attachment.name">
+                        <span class="o_image o_hover" t-att-data-mimetype="attachment.mimetype"/>
+                    </a>
+                    <span t-else="" class="o_image" t-att-data-mimetype="attachment.mimetype"/>
                 </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 class="caption">
+                    <span t-if="has_preview or editable" t-attf-class="ml4 #{has_preview? 'o_attachment_view' : ''}" t-att-data-id="attachment.id"><t t-esc='attachment.name'/></span>
+                    <a t-else="" class="ml4" t-att-href="attachment.url" t-att-title="'Download ' + attachment.name"><t t-esc='attachment.name'/></a>
                 </div>
-            </t>
-            <t t-else="">
-                <div class="o_image_box">
-                    <img class="o_image" t-att-data-mimetype="attachment.mimetype"/>
-                    <div t-attf-class="o_image_overlay">
-                        <a class="o_overlay_download" t-att-href='attachment.url' target="_blank"/>
-                        <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 attachment" aria-hidden="true"></i>
-                        </a>
+                <div t-if="editable" class="caption small">
+                    <b t-attf-class="ml4 small text-uppercase #{has_preview? 'o_attachment_view' : ''}" t-att-data-id="attachment.id"><t t-esc="ext"/></b>
+                    <div class="progress o_attachment_progress_bar">
+                        <div class="progress-bar progress-bar-striped active" style="width: 100%">Uploading</div>
                     </div>
                 </div>
-            </t>
-            <div class="caption">
-                <a t-att-href='attachment.url' target="_blank">
-                    <t t-esc='attachment.name'/>
-                </a>
-            </div>
-            <t t-if="editable">
-                <div class="o_attachment_delete">
-                    <i class='fa fa-times-circle' title="Delete this attachment" t-att-data-id="attachment.id"/>
-                </div>
-                <div class="o_attachment_progress_bar">
-                    Uploading
+                <div t-if="!editable" class="caption small">
+                    <b t-if="has_preview" class="ml4 small text-uppercase o_attachment_view" t-att-data-id="attachment.id"><t t-esc="ext"/></b>
+                    <a t-else="" class="ml4 small text-uppercase" t-att-href="attachment.url" t-att-title="'Download ' + attachment.name"><b><t t-esc='ext'/></b></a>
+                    <a class="ml4 o_attachment_download pull-right" t-att-title="'Download ' + attachment.name" t-att-href='attachment.url'><i t-attf-class="fa fa-download"/></a>
                 </div>
-            </t>
+                <div t-if="editable" class="o_attachment_uploaded"><i class="text-success fa fa-check"/></div>
+                <div t-if="editable" class="o_attachment_delete" t-att-data-id="attachment.id"><span class="text-white">×</span></div>
+            </div>
         </div>
     </t>