3 files changed, 104 insertions, 6 deletions
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');
+}