[IMP] web: use css to display attachment mimetype

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

26 files changed, 124 insertions, 27 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');
+}
diff --git a/addons/web/static/src/img/mimetypes/addresses.png b/addons/web/static/src/img/mimetypes/addresses.png
new file mode 100644
index 00000000000..586f1257196
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/addresses.png
diff --git a/addons/web/static/src/img/mimetypes/archive.png b/addons/web/static/src/img/mimetypes/archive.png
new file mode 100644
index 00000000000..704d962d426
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/archive.png
diff --git a/addons/web/static/src/img/mimetypes/audio.png b/addons/web/static/src/img/mimetypes/audio.png
new file mode 100644
index 00000000000..6dd4c635fe7
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/audio.png
diff --git a/addons/web/static/src/img/mimetypes/binary.png b/addons/web/static/src/img/mimetypes/binary.png
new file mode 100644
index 00000000000..5708c9fc2a5
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/binary.png
diff --git a/addons/web/static/src/img/mimetypes/calendar.png b/addons/web/static/src/img/mimetypes/calendar.png
new file mode 100644
index 00000000000..81791af05e0
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/calendar.png
diff --git a/addons/web/static/src/img/mimetypes/certificate.png b/addons/web/static/src/img/mimetypes/certificate.png
new file mode 100644
index 00000000000..e48cb1de432
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/certificate.png
diff --git a/addons/web/static/src/img/mimetypes/disk.png b/addons/web/static/src/img/mimetypes/disk.png
new file mode 100644
index 00000000000..9c241cdf896
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/disk.png
diff --git a/addons/web/static/src/img/mimetypes/document.png b/addons/web/static/src/img/mimetypes/document.png
new file mode 100644
index 00000000000..fee2f1619b6
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/document.png
diff --git a/addons/web/static/src/img/mimetypes/font.png b/addons/web/static/src/img/mimetypes/font.png
new file mode 100644
index 00000000000..3b04787b9f9
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/font.png
diff --git a/addons/web/static/src/img/mimetypes/html.png b/addons/web/static/src/img/mimetypes/html.png
new file mode 100644
index 00000000000..440c5bc9972
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/html.png
diff --git a/addons/web/static/src/img/mimetypes/image.png b/addons/web/static/src/img/mimetypes/image.png
new file mode 100644
index 00000000000..ab2f84a1a54
--- /dev/null
+++ 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/web/static/src/img/mimetypes/presentation.png b/addons/web/static/src/img/mimetypes/presentation.png
new file mode 100644
index 00000000000..8642a8e9298
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/presentation.png
diff --git a/addons/web/static/src/img/mimetypes/print.png b/addons/web/static/src/img/mimetypes/print.png
new file mode 100644
index 00000000000..fee2f1619b6
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/print.png
diff --git a/addons/web/static/src/img/mimetypes/script.png b/addons/web/static/src/img/mimetypes/script.png
new file mode 100644
index 00000000000..10c58c0bcc3
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/script.png
diff --git a/addons/web/static/src/img/mimetypes/spreadsheet.png b/addons/web/static/src/img/mimetypes/spreadsheet.png
new file mode 100644
index 00000000000..77a834697f1
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/spreadsheet.png
diff --git a/addons/web/static/src/img/mimetypes/text.png b/addons/web/static/src/img/mimetypes/text.png
new file mode 100644
index 00000000000..e65d2ec5a67
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/text.png
diff --git a/addons/web/static/src/img/mimetypes/unknown.png b/addons/web/static/src/img/mimetypes/unknown.png
new file mode 100644
index 00000000000..e65d2ec5a67
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/unknown.png
diff --git a/addons/web/static/src/img/mimetypes/vector.png b/addons/web/static/src/img/mimetypes/vector.png
new file mode 100644
index 00000000000..c4595ec1b24
--- /dev/null
+++ b/addons/web/static/src/img/mimetypes/vector.png
diff --git a/addons/web/static/src/img/mimetypes/video.png b/addons/web/static/src/img/mimetypes/video.png
new file mode 100644
index 00000000000..e3a87b5bde6
--- /dev/null
+++ 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>