[IMP] mail: attachments

bzr revid: fva@openerp.com-20121107114609-vv1knumnte8b9d5r

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

@@ -28,7 +28,9 @@
 
 /* ------------ MAIL WIDGET --------------- */
 .openerp .oe_mail, .openerp .oe_mail *{
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
 }
 .openerp .oe_mail {
     display: block;
@@ -70,8 +72,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 +108,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) */
 
@@ -139,6 +143,9 @@
     margin-left: 8px;
     height: 24px;
     -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
 }
 .openerp .oe_mail .oe_msg .oe_msg_icons span{
     float:right;
@@ -152,10 +159,16 @@
     color: #FFF;
     text-shadow: 0px 1px #AAA,0px -1px #AAA, -1px 0px #AAA, 1px 0px #AAA, 0px 3px 3px rgba(0,0,0,0.1);
     -webkit-transition: all 0.2s linear;
+       -moz-transition: all 0.2s linear;
+         -o-transition: all 0.2s linear;
+            transition: all 0.2s linear;
 }
 .openerp .oe_mail .oe_msg:hover .oe_msg_icons a{
     opacity: 1;
     -webkit-transition: all 0.1s linear;
+       -moz-transition: all 0.1s linear;
+         -o-transition: all 0.1s linear;
+            transition: all 0.1s linear;
 }
 .openerp .oe_mail .oe_msg .oe_msg_icons .oe_star:hover a{
     color: #FFF6C0;
@@ -195,6 +208,150 @@
     width: 100%;
 }
 
+/* --------------------- ATTACHMENTS --------------------- */
+
+.openerp .oe_mail .oe_msg_attachment_list{
+    display: none;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+.openerp .oe_mail .oe_msg_composer .oe_msg_attachment_list{
+    display: block;
+}
+.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;
+       -moz-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
+         -o-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
+            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 }
+}
+@-moz-keyframes oe_mail_attach_loading_anim{
+    0% { background: #4BBD00 }
+    50% { background: #009123 } 
+    100% { background: #4BBD00 }
+}
+@-o-keyframes oe_mail_attach_loading_anim{
+    0% { background: #4BBD00 }
+    50% { background: #009123 } 
+    100% { background: #4BBD00 }
+}
+@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;
+    left: 0px;
+    right: 0px;
+    max-height: 64px;
+    background: rgba(0,0,0,0.8); 
+    color: white;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s linear; 
+       -moz-transition: opacity 0.2s linear; 
+         -o-transition: opacity 0.2s linear; 
+            transition: opacity 0.2s linear; 
+}
+.openerp .oe_mail .oe_attachment.oe_preview:hover .oe_name{
+    opacity: 1;
+    -webkit-transition: opacity 0.2s linear; 
+       -moz-transition: opacity 0.2s linear; 
+         -o-transition: opacity 0.2s linear; 
+            transition: opacity 0.2s linear; 
+}
+.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;
+    color: black;
+    text-shadow: 1px 0px white, -1px 0px white, 0px 1px white, 0px -1px white;
+    cursor: pointer;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s linear; 
+       -moz-transition: opacity 0.2s linear; 
+         -o-transition: opacity 0.2s linear; 
+            transition: opacity 0.2s linear; 
+}
+.openerp .oe_mail .oe_msg_composer .oe_attachment:hover .oe_delete{
+    opacity: 1;
+    -webkit-transition: opacity 0.2s linear; 
+       -moz-transition: opacity 0.2s linear; 
+         -o-transition: opacity 0.2s linear; 
+            transition: opacity 0.2s linear; 
+}
 /* ---------------- MESSAGE QUICK COMPOSER --------------- */
 
 .openerp .oe_mail .oe_msg_composer .oe_msg_footer{
@@ -202,37 +359,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;
 }
@@ -334,9 +460,22 @@
     width:100%;
 }
 .openerp .oe_followers button.oe_follower.oe_following{
+    color: white;
     background-color: #3465A4;
     background-image: -webkit-linear-gradient(top, #729FCF, #3465A4);
+    background-image:    -moz-linear-gradient(top, #729FCF, #3465A4);
+    background-image:     -ms-linear-gradient(top, #729FCF, #3465A4);
+    background-image:      -o-linear-gradient(top, #729FCF, #3465A4);
+    background-image:         linear-gradient(to bottom, #729FCF, #3465A4);
+}
+.openerp .oe_followers button.oe_follower.oe_following:hover{
     color: white;
+    background-color: #A21A1A;
+    background-image: -webkit-linear-gradient(top, #DF3F3F, #A21A1A);
+    background-image:    -moz-linear-gradient(top, #DF3F3F, #A21A1A);
+    background-image:     -ms-linear-gradient(top, #DF3F3F, #A21A1A);
+    background-image:      -o-linear-gradient(top, #DF3F3F, #A21A1A);
+    background-image:         linear-gradient(to bottom, #DF3F3F, #A21A1A);
 }
 
 .openerp .oe_followers button.oe_follower .oe_follow, 

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

@@ -110,7 +110,8 @@ openerp.mail = function (session) {
             }
 
             return domain;
-        }
+        },
+
     };
 
 
@@ -124,6 +125,26 @@ openerp.mail = function (session) {
      */
 
     mail.MessageCommon = session.web.Widget.extend({
+
+    /**
+     * ------------------------------------------------------------
+     * FIXME: this comment was moved as is from the ThreadMessage Init as
+     * part of a refactoring. Check that it is still correct
+     * ------------------------------------------------------------
+     * This widget handles the display of a messages in a thread. 
+     * Displays a record and performs some formatting on the record :
+     * - record.date: formatting according to the user timezone
+     * - record.timerelative: relative time givein by timeago lib
+     * - record.avatar: image url
+     * - record.attachment_ids[].url: url of each attachmentThe
+     * thread view :
+     * - root thread
+     * - - sub message (parent_id = root message)
+     * - - - sub thread
+     * - - - - sub sub message (parent id = sub thread)
+     * - - sub message (parent_id = root message)
+     * - - - sub thread
+     */
         
         init: function (parent, datasets, options) {
             this._super(parent, options);
@@ -204,6 +225,66 @@ openerp.mail = function (session) {
             }
         },
 
+        // 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';
+        },
 
         /* get all child message id linked.
          * @return array of id
@@ -282,7 +363,7 @@ openerp.mail = function (session) {
         display_attachments: function () {
             this.$(".oe_msg_attachment_list").html( session.web.qweb.render('mail.thread.message.attachments', {'widget': this}) );
             // event: delete an attachment
-            this.$(".oe_msg_attachment_list").on('click', '.oe_mail_attachment_delete', this.on_attachment_delete);
+            this.$(".oe_msg_attachment_list").on('click', '.oe_delete', this.on_attachment_delete);
         },
 
         /* when a user click on the upload button, send file read on_attachment_loaded
@@ -591,46 +672,12 @@ openerp.mail = function (session) {
 
             return false;
         },
+
     });
 
-    /**
-     * ------------------------------------------------------------
-     * Thread Message Widget
-     * ------------------------------------------------------------
-     * This widget handles the display of a messages in a thread. 
-     * Displays a record and performs some formatting on the record :
-     * - record.date: formatting according to the user timezone
-     * - record.timerelative: relative time givein by timeago lib
-     * - record.avatar: image url
-     * - record.attachment_ids[].url: url of each attachmentThe
-     * thread view :
-     * - root thread
-     * - - sub message (parent_id = root message)
-     * - - - sub thread
-     * - - - - sub sub message (parent id = sub thread)
-     * - - sub message (parent_id = root message)
-     * - - - sub thread
-     */
     mail.ThreadMessage = mail.MessageCommon.extend({
         template: 'mail.thread.message',
 
-        /**
-         * INIT :
-         * @param {Object} parent parent
-         * @param {Array} [domain]
-         * @param {Object} [context] context of the thread. It should
-            contain at least default_model, default_res_id. Please refer to
-            the ComposeMessage widget for more information about it.
-         * @param {Object} [options]
-         *      @param {Object} [thread] read obout mail.Thread object
-         *      @param {Object} [message]
-         *          @param {Number} [truncate_limit=250] number of character to
-         *              display before having a "show more" link; note that the text
-         *              will not be truncated if it does not have 110% of the parameter
-         *          @param {Boolean} [show_record_name]
-         *...  @param {boolean} [show_reply_button] display the reply button
-         *...  @param {boolean} [show_read_unread_button] display the read/unread button
-         */
         
         start: function () {
             this._super.apply(this, arguments);
@@ -687,6 +734,11 @@ openerp.mail = function (session) {
             this.$el.on('click', '.oe_msg_vote', this.on_vote);
             // event: click on 'starred/favorite' button
             this.$el.on('click', '.oe_star', this.on_star);
+
+            this.$el.on('click', '.oe_view_attachments', function(){
+                console.log('toggle');
+                self.$('.oe_msg_attachment_list').toggle(200);
+            });
         },
 
         /* Call the on_compose_message on the thread of this message. */
@@ -701,10 +753,10 @@ openerp.mail = function (session) {
             this.$('.oe_msg_body:first').expander({
                 slicePoint: this.options.truncate_limit,
                 expandText: 'read more',
-                userCollapseText: '&atilde',
+                userCollapseText: 'read less',
                 detailClass: 'oe_msg_tail',
                 moreClass: 'oe_mail_expand',
-                lessClass: 'oe_mail_reduce oe_e',
+                lessClass: 'oe_mail_reduce',
                 });
         },
 

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

@@ -70,33 +70,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" 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">
-                        <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)">
-                        <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'>
+                    <a t-att-href='attachment.url'><img t-att-src="'/mail/static/src/img/mimetypes/' + widget.filetype(attachment) + '.png'"></img></a>
+                    <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'>
+                    <a t-att-href='attachment.url'><img t-att-src="attachment.url"></img></a>
+                    <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">
@@ -213,18 +208,23 @@
                         </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">
+                    <t t-if='widget.attachment_ids.length > 0'>
+                        <span class='oe_subtle'>•</span>
+                        <a class="oe_view_attachments">
                             <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>
+                    </t>
                     <span class='oe_subtle'>•</span>
                     <t t-call="mail.thread.message.vote"/>
                 </div>