[IMP] mail: final touches on the attachments

bzr revid: fva@openerp.com-20121105180355-tzk2d6lbhgwgg8kl

addons/mail/static/src/css/mail.css

@@ -70,8 +70,7 @@
 .openerp .oe_mail .oe_msg .oe_msg_footer{
     padding-left: 4px;
     overflow: hidden;
-    opacity:0.8;
-    -webkit-transition: opacity 0.2s linear;
+    margin-bottom: 4px;
 }
 .openerp .oe_mail .oe_msg .oe_msg_content{
     display: block;
@@ -107,6 +106,9 @@
 .openerp .oe_mail .oe_msg.oe_msg_indented .oe_msg_content{
     padding-top:2px;
 }
+.openerp .oe_mail .oe_msg.oe_msg_indented .oe_msg_footer{
+    margin-bottom: 0px;
+}
 
 /* b) Votes (likes) */
 
@@ -201,6 +203,114 @@
     width: 100%;
 }
 
+/* --------------------- ATTACHMENTS --------------------- */
+
+.openerp .oe_mail .oe_msg_attachment_list{
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+.openerp .oe_mail .oe_attachment{
+    display: inline-block;
+    width: 100px;
+    margin: 2px;
+    min-height: 80px;
+    position: relative;
+    border-radius: 3px;
+    text-align: center;
+    vertical-align: top;
+}
+.openerp .oe_mail .oe_attachment .oe_name{
+    display: inline-block;
+    max-width: 100%;
+    padding: 1px 3px;
+    margin-top: 50px;
+    margin-bottom: 5px;
+    background: rgba(124, 123, 173, 0.13);
+    overflow: hidden;
+    color: #4c4c4c;
+    text-shadow: none;
+    border-radius: 3px;
+}
+
+.openerp .oe_mail .oe_attachment.oe_preview{
+    background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVQYV2MsLS39z4AGLCws0IUYGIeCwrVr12J45sSJE5ieGQIKAbuZKf/EMCs7AAAAAElFTkSuQmCC );
+}
+.openerp .oe_mail .oe_attachment .oe_progress_bar{
+    display: none;
+    position: absolute;
+    top: 18px;
+    left: 16px;
+    right: 16px;
+    height: 17px;
+    line-height: 13px;
+    padding: 0px;
+    background: #4BBD00;
+    color: white;
+    text-align: center;
+    border-radius: 3px;
+    border: solid 1px rgba(0,0,0,0.2);
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.34);
+    -webkit-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
+}
+.openerp .oe_mail .oe_attachment.oe_uploading .oe_progress_bar{
+    display: block;
+}
+@-webkit-keyframes oe_mail_attach_loading_anim{
+    0% { background: #4BBD00 }
+    50% { background: #009123 } 
+    100% { background: #4BBD00 }
+}
+.openerp .oe_mail .oe_attachment.oe_preview .oe_name{
+    position: absolute;
+    bottom: 0px;
+    margin: 0px;
+    width: 100%;
+    background: rgba(0,0,0,0.8); 
+    color: white;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    -webkit-transition: opacity 0.2s linear; 
+    opacity: 0;
+}
+.openerp .oe_mail .oe_attachment.oe_preview:hover .oe_name{
+    -webkit-transition: opacity 0.2s linear;
+    opacity: 1;
+}
+.openerp .oe_mail .oe_attachment img{
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    top: 0px;
+    left: 50%;
+    margin-left: -24px;
+}
+.openerp .oe_mail .oe_attachment.oe_preview img{
+    display: block;
+    position: relative;
+    margin:0px;
+    width: 100px;
+    height: 100px;
+    border-radius: 3px;
+    margin-left: -50px;
+}
+.openerp .oe_mail .oe_attachment .oe_delete{
+    display: none;
+}
+.openerp .oe_mail .oe_msg_composer .oe_attachment .oe_delete{
+    display: block;
+    position: absolute;
+    top: -7px;
+    right: 0px;
+    opacity: 0;
+    background: black;
+    text-shadow: 1px 0px white, -1px 0px white, 0px 1px white, 0px -1px white
+    -webkit-transition: opacity 0.2s linear;
+    cursor: pointer;
+}
+.openerp .oe_mail .oe_msg_composer .oe_attachment:hover .oe_delete{
+    opacity: 1;
+    -webkit-transition: opacity 0.2s linear;
+}
 /* ---------------- MESSAGE QUICK COMPOSER --------------- */
 
 .openerp .oe_mail .oe_msg_composer .oe_msg_footer{
@@ -208,37 +318,6 @@
     padding-top: 2px;
     padding-bottom:6px;
 }
-.openerp .oe_mail .oe_msg_attachments.oe_hidden,
-.openerp .oe_mail .oe_msg_images.oe_hidden{
-    margin:0px;
-    border: none;
-    display: none;
-}
-.openerp .oe_mail .oe_msg_attachments{
-    margin-bottom: 4px;
-    margin-right: 0px;
-    font-size: 12px;
-    border-radius: 2px;
-    border: solid 1px rgba(124,123,173,0.14);
-}
-.openerp .oe_mail .oe_msg_attachments .oe_attachment{
-    padding: 2px;
-    padding-left: 4px;
-    padding-right: 4px;
-}
-.openerp .oe_mail .oe_msg_attachments .oe_attachment .oe_e{
-    font-size: 23px;
-    margin-top: -5px;
-}
-.openerp .oe_mail .oe_msg_attachments .oe_attachment .oe_e:hover{
-    text-decoration: none;
-}
-.openerp .oe_mail .oe_msg_attachments .oe_attachment:nth-child(odd){
-    background:white;
-}
-.openerp .oe_mail .oe_msg_attachments .oe_attachment:nth-child(even){
-    background: #F4F5FA;
-}
 .openerp .oe_mail .oe_msg_images {
     display: block;
 }

addons/mail/static/src/js/mail.js

@@ -110,7 +110,68 @@ openerp.mail = function (session) {
             }
 
             return domain;
-        }
+        },
+
+        // inserts zero width space between each letter of a string so that
+        // the word will correctly wrap in html boxes smaller than the text
+        breakword: function(str){
+            var out = '';
+            for(var i = 0, len = str.length; i < len; i++){
+                out += _.str.escapeHTML(str[i]) + '&#8203;';
+            }
+            return out;
+        },
+
+        // returns the file type of a file based on its extension 
+        // As it only looks at the extension it is quite approximative. 
+        filetype: function(url){
+            console.log(url);
+            url = url.name || url.filename || url;
+            var tokens = url.split('.');
+            if(tokens.length <= 1){
+                return 'unknown';
+            }
+            var extension = tokens[tokens.length -1];
+            if(extension.length === 0){
+                return 'unknown';
+            }else{
+                extension = extension.toLowerCase();
+            }
+            var filetypes = {
+                'webimage':     ['png','jpg','jpeg','jpe','gif'], // those have browser preview
+                'image':        ['tif','tiff','tga',
+                                 'bmp','xcf','psd','ppm','pbm','pgm','pnm','mng',
+                                 'xbm','ico','icon','exr','webp','psp','pgf','xcf',
+                                 'jp2','jpx','dng','djvu','dds'],
+                'vector':       ['ai','svg','eps','vml','cdr','xar','cgm','odg','sxd'],
+                'print':        ['dvi','pdf','ps'],
+                'document':     ['doc','docx','odm','odt'],
+                'presentation': ['key','keynote','odp','pps','ppt'],
+                'font':         ['otf','ttf','woff','eot'],
+                'archive':      ['zip','7z','ace','apk','bzip2','cab','deb','dmg','gzip','jar',
+                                 'rar','tar','gz','pak','pk3','pk4','lzip','lz','rpm'],
+                'certificate':  ['cer','key','pfx','p12','pem','crl','der','crt','csr'],
+                'audio':        ['aiff','wav','mp3','ogg','flac','wma','mp2','aac',
+                                 'm4a','ra','mid','midi'],
+                'video':        ['asf','avi','flv','mkv','m4v','mpeg','mpg','mpe','wmv','mp4','ogm'],
+                'text':         ['txt','rtf','ass'],
+                'html':         ['html','xhtml','xml','htm','css'],
+                'disk':         ['iso','nrg','img','ccd','sub','cdi','cue','mds','mdx'],
+                'script':       ['py','js','c','cc','cpp','cs','h','java','bat','sh',
+                                 'd','rb','pl','as','cmd','coffee','m','r','vbs','lisp'],
+                'spreadsheet':  ['123','csv','ods','numbers','sxc','xls','vc','xlsx'],
+                'binary':       ['exe','com','bin','app'],
+            };
+            for(filetype in filetypes){
+                var ext_list = filetypes[filetype];
+                for(var i = 0, len = ext_list.length; i < len; i++){
+                    if(extension === ext_list[i]){
+                        return filetype;
+                    }
+                }
+            }
+            return 'unknown';
+        },
     };
 
 
@@ -168,6 +229,12 @@ openerp.mail = function (session) {
             this.bind_events();
         },
 
+        // used to retrieve the filetype of attachments
+        filetype: mail.ChatterUtils.filetype,
+
+        // used to wrap the name of the atttachments before display
+        breakword: mail.ChatterUtils.breakword,
+
         /* upload the file on the server, add in the attachments list and reload display
          */
         display_attachments: function () {
@@ -571,6 +638,12 @@ openerp.mail = function (session) {
             this.ds_follow = new session.web.DataSetSearch(this, 'mail.followers');
         },
 
+        // used to retrieve the filetype of attachments
+        filetype: mail.ChatterUtils.filetype,
+
+        // used to wrap the name of the atttachments before display
+        breakword: mail.ChatterUtils.breakword,
+
         /* Convert date, timerelative and avatar in displayable data. */
         formating_data: function () {
 

addons/mail/static/src/xml/mail.xml

@@ -69,33 +69,28 @@
         Template used to display attachments in a mail.message
         -->
     <t t-name="mail.thread.message.attachments">
-        <span class="oe_msg_attachments">
-            <t t-foreach="widget.attachment_ids" t-as="attachment" t-if="!attachment.is_image">
-                <div class="oe_attachment">
-                    <span t-if="(attachment.upload and attachment.percent_loaded&lt;100)" t-attf-title="{(attachment.name || attachment.filename) + (attachment.date?' \n('+attachment.date+')':'' )}" t-attf-name="{attachment.name || attachment.filename}">
-                        <div class="oe_upload_in_process">
-                            <span>...Upload in progress...</span>
-                        </div>
-                        <t t-raw="attachment.name || attachment.filename"/>
-                    </span>
-                    <t t-if="(!attachment.upload or attachment.percent_loaded&gt;=100)">
-                        <a t-att-href="attachment.url" t-attf-title="{(attachment.name || attachment.filename) + (attachment.date?' \n('+attachment.date+')':'' )}">
-                            <t t-raw="attachment.name || attachment.filename"/>
-                        </a>
-                    </t>
-                    <t t-if="(widget.show_delete_attachment and (!attachment.upload or attachment.percent_loaded&gt;=100))">
-                        <a class="oe_right oe_mail_attachment_delete oe_e" title="Delete this attachment" t-attf-data-id="{attachment.id}">[</a>
-                    </t>
+        <t t-foreach='widget.attachment_ids' t-as='attachment'>
+            <t t-if="widget.filetype(attachment) !== 'webimage'">
+                <div class='oe_attachment'>
+                    <img t-att-src="'/mail/static/src/img/mimetypes/' + widget.filetype(attachment) + '.png'"></img>
+                    <div class='oe_delete oe_e'>[</div>
+                    <div class='oe_name'><t t-raw='widget.breakword(attachment.name || attachment.filename)' /></div>
+                    <div class='oe_progress_bar'>
+                        uploading
+                    </div>
                 </div>
             </t>
-        </span>
-        <span class="oe_msg_images">
-            <t t-foreach="widget.attachment_ids" t-as="attachment" t-if="attachment.is_image">
-                <a t-att-href="attachment.url" t-attf-title="{(attachment.name || attachment.filename) + (attachment.date?' \n('+attachment.date+')':'' )}">
-                    <img t-if="attachment.is_image" t-attf-title="{(attachment.name || attachment.filename) + (attachment.date?' \n('+attachment.date+')':'' )}" t-att-src="attachment.url"/>
-                </a>
+            <t t-if="widget.filetype(attachment) === 'webimage'">
+                <div class='oe_attachment oe_preview'>
+                    <img t-att-src="attachment.url"></img>
+                    <div class='oe_delete oe_e'>[</div>
+                    <div class='oe_name'><t t-raw='widget.breakword(attachment.name || attachment.filename)' /></div>
+                    <div class='oe_progress_bar'>
+                        uploading
+                    </div>
+                </div>
             </t>
-        </span>
+        </t>
     </t>
 
     <t t-name="mail.thread.message.private">
@@ -211,15 +206,18 @@
                         </t>
                         <t t-raw="widget.body"/>
                     </div>
-                    <t t-if="widget.attachment_ids.length > 0">
-                        <t t-call="mail.thread.message.attachments"/>
-                    </t>
                 </div>
                 <div class="oe_msg_footer">
+                    <t t-if="widget.attachment_ids.length > 0">
+                        <div class="oe_msg_attachment_list">
+                            <t t-call="mail.thread.message.attachments"/>
+                        </div>
+                    </t>
                     <a t-if="widget.author_id" t-attf-href="#model=res.partner&amp;id=#{widget.author_id[0]}"><t t-raw="widget.author_id[1]"/></a> 
                     <span class='oe_subtle'>•</span>
                     <span t-att-title="widget.date"><t t-raw="widget.timerelative"/></span>
                         <a t-if="widget.attachment_ids.length > 0" class="oe_mail_msg_view_attachments">
+                            <span class='oe_subtle'>•</span>
                             <t t-if="widget.attachment_ids.length == 1">1 Attachment</t>
                             <t t-if="widget.attachment_ids.length > 1"><t t-raw="widget.attachment_ids.length"/> Attachments</t>
                         </a>