[IMP] web, mail: mimetype icons design

- Redesign all mimetype icons
- use SVG to reduce file size and improve rendering quality.
- Add a data attribute to attachments to detect the file extension (in somes
  cases just mimetype is not accurate)

1 files changed, 37 insertions, 34 deletions

diff --git a/addons/web/static/src/less/mimetypes.less b/addons/web/static/src/less/mimetypes.less
index ad0ddbacd81..e4d2624dc6d 100644
--- a/addons/web/static/src/less/mimetypes.less
+++ b/addons/web/static/src/less/mimetypes.less
@@ -1,67 +1,70 @@
 .o_image {
-    background-image: url('/web/static/src/img/mimetypes/unknown.png');
-    background-size: contain;
-    width: 100px;
-    height: 100px;
+    .square(38px);
     display: inline-block;
-    background-position: center;
-    background-repeat: no-repeat;
+    background-image: url('/web/static/src/img/mimetypes/unknown.svg');
+    background-size: contain;
 
     &[data-mimetype^='image'] {
-        background-image: url('/web/static/src/img/mimetypes/image.png');
+        background-image: url('/web/static/src/img/mimetypes/image.svg');
     }
     &[data-mimetype^='audio'] {
-        background-image: url('/web/static/src/img/mimetypes/audio.png');
+        background-image: url('/web/static/src/img/mimetypes/audio.svg');
     }
-    &[data-mimetype*='octet-stream'], &[data-mimetype*='download'] {
-        background-image: url('/web/static/src/img/mimetypes/binary.png');
+    &[data-mimetype^='text'], &[data-mimetype$='rtf'] {
+        background-image: url('/web/static/src/img/mimetypes/text.svg');
+    }
+    &[data-mimetype*='octet-stream'], &[data-mimetype*='download'], &[data-mimetype*='python'] {
+        background-image: url('/web/static/src/img/mimetypes/binary.svg');
     }
     &[data-mimetype^='video'], &[title$='.mp4'], &[title$='.avi'] {
-        background-image: url('/web/static/src/img/mimetypes/video.png');
+        background-image: url('/web/static/src/img/mimetypes/video.svg');
     }
     &[data-mimetype$='archive'], &[data-mimetype$='compressed'], &[data-mimetype*='zip'], &[data-mimetype$='tar'], &[data-mimetype*='package'] {
-        background-image: url('/web/static/src/img/mimetypes/archive.png');
+        background-image: url('/web/static/src/img/mimetypes/archive.svg');
     }
     &[data-mimetype='application/pdf'] {
-        background-image: url('/web/static/src/img/mimetypes/pdf.png');
-    }
-    &[data-mimetype^='text'], &[data-mimetype$='rtf'] {
-        background-image: url('/web/static/src/img/mimetypes/text.png');
+        background-image: url('/web/static/src/img/mimetypes/pdf.svg');
     }
-    &[data-mimetype^='text-master'], &[data-mimetype*='document'], &[data-mimetype*='msword'] {
-        background-image: url('/web/static/src/img/mimetypes/document.png');
+    &[data-mimetype^='text-master'], &[data-mimetype*='document'], &[data-mimetype*='msword'], &[data-mimetype*='wordprocessing'] {
+        background-image: url('/web/static/src/img/mimetypes/document.svg');
     }
-    &[data-mimetype$='postscript'], &[data-mimetype$='cdr'], &[data-mimetype$='xara'], &[data-mimetype$='cgm'], &[data-mimetype$='graphics'], &[data-mimetype$='draw'], &[data-mimetype*='svg'] {
-        background-image: url('/web/static/src/img/mimetypes/vector.png');
+    &[data-mimetype*='application/xml'], &[data-mimetype$='html'] {
+        background-image: url('/web/static/src/img/mimetypes/web_code.svg');
     }
-    &[data-mimetype*='xml'], &[data-mimetype$='css'], &[data-mimetype$='html'] {
-        background-image: url('/web/static/src/img/mimetypes/html.png');
+    &[data-mimetype$='css'], &[data-mimetype$='less'], &[data-ext$='less'] {
+        background-image: url('/web/static/src/img/mimetypes/web_style.svg');
     }
-    &[data-mimetype*='-image'], &[data-mimetype*='diskimage'] {
-        background-image: url('/web/static/src/img/mimetypes/disk.png');
+    &[data-mimetype*='-image'], &[data-mimetype*='diskimage'], &[data-ext$='dmg'] {
+        background-image: url('/web/static/src/img/mimetypes/disk.svg');
     }
     &[data-mimetype$='csv'], &[data-mimetype*='vc'], &[data-mimetype*='excel'], &[data-mimetype$='numbers'], &[data-mimetype$='calc'], &[data-mimetype*='mods'], &[data-mimetype*='spreadsheet'] {
-        background-image: url('/web/static/src/img/mimetypes/spreadsheet.png');
+        background-image: url('/web/static/src/img/mimetypes/spreadsheet.svg');
     }
     &[data-mimetype^='key'] {
-        background-image: url('/web/static/src/img/mimetypes/certificate.png');
+        background-image: url('/web/static/src/img/mimetypes/certificate.svg');
     }
     &[data-mimetype*='presentation'], &[data-mimetype*='keynote'], &[data-mimetype*='teacher'], &[data-mimetype*='slideshow'], &[data-mimetype*='powerpoint'] {
-        background-image: url('/web/static/src/img/mimetypes/presentation.png');
+        background-image: url('/web/static/src/img/mimetypes/presentation.svg');
     }
     &[data-mimetype*='cert'], &[data-mimetype*='rules'], &[data-mimetype*='pkcs'], &[data-mimetype$='stl'], &[data-mimetype$='crl'] {
-        background-image: url('/web/static/src/img/mimetypes/certificate.png');
+        background-image: url('/web/static/src/img/mimetypes/certificate.svg');
     }
-    &[data-mimetype*='-font'] {
-        background-image: url('/web/static/src/img/mimetypes/font.png');
+    &[data-mimetype*='-font'], &[data-mimetype*='font-'], &[data-ext$='ttf'] {
+        background-image: url('/web/static/src/img/mimetypes/font.svg');
     }
     &[data-mimetype*='-dvi'] {
-        background-image: url('/web/static/src/img/mimetypes/print.png');
+        background-image: url('/web/static/src/img/mimetypes/print.svg');
+    }
+    &[data-mimetype*='script'], &[data-mimetype*='x-sh'], &[data-ext*='bat'], &[data-mimetype$='bat'], &[data-mimetype$='cgi'], &[data-mimetype$='-c'], &[data-mimetype*='java'], &[data-mimetype*='ruby'] {
+        background-image: url('/web/static/src/img/mimetypes/script.svg');
     }
-    &[data-mimetype*='script'], &[data-mimetype$='bat'], &[data-mimetype$='cgi'], &[data-mimetype$='-c'], &[data-mimetype*='java'], &[data-mimetype*='ruby'] {
-        background-image: url('/web/static/src/img/mimetypes/script.png');
+    &[data-mimetype*='javascript'] {
+        background-image: url('/web/static/src/img/mimetypes/javascript.svg');
     }
     &[data-mimetype*='calendar'], &[data-mimetype$='ldif'] {
-        background-image: url('/web/static/src/img/mimetypes/calendar.png');
+        background-image: url('/web/static/src/img/mimetypes/calendar.svg');
+    }
+    &[data-mimetype$='postscript'], &[data-mimetype$='cdr'], &[data-mimetype$='xara'], &[data-mimetype$='cgm'], &[data-mimetype$='graphics'], &[data-mimetype$='draw'], &[data-mimetype*='svg'] {
+        background-image: url('/web/static/src/img/mimetypes/vector.svg');
     }
 }