[IMP] web: use css to display attachment mimetype

Widgets and website display images or display the type with icon like pdf, doc...

43 files changed, 158 insertions, 267 deletions

diff --git a/addons/mail/models/__init__.py b/addons/mail/models/__init__.py
index 80a2054910f..ca72296a6fb 100644
--- a/addons/mail/models/__init__.py
+++ b/addons/mail/models/__init__.py
@@ -1,6 +1,5 @@
 # -*- coding: utf-8 -*-
 
-import ir_attachment
 import mail_message_subtype
 import mail_tracking_value
 import mail_alias
diff --git a/addons/mail/models/ir_attachment.py b/addons/mail/models/ir_attachment.py
deleted file mode 100644
index e40f94c9974..00000000000
--- a/addons/mail/models/ir_attachment.py
+++ /dev/null
@@ -1,174 +0,0 @@
-# -*- coding: utf-8 -*-
-
-import os.path
-
-from openerp import api, fields, models
-
-
-class IrAttachment(models.Model):
-    """ Update partner to add a field about notification preferences """
-    _name = "ir.attachment"
-    _inherit = 'ir.attachment'
-
-    _fileext_to_type = {
-        '7z': 'archive',
-        'aac': 'audio',
-        'ace': 'archive',
-        'ai': 'vector',
-        'aiff': 'audio',
-        'apk': 'archive',
-        'app': 'binary',
-        'as': 'script',
-        'asf': 'video',
-        'ass': 'text',
-        'avi': 'video',
-        'bat': 'script',
-        'bin': 'binary',
-        'bmp': 'image',
-        'bzip2': 'archive',
-        'c': 'script',
-        'cab': 'archive',
-        'cc': 'script',
-        'ccd': 'disk',
-        'cdi': 'disk',
-        'cdr': 'vector',
-        'cer': 'certificate',
-        'cgm': 'vector',
-        'cmd': 'script',
-        'coffee': 'script',
-        'com': 'binary',
-        'cpp': 'script',
-        'crl': 'certificate',
-        'crt': 'certificate',
-        'cs': 'script',
-        'csr': 'certificate',
-        'css': 'html',
-        'csv': 'spreadsheet',
-        'cue': 'disk',
-        'd': 'script',
-        'dds': 'image',
-        'deb': 'archive',
-        'der': 'certificate',
-        'djvu': 'image',
-        'dmg': 'archive',
-        'dng': 'image',
-        'doc': 'document',
-        'docx': 'document',
-        'dvi': 'print',
-        'eot': 'font',
-        'eps': 'vector',
-        'exe': 'binary',
-        'exr': 'image',
-        'flac': 'audio',
-        'flv': 'video',
-        'gif': 'webimage',
-        'gz': 'archive',
-        'gzip': 'archive',
-        'h': 'script',
-        'htm': 'html',
-        'html': 'html',
-        'ico': 'image',
-        'icon': 'image',
-        'img': 'disk',
-        'iso': 'disk',
-        'jar': 'archive',
-        'java': 'script',
-        'jp2': 'image',
-        'jpe': 'webimage',
-        'jpeg': 'webimage',
-        'jpg': 'webimage',
-        'jpx': 'image',
-        'js': 'script',
-        'key': 'presentation',
-        'keynote': 'presentation',
-        'lisp': 'script',
-        'lz': 'archive',
-        'lzip': 'archive',
-        'm': 'script',
-        'm4a': 'audio',
-        'm4v': 'video',
-        'mds': 'disk',
-        'mdx': 'disk',
-        'mid': 'audio',
-        'midi': 'audio',
-        'mkv': 'video',
-        'mng': 'image',
-        'mp2': 'audio',
-        'mp3': 'audio',
-        'mp4': 'video',
-        'mpe': 'video',
-        'mpeg': 'video',
-        'mpg': 'video',
-        'nrg': 'disk',
-        'numbers': 'spreadsheet',
-        'odg': 'vector',
-        'odm': 'document',
-        'odp': 'presentation',
-        'ods': 'spreadsheet',
-        'odt': 'document',
-        'ogg': 'audio',
-        'ogm': 'video',
-        'otf': 'font',
-        'p12': 'certificate',
-        'pak': 'archive',
-        'pbm': 'image',
-        'pdf': 'print',
-        'pem': 'certificate',
-        'pfx': 'certificate',
-        'pgf': 'image',
-        'pgm': 'image',
-        'pk3': 'archive',
-        'pk4': 'archive',
-        'pl': 'script',
-        'png': 'webimage',
-        'pnm': 'image',
-        'ppm': 'image',
-        'pps': 'presentation',
-        'ppt': 'presentation',
-        'ps': 'print',
-        'psd': 'image',
-        'psp': 'image',
-        'py': 'script',
-        'r': 'script',
-        'ra': 'audio',
-        'rar': 'archive',
-        'rb': 'script',
-        'rpm': 'archive',
-        'rtf': 'text',
-        'sh': 'script',
-        'sub': 'disk',
-        'svg': 'vector',
-        'sxc': 'spreadsheet',
-        'sxd': 'vector',
-        'tar': 'archive',
-        'tga': 'image',
-        'tif': 'image',
-        'tiff': 'image',
-        'ttf': 'font',
-        'txt': 'text',
-        'vbs': 'script',
-        'vc': 'spreadsheet',
-        'vml': 'vector',
-        'wav': 'audio',
-        'webp': 'image',
-        'wma': 'audio',
-        'wmv': 'video',
-        'woff': 'font',
-        'xar': 'vector',
-        'xbm': 'image',
-        'xcf': 'image',
-        'xhtml': 'html',
-        'xls': 'spreadsheet',
-        'xlsx': 'spreadsheet',
-        'xml': 'html',
-        'zip': 'archive'
-    }
-
-    file_type_icon = fields.Char('File Type Icon', compute='get_attachment_type', store=True)
-    file_type = fields.Char(related='file_type_icon')     # FIXME remove in trunk
-
-    @api.depends('datas_fname')
-    @api.one
-    def get_attachment_type(self):
-        fileext = os.path.splitext(self.datas_fname or '')[1].lower()[1:]
-        self.file_type_icon = self._fileext_to_type.get(fileext, 'unknown')
diff --git a/addons/mail/models/mail_message.py b/addons/mail/models/mail_message.py
index 69a805558c9..3315ecb2fca 100644
--- a/addons/mail/models/mail_message.py
+++ b/addons/mail/models/mail_message.py
@@ -207,12 +207,12 @@ class Message(models.Model):
         partner_tree = dict((partner[0], partner) for partner in partners_names)
 
         # 2. Attachments as SUPERUSER, because could receive msg and attachments for doc uid cannot see
-        attachments_data = attachments.sudo().read(['id', 'datas_fname', 'name', 'file_type_icon'])
+        attachments_data = attachments.sudo().read(['id', 'datas_fname', 'name', 'mimetype'])
         attachments_tree = dict((attachment['id'], {
             'id': attachment['id'],
             'filename': attachment['datas_fname'],
             'name': attachment['name'],
-            'file_type_icon': attachment['file_type_icon'],
+            'mimetype': attachment['mimetype'],
         }) for attachment in attachments_data)
 
         # 3. Tracking values
diff --git a/addons/mail/static/src/img/mimetypes/webimage.png b/addons/mail/static/src/img/mimetypes/webimage.png
deleted file mode 100644
index ab2f84a1a54..00000000000
--- a/addons/mail/static/src/img/mimetypes/webimage.png
+++ /dev/null
diff --git a/addons/mail/static/src/js/mail.js b/addons/mail/static/src/js/mail.js
index 9f3ce11dca6..0567fc89464 100644
--- a/addons/mail/static/src/js/mail.js
+++ b/addons/mail/static/src/js/mail.js
@@ -14,6 +14,7 @@ var utils = require('web.utils');
 var web_client = require('web.web_client');
 var Widget = require('web.Widget');
 var View = require('web.View');
+var formats = require('web.formats');
 
 var _t = core._t;
 var QWeb = core.qweb;
@@ -902,7 +903,7 @@ var MailThread = Attachment.extend ({
         else if (author) {
             avt  = '/web/image/res.partner/' + author[0] + '/image_small';
         }else {
-            avt  = '/web/image/res.partner/' + session.uid + '/image_small';
+            avt  = '/web/image/res.users/' + session.uid + '/image_small';
         }
         return avt;
     },
@@ -1357,7 +1358,8 @@ var ComposeMessage = Attachment.extend ({
                 'name': filename,
                 'filename': filename,
                 'url': '',
-                'upload': true
+                'upload': true,
+                'mimetype': ''
             });
 
             this.$(".o_timeline_msg_attachment_list").html(this.display_attachments(this));
@@ -1379,6 +1381,7 @@ var ComposeMessage = Attachment.extend ({
                         'id': result.id,
                         'name': result.name,
                         'filename': result.filename,
+                        'mimetype': result.mimetype,
                         'url': '/web/content/' + result.id + '?download=true'
                     };
                 }
diff --git a/addons/mail/static/src/xml/mail.xml b/addons/mail/static/src/xml/mail.xml
index d3197d7d11b..f1de2b68daf 100644
--- a/addons/mail/static/src/xml/mail.xml
+++ b/addons/mail/static/src/xml/mail.xml
@@ -191,34 +191,17 @@
     -->
 <t t-name="ThreadMessageAttachments">
     <t t-foreach='widget.format_attachments(record)' t-as='attachment'>
-        <t t-if="attachment.file_type_icon !== 'webimage'">
-            <div t-attf-class="oe_attachment #{attachment.upload ? 'oe_uploading' : ''}">
-                <a t-att-href='attachment.url' target="_blank">
-                    <img t-att-src="'/mail/static/src/img/mimetypes/' + (attachment.file_type_icon or 'unknown') + '.png'"></img>
-                    <div class='oe_name'><t t-raw='attachment.name' /></div>
-                </a>
-                <div class='oe_delete oe_e'>
-                    <i class='fa fa-times-circle' title="Delete this attachment" t-att-data-id="attachment.id"/>
-                </div>
-                <div class='oe_progress_bar'>
-                    uploading
-                </div>
+        <div t-attf-class="oe_attachment oe_preview #{attachment.upload ? 'oe_uploading' : ''}">
+            <a class="o_image" t-att-href='attachment.url' target="_blank" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/100x80">
+                <div class='oe_name'><t t-raw='attachment.name'/></div>
+            </a>
+            <div class='oe_delete oe_e'>
+                <i class='fa fa-times-circle' title="Delete this attachment" t-att-data-id="attachment.id"/>
             </div>
-        </t>
-        <t t-if="attachment.file_type_icon === 'webimage'">
-            <div t-attf-class="oe_attachment oe_preview #{attachment.upload ? 'oe_uploading' : ''}">
-                <a t-att-href='attachment.url' target="_blank">
-                    <img t-attf-src="/web/image/#{attachment.id}/100x80"></img>
-                    <div class='oe_name'><t t-raw='attachment.name'/></div>
-                </a>
-                <div class='oe_delete oe_e'>
-                    <i class='fa fa-times-circle' title="Delete this attachment" t-att-data-id="attachment.id"/>
-                </div>
-                <div class='oe_progress_bar'>
-                    uploading
-                </div>
+            <div class='oe_progress_bar'>
+                uploading
             </div>
-        </t>
+        </div>
     </t>
 </t>
 
diff --git a/addons/mail/views/mail_message_views.xml b/addons/mail/views/mail_message_views.xml
index 6f2b5c88dd6..6c3f28ee6af 100644
--- a/addons/mail/views/mail_message_views.xml
+++ b/addons/mail/views/mail_message_views.xml
@@ -112,7 +112,7 @@
             <field name="model">ir.attachment</field>
             <field name="arch" type="xml">
                 <kanban>
-                    <field name="file_type_icon"/>
+                    <field name="mimetype"/>
                     <field name="url"/>
                     <field name="name"/>
                     <templates>
@@ -120,13 +120,10 @@
                             <div class="oe_kanban_global_click">
                                 <div class="oe_kanban_vignette">
                                     <div class="oe_attachment">
-                                        <div t-if="record.file_type_icon.value != 'webimage'">
-                                            <img t-att-src="'/mail/static/src/img/mimetypes/' + record.file_type_icon.value + '.png'"></img>
+                                        <div t-if="!record.url.value">
+                                            <div class="o_image" t-att-data-mimetype="record.mimetype.value" t-attf-data-src="/web/image/#{record.id}/100x80"/>
                                         </div>
-                                        <div t-if="record.file_type_icon.value == 'webimage' and !record.url.value">
-                                            <img t-att-src="kanban_image('ir.attachment', 'datas', record.id.value)"/>
-                                        </div>
-                                        <div t-if="record.file_type_icon.value and record.url.value">
+                                        <div t-if="record.url.value">
                                             <img t-att-src="record.url.value"/>
                                         </div>
                                         <div class="oe_name">
diff --git a/addons/project/project.py b/addons/project/project.py
index a954de936a1..633f929927d 100644
--- a/addons/project/project.py
+++ b/addons/project/project.py
@@ -439,7 +439,7 @@ class task(osv.osv):
     def _compute_displayed_image(self, cr, uid, ids, prop, arg, context=None):
         res = {}
         for line in self.browse(cr, uid, ids, context=context):
-            res[line.id] = line.attachment_ids and line.attachment_ids.filtered(lambda x: x.file_type_icon == 'webimage')[0] or None
+            res[line.id] = line.attachment_ids and line.attachment_ids.filtered(lambda x: x.mimetype.startswith('image'))[0] or None
         return res
 
     _columns = {
diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index b235bd73094..10556c1e30f 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1875,17 +1875,34 @@
   border: solid 1px rgba(124, 123, 173, 0.14);
 }
 .openerp .oe_fileupload .oe_attachments .oe_attachment {
+  background-repeat: no-repeat;
+  word-wrap: break-word;
   padding: 2px;
   padding-left: 4px;
   padding-right: 4px;
+  overflow: hidden;
+}
+.openerp .oe_fileupload .oe_attachments .oe_attachment a {
+  display: block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  word-wrap: break-word;
+  width: 100px;
+  height: 80px;
 }
-.openerp .oe_fileupload .oe_attachments .oe_attachment .fa {
+.openerp .oe_fileupload .oe_attachments .oe_attachment > .fa {
   font-size: 23px;
-  margin-top: -5px;
+  position: absolute;
+  top: -5px;
+  right: -8px;
 }
-.openerp .oe_fileupload .oe_attachments .oe_attachment .fa:hover {
+.openerp .oe_fileupload .oe_attachments .oe_attachment > .fa:hover {
   text-decoration: none;
 }
+.openerp .oe_fileupload .oe_attachments .oe_attachment .fa-inverse {
+  font-size: 1.15em;
+  margin-top: 1px;
+}
 .openerp .oe_fileupload .oe_attachments .oe_attachment:nth-child(odd) {
   background: white;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 5b48b1dc8b4..64a73b8addd 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1650,14 +1650,29 @@ $sheet-padding: 16px
             border-radius: 2px
             border: solid 1px rgba(124,123,173,0.14)
             .oe_attachment
+                background-repeat: no-repeat
+                word-wrap: break-word
                 padding: 2px
                 padding-left: 4px
                 padding-right: 4px
-                .fa
+                overflow: hidden
+                a
+                    display: block
+                    background-repeat: no-repeat
+                    background-size: contain
+                    word-wrap: break-word
+                    width: 100px
+                    height: 80px
+                > .fa
                     font-size: 23px
-                    margin-top: -5px
-                .fa:hover
+                    position: absolute
+                    top: -5px
+                    right: -8px
+                > .fa:hover
                     text-decoration: none
+                .fa-inverse
+                    font-size: 1.15em
+                    margin-top: 1px
             .oe_attachment:nth-child(odd)
                 background: white
             .oe_attachment:nth-child(even)
diff --git a/addons/web/static/src/css/mimetypes.css b/addons/web/static/src/css/mimetypes.css
new file mode 100644
index 00000000000..43aa6b7fae9
--- /dev/null
+++ b/addons/web/static/src/css/mimetypes.css
@@ -0,0 +1,66 @@
+.o_image {
+    background-image: url('/web/static/src/img/mimetypes/unknown.png');
+    background-size: contain;
+    width: 100px;
+    height: 80px;
+    display: inline-block;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.o_image[data-mimetype^='image'] {
+    background-image: url('/web/static/src/img/mimetypes/image.png');
+}
+.o_image[data-mimetype^='audio'] {
+    background-image: url('/web/static/src/img/mimetypes/audio.png');
+}
+.o_image[data-mimetype*='octet-stream'], .o_image[data-mimetype*='download'] {
+    background-image: url('/web/static/src/img/mimetypes/binary.png');
+}
+.o_image[data-mimetype^='video'], .o_image[title$='.mp4'], .o_image[title$='.avi'] {
+    background-image: url('/web/static/src/img/mimetypes/video.png');
+}
+.o_image[data-mimetype$='archive'], .o_image[data-mimetype$='compressed'], .o_image[data-mimetype*='zip'], .o_image[data-mimetype$='tar'], .o_image[data-mimetype*='package'] {
+    background-image: url('/web/static/src/img/mimetypes/archive.png');
+}
+.o_image[data-mimetype='application/pdf'] {
+    background-image: url('/web/static/src/img/mimetypes/pdf.png');
+}
+.o_image[data-mimetype^='text'], .o_image[data-mimetype$='rtf'] {
+    background-image: url('/web/static/src/img/mimetypes/text.png');
+}
+.o_image[data-mimetype^='text-master'], .o_image[data-mimetype*='document'], .o_image[data-mimetype*='msword'] {
+    background-image: url('/web/static/src/img/mimetypes/document.png');
+}
+.o_image[data-mimetype$='postscript'], .o_image[data-mimetype$='cdr'], .o_image[data-mimetype$='xara'], .o_image[data-mimetype$='cgm'], .o_image[data-mimetype$='graphics'], .o_image[data-mimetype$='draw'], .o_image[data-mimetype*='svg'] {
+    background-image: url('/web/static/src/img/mimetypes/vector.png');
+}
+.o_image[data-mimetype*='xml'], .o_image[data-mimetype$='css'], .o_image[data-mimetype$='html'] {
+    background-image: url('/web/static/src/img/mimetypes/html.png');
+}
+.o_image[data-mimetype*='-image'], .o_image[data-mimetype*='diskimage'] {
+    background-image: url('/web/static/src/img/mimetypes/disk.png');
+}
+.o_image[data-mimetype$='csv'], .o_image[data-mimetype*='vc'], .o_image[data-mimetype*='excel'], .o_image[data-mimetype$='numbers'], .o_image[data-mimetype$='calc'], .o_image[data-mimetype*='mods'], .o_image[data-mimetype*='spreadsheet'] {
+    background-image: url('/web/static/src/img/mimetypes/spreadsheet.png');
+}
+.o_image[data-mimetype^='key'] {
+    background-image: url('/web/static/src/img/mimetypes/certificate.png');
+}
+.o_image[data-mimetype*='presentation'], .o_image[data-mimetype*='keynote'], .o_image[data-mimetype*='teacher'], .o_image[data-mimetype*='slideshow'], .o_image[data-mimetype*='powerpoint'] {
+    background-image: url('/web/static/src/img/mimetypes/presentation.png');
+}
+.o_image[data-mimetype*='cert'], .o_image[data-mimetype*='rules'], .o_image[data-mimetype*='pkcs'], .o_image[data-mimetype$='stl'], .o_image[data-mimetype$='crl'] {
+    background-image: url('/web/static/src/img/mimetypes/certificate.png');
+}
+.o_image[data-mimetype*='-font'] {
+    background-image: url('/web/static/src/img/mimetypes/font.png');
+}
+.o_image[data-mimetype*='-dvi'] {
+    background-image: url('/web/static/src/img/mimetypes/print.png');
+}
+.o_image[data-mimetype*='script'], .o_image[data-mimetype$='bat'], .o_image[data-mimetype$='cgi'], .o_image[data-mimetype$='-c'], .o_image[data-mimetype*='java'], .o_image[data-mimetype*='ruby'] {
+    background-image: url('/web/static/src/img/mimetypes/script.png');
+}
+.o_image[data-mimetype*='calendar'], .o_image[data-mimetype$='ldif'] {
+    background-image: url('/web/static/src/img/mimetypes/calendar.png');
+}
diff --git a/addons/mail/static/src/img/mimetypes/addresses.png b/addons/web/static/src/img/mimetypes/addresses.png
index 586f1257196..586f1257196 100644
--- a/addons/mail/static/src/img/mimetypes/addresses.png
+++ b/addons/web/static/src/img/mimetypes/addresses.png
diff --git a/addons/mail/static/src/img/mimetypes/archive.png b/addons/web/static/src/img/mimetypes/archive.png
index 704d962d426..704d962d426 100644
--- a/addons/mail/static/src/img/mimetypes/archive.png
+++ b/addons/web/static/src/img/mimetypes/archive.png
diff --git a/addons/mail/static/src/img/mimetypes/audio.png b/addons/web/static/src/img/mimetypes/audio.png
index 6dd4c635fe7..6dd4c635fe7 100644
--- a/addons/mail/static/src/img/mimetypes/audio.png
+++ b/addons/web/static/src/img/mimetypes/audio.png
diff --git a/addons/mail/static/src/img/mimetypes/binary.png b/addons/web/static/src/img/mimetypes/binary.png
index 5708c9fc2a5..5708c9fc2a5 100644
--- a/addons/mail/static/src/img/mimetypes/binary.png
+++ b/addons/web/static/src/img/mimetypes/binary.png
diff --git a/addons/mail/static/src/img/mimetypes/calendar.png b/addons/web/static/src/img/mimetypes/calendar.png
index 81791af05e0..81791af05e0 100644
--- a/addons/mail/static/src/img/mimetypes/calendar.png
+++ b/addons/web/static/src/img/mimetypes/calendar.png
diff --git a/addons/mail/static/src/img/mimetypes/certificate.png b/addons/web/static/src/img/mimetypes/certificate.png
index e48cb1de432..e48cb1de432 100644
--- a/addons/mail/static/src/img/mimetypes/certificate.png
+++ b/addons/web/static/src/img/mimetypes/certificate.png
diff --git a/addons/mail/static/src/img/mimetypes/disk.png b/addons/web/static/src/img/mimetypes/disk.png
index 9c241cdf896..9c241cdf896 100644
--- a/addons/mail/static/src/img/mimetypes/disk.png
+++ b/addons/web/static/src/img/mimetypes/disk.png
diff --git a/addons/mail/static/src/img/mimetypes/document.png b/addons/web/static/src/img/mimetypes/document.png
index fee2f1619b6..fee2f1619b6 100644
--- a/addons/mail/static/src/img/mimetypes/document.png
+++ b/addons/web/static/src/img/mimetypes/document.png
diff --git a/addons/mail/static/src/img/mimetypes/font.png b/addons/web/static/src/img/mimetypes/font.png
index 3b04787b9f9..3b04787b9f9 100644
--- a/addons/mail/static/src/img/mimetypes/font.png
+++ b/addons/web/static/src/img/mimetypes/font.png
diff --git a/addons/mail/static/src/img/mimetypes/html.png b/addons/web/static/src/img/mimetypes/html.png
index 440c5bc9972..440c5bc9972 100644
--- a/addons/mail/static/src/img/mimetypes/html.png
+++ b/addons/web/static/src/img/mimetypes/html.png
diff --git a/addons/mail/static/src/img/mimetypes/image.png b/addons/web/static/src/img/mimetypes/image.png
index ab2f84a1a54..ab2f84a1a54 100644
--- a/addons/mail/static/src/img/mimetypes/image.png
+++ b/addons/web/static/src/img/mimetypes/image.png
diff --git a/addons/web/static/src/img/mimetypes/pdf.png b/addons/web/static/src/img/mimetypes/pdf.png
new file mode 100644
index 00000000000..bfb4850594f
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/pdf.png
diff --git a/addons/mail/static/src/img/mimetypes/presentation.png b/addons/web/static/src/img/mimetypes/presentation.png
index 8642a8e9298..8642a8e9298 100644
--- a/addons/mail/static/src/img/mimetypes/presentation.png
+++ b/addons/web/static/src/img/mimetypes/presentation.png
diff --git a/addons/mail/static/src/img/mimetypes/print.png b/addons/web/static/src/img/mimetypes/print.png
index fee2f1619b6..fee2f1619b6 100644
--- a/addons/mail/static/src/img/mimetypes/print.png
+++ b/addons/web/static/src/img/mimetypes/print.png
diff --git a/addons/mail/static/src/img/mimetypes/script.png b/addons/web/static/src/img/mimetypes/script.png
index 10c58c0bcc3..10c58c0bcc3 100644
--- a/addons/mail/static/src/img/mimetypes/script.png
+++ b/addons/web/static/src/img/mimetypes/script.png
diff --git a/addons/mail/static/src/img/mimetypes/spreadsheet.png b/addons/web/static/src/img/mimetypes/spreadsheet.png
index 77a834697f1..77a834697f1 100644
--- a/addons/mail/static/src/img/mimetypes/spreadsheet.png
+++ b/addons/web/static/src/img/mimetypes/spreadsheet.png
diff --git a/addons/mail/static/src/img/mimetypes/text.png b/addons/web/static/src/img/mimetypes/text.png
index e65d2ec5a67..e65d2ec5a67 100644
--- a/addons/mail/static/src/img/mimetypes/text.png
+++ b/addons/web/static/src/img/mimetypes/text.png
diff --git a/addons/mail/static/src/img/mimetypes/unknown.png b/addons/web/static/src/img/mimetypes/unknown.png
index e65d2ec5a67..e65d2ec5a67 100644
--- a/addons/mail/static/src/img/mimetypes/unknown.png
+++ b/addons/web/static/src/img/mimetypes/unknown.png
diff --git a/addons/mail/static/src/img/mimetypes/vector.png b/addons/web/static/src/img/mimetypes/vector.png
index c4595ec1b24..c4595ec1b24 100644
--- a/addons/mail/static/src/img/mimetypes/vector.png
+++ b/addons/web/static/src/img/mimetypes/vector.png
diff --git a/addons/mail/static/src/img/mimetypes/video.png b/addons/web/static/src/img/mimetypes/video.png
index e3a87b5bde6..e3a87b5bde6 100644
--- a/addons/mail/static/src/img/mimetypes/video.png
+++ b/addons/web/static/src/img/mimetypes/video.png
diff --git a/addons/web/static/src/js/framework/formats.js b/addons/web/static/src/js/framework/formats.js
index aafe5766e49..4b5ff8b4048 100644
--- a/addons/web/static/src/js/framework/formats.js
+++ b/addons/web/static/src/js/framework/formats.js
@@ -7,7 +7,6 @@ var utils = require('web.utils');
 
 var _t = core._t;
 
-
 /**
  * Formats a single atomic value based on a field descriptor
  *
diff --git a/addons/web/static/src/js/views/form_relational_widgets.js b/addons/web/static/src/js/views/form_relational_widgets.js
index 92d2360163c..a3e0286fb28 100644
--- a/addons/web/static/src/js/views/form_relational_widgets.js
+++ b/addons/web/static/src/js/views/form_relational_widgets.js
@@ -12,6 +12,7 @@ var Model = require('web.DataModel');
 var session = require('web.session');
 var utils = require('web.utils');
 var ViewManager = require('web.ViewManager');
+var formats = require('web.formats');
 
 
 var _t = core._t;
@@ -1471,10 +1472,10 @@ var FieldMany2ManyBinaryMultiFiles = AbstractManyField.extend(common.Reinitializ
         var _value = _.filter(ids, function (id) { return typeof self.data[id] == 'undefined'; } );
         // send request for get_name
         if (_value.length) {
-            return this.ds_file.call('read', [_value, ['id', 'name', 'datas_fname']]).then(function (datas) {
+            return this.ds_file.call('read', [_value, ['id', 'name', 'datas_fname', 'mimetype']]).then(function (datas) {
                 _.each(datas, function (data) {
                     data.no_unlink = true;
-                    data.url = '/web/content/' + data.id + '?download=true';
+                    data.url = self.get_file_url(data);
                     self.data[data.id] = data;
                 });
                 return ids;
@@ -1495,6 +1496,13 @@ var FieldMany2ManyBinaryMultiFiles = AbstractManyField.extend(common.Reinitializ
             $input.after($input.clone(true)).remove();
             self.$(".oe_fileupload").show();
 
+            // display image thumbnail
+            self.$(".o_image[data-mimetype^='image']").each(function () {
+                var $img = $(this);
+                if (/gif|jpe|jpg|png/.test($img.data('mimetype')) && $img.data('src')) {
+                    $img.css('background-image', "url('" + $img.data('src') + "')");
+                }
+            });
         });
     },
     on_file_change: function (event) {
@@ -1548,20 +1556,9 @@ var FieldMany2ManyBinaryMultiFiles = AbstractManyField.extend(common.Reinitializ
         } else {
             if (this.data[0] && this.data[0].filename == result.filename && this.data[0].upload) {
                 delete this.data[0];
-                this.data[result.id] = {
-                    'id': result.id,
-                    'name': result.name,
-                    'filename': result.filename,
-                    'url': this.get_file_url(result)
-                };
-            } else {
-                this.data[result.id] = {
-                    'id': result.id,
-                    'name': result.name,
-                    'filename': result.filename,
-                    'url': this.get_file_url(result)
-                };
             }
+            result.url = this.get_file_url(result);
+            this.data[result.id] = result;
             var values = _.clone(this.get('value'));
             values.push(result.id);
             this.set({'value': values});
@@ -1570,7 +1567,7 @@ var FieldMany2ManyBinaryMultiFiles = AbstractManyField.extend(common.Reinitializ
     },
     on_file_delete: function (event) {
         event.stopPropagation();
-        var file_id=$(event.target).data("id");
+        var file_id=$(event.target).closest('.oe_delete').data("id");
         if (file_id) {
             var files = _.filter(this.get('value'), function (id) {return id != file_id;});
             if(!this.data[file_id].no_unlink) {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index dc67b36381e..07bf5b97bd9 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1013,11 +1013,14 @@
                         <span class="oe_fileuploader_in_process">...Upload in progress...</span>
                         <t t-raw="file.name || file.filename"/>
                     </span>
-                    <a t-if="(!file.upload or file.percent_loaded&gt;=100)" t-att-href="file.url" t-attf-title="#{(file.name || file.filename) + (file.date?' \n('+file.date+')':'' )}">
-                        <t t-raw="file.name || file.filename"/>
-                    </a>
                     <t t-if="(!file.upload or file.percent_loaded&gt;=100)">
-                        <i class="oe_right oe_delete fa fa-times-circle" title="Delete this file" t-attf-data-id="#{file.id}"/>
+                        <a class="o_image" t-att-href="file.url" t-attf-title="#{(file.name || file.filename) + (file.date?' \n('+file.date+')':'' )}" t-att-data-mimetype="file.mimetype" t-attf-data-src="/web/image/#{file.id}/100x80">
+                            <t t-raw="file.name || file.filename"/>
+                        </a>
+                        <span class="fa fa-stack oe_delete" title="Delete this file" t-attf-data-id="#{file.id}">
+                            <i class="fa fa-circle fa-stack-1x fa-inverse"></i>
+                            <i class="fa fa-times-circle fa-stack-1x"></i>
+                        </span>
                     </t>
                 </div>
             </t>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 1a674676553..64d60dcf379 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -94,6 +94,7 @@
                 odoo._modules = <t t-raw="get_modules_order()"/>;
             </script>
             <link rel="stylesheet" href="/web/static/src/css/base.css"/>
+            <link rel="stylesheet" href="/web/static/src/css/mimetypes.css"/>
             <link rel="stylesheet" href="/web/static/src/css/data_export.css"/>
             <link rel="stylesheet" href="/base/static/src/css/modules.css"/>
 
diff --git a/addons/web_editor/models/ir_qweb.py b/addons/web_editor/models/ir_qweb.py
index 87dd6e58226..503f95a0d38 100644
--- a/addons/web_editor/models/ir_qweb.py
+++ b/addons/web_editor/models/ir_qweb.py
@@ -337,7 +337,7 @@ class Image(orm.AbstractModel):
             if max_width or max_height:
                 max_size = '%sx%s' % (max_width, max_height)
 
-        sha = hashlib.sha1(record.write_date).hexdigest()[0:7]
+        sha = hashlib.sha1(getattr(record, '__last_update')).hexdigest()[0:7]
         max_size = '' if max_size is None else '/%s' % max_size
         src = '/web/image/%s/%s/%s%s?unique=%s' % (record._name, record.id, field_name, max_size, sha)
 
diff --git a/addons/web_kanban/static/src/js/kanban_record.js b/addons/web_kanban/static/src/js/kanban_record.js
index 787fed34978..40c7c279d87 100644
--- a/addons/web_kanban/static/src/js/kanban_record.js
+++ b/addons/web_kanban/static/src/js/kanban_record.js
@@ -57,6 +57,7 @@ var KanbanRecord = Widget.extend({
             widget: this,
             read_only_mode: this.read_only_mode,
             user_context: session.user_context,
+            formats: formats,
         };
         for (var p in this) {
             if (_.str.startsWith(p, 'kanban_')) {
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 3c57c03ac50..1d3291008af 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -561,7 +561,7 @@ class website(osv.osv):
     def image_url(self, cr, uid, record, field, size=None, context=None):
         """Returns a local url that points to the image field of a given browse record."""
         sudo_record = record.sudo()
-        sha = hashlib.sha1(sudo_record.write_date).hexdigest()[0:7]
+        sha = hashlib.sha1(getattr(sudo_record, '__last_update')).hexdigest()[0:7]
         size = '' if size is None else '/%s' % size
         return '/web/image/%s/%s/%s%s?unique=%s' % (record._name, record.id, field, size, sha)
 
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index f049593e8d7..ded64d27704 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -230,6 +230,13 @@ base.ready().then(function () {
         }
     },0);
 
+// display image thumbnail
+$(".o_image[data-mimetype^='image']").each(function () {
+    var $img = $(this);
+    if (/gif|jpe|jpg|png/.test($img.data('mimetype')) && $img.data('src')) {
+        $img.css('background-image', "url('" + $img.data('src') + "')");
+    }
+});
 
 /**
  * Object who contains all method and bind for the top bar, the template is create server side.
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ad5b53ac608..8d102c592a1 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -13,6 +13,7 @@
 <template id="assets_frontend" name="Website assets">
     <link id="bootstrap_css" rel="stylesheet" href='/website/static/src/less/import_bootstrap.less'/>
 
+    <link rel="stylesheet" href="/web/static/src/css/mimetypes.css"/>
     <link rel="stylesheet" href='/website/static/src/css/website.css'/>
 
     <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
diff --git a/addons/website_mail_channel/views/website_mail_channel.xml b/addons/website_mail_channel/views/website_mail_channel.xml
index 60928ee3819..2961dad2086 100644
--- a/addons/website_mail_channel/views/website_mail_channel.xml
+++ b/addons/website_mail_channel/views/website_mail_channel.xml
@@ -206,16 +206,7 @@
                                 <div class="o_mg_link_content">
                                     <div class="col-md-2 col-sm-3 text-center" t-foreach='message.attachment_ids' t-as='attachment'>
                                         <a t-attf-href="/web/content/#{attachment.id}?download=true" target="_blank">
-                                            <t t-if="attachment.file_type == 'webimage'">
-                                                <img t-att-src="'/web/image/' + str(attachment.id) + '/100x80'"
-                                                    class='oe_attachment_embedded'
-                                                    t-att-title="attachment.name"/>
-                                            </t>
-                                            <t t-if="attachment.file_type != 'webimage'">
-                                                <img t-att-src="'/mail/static/src/img/mimetypes/' + (attachment.file_type or 'disk') + '.png'"
-                                                    class='oe_attachment_webimage'
-                                                    t-att-title="attachment.name"/>
-                                            </t>
+                                            <div class='oe_attachment_embedded o_image' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/100x80"/>
                                             <div class='oe_attachment_name'><t t-raw='attachment.name' /></div>
                                         </a>
                                     </div>
diff --git a/addons/website_sale/static/src/css/website_mail.css b/addons/website_sale/static/src/css/website_mail.css
index 34cc159982c..b43f9fc8d65 100644
--- a/addons/website_sale/static/src/css/website_mail.css
+++ b/addons/website_sale/static/src/css/website_mail.css
@@ -28,14 +28,6 @@
   -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19);
 }
-.oe_msg_attachment a img.oe_attachment_webimage {
-  display: block;
-  position: relative;
-  width: 48px;
-  height: 48px;
-  top: 0px;
-  margin-left: 36px;
-}
 .oe_msg_attachment a div.oe_attachment_name {
   display: inline-block;
   max-width: 100%;
diff --git a/addons/website_sale/static/src/css/website_mail.sass b/addons/website_sale/static/src/css/website_mail.sass
index 7bc2a54214d..a373a6e73c4 100644
--- a/addons/website_sale/static/src/css/website_mail.sass
+++ b/addons/website_sale/static/src/css/website_mail.sass
@@ -29,13 +29,6 @@
             -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19)
             -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19)
             box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19)
-        img.oe_attachment_webimage
-            display: block
-            position: relative
-            width: 48px
-            height: 48px
-            top: 0px
-            margin-left: 36px
         div.oe_attachment_name
             display: inline-block
             max-width: 100%