Ignore:
Timestamp:
07/10/12 14:45:02 (12 years ago)
Author:
gustavo
Message:

Ticket #2953 - Melhorar a disposição da listagem de anexos no expressoMail

Location:
sandbox/2.4.2-expresso2
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed

  • sandbox/2.4.2-expresso2/expressoMail1_2/js/draw_api.js

    r6717 r6752  
    896896        var _mouse_out; 
    897897        var _cell; 
    898         var colGroupMain = document.getElementById("colgroup_main_"+numBox); 
    899         var colGroupHead = document.getElementById("colgroup_head_"+numBox); 
    900898        for (var r=0;r<trM.length;r++) { 
    901899                for (var c=0;c<trM[r].cells.length;c++) { 
    … …  
    904902                        if (is_mozilla && !is_webkit) { 
    905903                                if (!emptyBody) { 
    906                                         colGroupMain.childNodes[c].setAttribute("width",colSizes[tbl][c]); 
     904                                        document.getElementById("colgroup_main_"+numBox).childNodes[c].setAttribute("width",colSizes[tbl][c]); 
    907905                                } 
    908                                 colGroupHead.childNodes[c].setAttribute("width",colSizes[tbl][c]); 
     906                                document.getElementById("colgroup_head_"+numBox).childNodes[c].setAttribute("width",colSizes[tbl][c]); 
    909907                                if (tbH.rows[0].cells[c].className=="th_resizable") { 
    910908                                        // lots of stupid fixes for FF to redraw cell content 
    … …  
    921919                                } 
    922920                        } 
    923                         /* 
    924921                        else { 
    925922                                tbH.rows[0].cells[c].setAttribute("width",_cell.offsetWidth); 
    926                         }*/ 
     923                        } 
    927924                } 
    928925        } 
    … …  
    43374334        var maxAttachmentSize = (preferences.max_attachment_size !== "" && preferences.max_attachment_size != 0) ? (parseInt(preferences.max_attachment_size.replace('M', '')) * 1048576 ) : false; 
    43384335         
     4336        content.find(".new-msg-head-data").scroll(function(){ 
     4337                $.each(fileUploadMSG.find(".attachments-list .att-box"), function(index, value){ 
     4338                        $(this).qtip("api").updatePosition(); 
     4339                }); 
     4340        }); 
     4341        $("#fileupload_msg"+ID+"_droopzone").click(function(){ 
     4342                $(this).removeClass('in hover'); 
     4343        $(this).hide(); 
     4344        $(this).prev().show(); 
     4345        }); 
    43394346        fileUploadMSG.find(".button").button().filter(".fileinput-button").find(".ui-button-text").css("margin-top", "2px").find("input:file").fileupload({ 
    4340                 //singleFileUploads : true, 
     4347                //singleFileUploads : true,fileUploadMSG 
    43414348                sequentialUploads: true,  
    43424349                type: 'post', 
    … …  
    43444351                url: "../prototype/post.php", 
    43454352                forceIframeTransport: false, 
    4346                 dropZone : fileUploadMSG, 
     4353                dropZone : $("#fileupload_msg"+ID+"_droopzone"), 
    43474354                formData: function(form) { 
    43484355                        return [ 
    … …  
    43684375                                }, 3000); 
    43694376                        } 
     4377                        fileUploadMSG.find(' .attachments-list').show(); 
    43704378                        $.each(data.files, function (index, file) { 
    43714379                                var attach = {}; 
    43724380                                attach.fullFileName = file.name; 
    43734381                                attach.fileName = file.name; 
    4374                                 if(file.name.length > 50) 
    4375                                         attach.fileName = file.name.substr(0, 32) + " ... " + file.name.substr(file.name.length-9, file.name.length); 
     4382                                if(file.name.length > 20) 
     4383                                        attach.fileName = file.name.substr(0, 17) + " ... " + file.name.substr(file.name.length-6, file.name.length); 
    43764384                                attach.fileSize = formatBytes(file.size); 
    43774385                                if(maxAttachmentSize && file.size > maxAttachmentSize) 
    43784386                                        attach.error = 'Tamanho de arquivo nao permitido!!' 
    4379                                  
    4380                                 var upload = $(DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist.ejs", {file : attach}));                            
    4381                                 upload.find('.button.close').button({ 
    4382                                         icons: { 
    4383                                                 primary: "ui-icon-close" 
    4384                                         }, 
    4385                                         text: false 
    4386                                 }).click(function(){ 
     4387                                else 
     4388                                        attach.error = 'Loading...';     
     4389                                var upload = $(DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist.ejs", {file : attach}));                            
     4390                                upload.find('.att-box-delete').click(function(){ 
    43874391                                        var idAttach = $(this).parent().find('input[name="fileId[]"]').val(); 
    43884392                                        fileUploadMSG.find(' .attachments-list').find('input[value="'+idAttach+'"]').remove(); 
    4389                                         delAttachment(ID, idAttach) 
     4393                    delAttachment(ID, idAttach); 
     4394                    $(this).parent().qtip("destroy"); 
    43904395                                        $(this).parent().remove(); 
     4396                                        if(!fileUploadMSG.find(' .attachments-list').find(".att-box").length){ 
     4397                                                fileUploadMSG.find(' .attachments-list').hide(); 
     4398                                        } 
    43914399                                }); 
    4392                                  
    4393                                 fileUploadMSG.find('.attachments-list').append(upload); 
     4400                    
     4401                fileUploadMSG.find('.attachments-list').append(upload); 
     4402 
     4403                fileUploadMSG.find('.attachments-list .att-box:last').qtip({ 
     4404                        content: DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist_tooltip.ejs", {attach : attach}), 
     4405                                        position: { 
     4406                                                corner: { 
     4407                                                        tooltip: 'bottomMiddle', 
     4408                                                        target: 'topMiddle' 
     4409                                                }, 
     4410                                                adjust: { 
     4411                                       resize: true, 
     4412                                       scroll: true 
     4413                                    } 
     4414                                        }, 
     4415                                        show: { 
     4416                                                when: 'mouseover', // Don't specify a show event 
     4417                                                ready: false // Show the tooltip when ready 
     4418                                        }, 
     4419                                        hide: 'mouseout', // Don't specify a hide event 
     4420                                        style: { 
     4421                                                border: { 
     4422                                                        width: 1, 
     4423                                                        radius: 5 
     4424                                                }, 
     4425                                                padding: 5,  
     4426                                                textAlign: 'center', 
     4427                                                tip: true, // Give it a speech bubble tip with automatic corner detection 
     4428                                                name: 'blue' // Style it according to the preset 'cream' style 
     4429                                        } 
     4430                }); 
    43944431 
    43954432                                if(!maxAttachmentSize || file.size < maxAttachmentSize){ 
    … …  
    44084445                                        if(newAttach.rollback !== false) 
    44094446                                        { 
    4410                                                 fileUploadMSG.find('.in-progress:first').parents('p').append('<input type="hidden" name="fileId[]" value="'+newAttach['mailAttachment'][0][0].id+'"/>').find('.status-upload').addClass('ui-icon ui-icon-check'); 
     4447                                                fileUploadMSG.find('.att-box-loading:first').parents('div:first').append('<input type="hidden" name="fileId[]" value="'+newAttach['mailAttachment'][0][0].id+'"/>'); 
    44114448                                                addAttachment(ID,newAttach['mailAttachment'][0][0].id); 
    44124449                                        } 
    44134450                                        else                              
    4414                                                 fileUploadMSG.find('.in-progress:first').parents('p').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error');    
     4451                                                fileUploadMSG.find('.att-box-loading:first').parents('div:first').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error');    
    44154452                                }else{ 
    4416                                         fileUploadMSG.find('.in-progress:first').parents('p').find('.status-upload').append(newAttach.mailAttachment.error).addClass('message-attach-error');    
     4453                                        fileUploadMSG.find('.att-box-loading:first').parents('div:first').find('.status-upload').append(newAttach.mailAttachment.error).addClass('message-attach-error');    
    44174454                                } 
    44184455                                 
    44194456                        }else { 
    4420                                 fileUploadMSG.find(' .progress.on-complete:first').parents('p').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error'); 
    4421                         } 
    4422             fileUploadMSG.find(' .in-progress:first').remove(); 
     4457                                fileUploadMSG.find(' .progress.on-complete:first').parents('div:first').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error'); 
     4458                        } 
     4459            fileUploadMSG.find(' .att-box-loading:first').remove(); 
    44234460                } 
    44244461        }).css({ 
    … …  
    44494486                                        jQuery.each(selectedMessages[folder_name], function(message_number, message) {  
    44504487                                                if (message) { 
     4488                                                        fileUploadMSG.find(' .attachments-list').show();         
    44514489                                                        var att = new Object(); 
    44524490                                                        att.folder = folder_name; 
    … …  
    44584496                                                        var attach = {}; 
    44594497                                                        attach.fileName = onceOpenedMessages[folder_name][message_number].subject + '.eml'; 
    4460                                                         if(attach.fileName.length > 45) 
    4461                                                                         attach.fileName = attach.fileName.substr(0, 32) + " ... " + attach.fileName.substr(attach.fileName.length-9, attach.fileName.length); 
    4462  
     4498                                                        attach.fullFileName = onceOpenedMessages[folder_name][message_number].subject + '.eml'; 
     4499                                                        if(attach.fileName.length > 20) 
     4500                                                                attach.fileName = attach.fileName.substr(0, 17) + "... " + attach.fileName.substr(attach.fileName.length-9, attach.fileName.length); 
     4501 
     4502                                                        attach.error = ""; 
    44634503                                                        attach.fileSize = formatBytes(onceOpenedMessages[folder_name][message_number].size); 
    44644504                                                        var upload = $(DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist.ejs", {file : attach})); 
    4465                                                         upload.find('.status-upload').addClass('ui-icon ui-icon-check'); 
    4466                                                         upload.find('.in-progress').remove();  
     4505                                                        upload.find('.att-box-loading').remove(); 
    44674506                                                        upload.append('<input type="hidden" name="fileId[]" value=\''+idATT+'\'/>'); 
    44684507                                                         
    4469                                                         upload.find('.button.close').button({ 
    4470                                                                 icons: { 
    4471                                                                                                 primary: "ui-icon-close" 
    4472                                                                                 }, 
    4473                                                                                 text: false 
    4474                                                                 }).click(function(){ 
    4475                                                                                 var idAttach = $(this).parents("li:first").find('input[name="fileId[]"]').val(); 
    4476                                                                                 fileUploadMSG.find(' .attachments-list').find('input[value="'+idAttach+'"]'); 
    4477                                                                                 delAttachment(ID,idAttach);  
    4478                                                                                 $(this).parent().remove(); 
     4508                                                        upload.find('.att-box-delete').click(function(){ 
     4509                                                                var idAttach = $(this).parent().find('input[name="fileId[]"]').val(); 
     4510                                                                fileUploadMSG.find(' .attachments-list').find('input[value="'+idAttach+'"]').remove(); 
     4511                                                                delAttachment(ID,idAttach);  
     4512                                                                $(this).parent().qtip("destroy"); 
     4513                                                                $(this).parent().remove(); 
     4514                                                                if(!fileUploadMSG.find(' .attachments-list').find(".att-box").length){ 
     4515                                                                        fileUploadMSG.find(' .attachments-list').hide(); 
     4516                                                                } 
    44794517                                                        });      
    44804518                                                         
    4481                                                         fileUploadMSG.find('.attachments-list').append(upload);    
     4519                                                        fileUploadMSG.find('.attachments-list').append(upload);  
     4520 
     4521                                                        upload.find('.att-box-loading').remove(); 
     4522 
     4523                                                        fileUploadMSG.find('.attachments-list .att-box:last').qtip({ 
     4524                                                content: DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist_tooltip.ejs", {attach : attach}), 
     4525                                                                position: { 
     4526                                                                        corner: { 
     4527                                                                                tooltip: 'bottomMiddle', 
     4528                                                                                target: 'topMiddle' 
     4529                                                                        }, 
     4530                                                                        adjust: { 
     4531                                                               resize: true, 
     4532                                                               scroll: true 
     4533                                                            } 
     4534                                                                }, 
     4535                                                                show: { 
     4536                                                                        when: 'mouseover', // Don't specify a show event 
     4537                                                                        ready: false // Show the tooltip when ready 
     4538                                                                }, 
     4539                                                                hide: 'mouseout', // Don't specify a hide event 
     4540                                                                style: { 
     4541                                                                        border: { 
     4542                                                                                width: 1, 
     4543                                                                                radius: 5 
     4544                                                                        }, 
     4545                                                                        padding: 5,  
     4546                                                                        textAlign: 'center', 
     4547                                                                        tip: true, // Give it a speech bubble tip with automatic corner detection 
     4548                                                                        name: 'blue' // Style it according to the preset 'cream' style 
     4549                                                                } 
     4550                                        }); 
    44824551                                                } 
    44834552                                        }); 
    … …  
    44924561                }); 
    44934562        }); 
     4563        $(document).bind('drop dragover', function (e) { 
     4564            e.preventDefault(); 
     4565        }); 
     4566        //DRAG and DROP DE ARQUIVOS NÃO FUNCIONA NO IE 
     4567        if(!is_ie){ 
     4568                $("body").bind('dragenter', function (e) { 
     4569                    var dropZone = $("#fileupload_msg"+ID+"_droopzone"); 
     4570                var timeout = window.dropZoneTimeout; 
     4571                        dropZone.show(); 
     4572                        dropZone.prev().hide(); 
     4573                    if (!timeout) { 
     4574                        dropZone.addClass('in'); 
     4575                    } else { 
     4576                        clearTimeout(timeout); 
     4577                    } 
     4578                    if (e.target === dropZone[0]) { 
     4579                        dropZone.addClass('hover'); 
     4580                    } else { 
     4581                        dropZone.removeClass('hover'); 
     4582                    } 
     4583                    $(window).unbind('dragleave'); 
     4584                    window.dropZoneTimeout = setTimeout(function () { 
     4585                        $(window).bind('dragleave', function (e) { 
     4586                                        window.dropZoneTimeout = null; 
     4587                                dropZone.removeClass('in hover'); 
     4588                                dropZone.hide(); 
     4589                                dropZone.prev().show(); 
     4590                                }); 
     4591                    }, 1); 
     4592                }).bind('dragleave', function (e) { 
     4593                        var dropZone = $("#fileupload_msg"+ID+"_droopzone"); 
     4594                        window.dropZoneTimeout = setTimeout(function () { 
     4595                        $(window).bind('dragleave', function (e) { 
     4596                                        window.dropZoneTimeout = null; 
     4597                                dropZone.removeClass('in hover'); 
     4598                                dropZone.hide(); 
     4599                                dropZone.prev().show(); 
     4600                                }); 
     4601                    }, 1); 
     4602                }).bind('drop', function(e){ 
     4603                        var dropZone = $("#fileupload_msg"+ID+"_droopzone"); 
     4604                        window.dropZoneTimeout = null; 
     4605                dropZone.removeClass('in hover'); 
     4606                dropZone.hide(); 
     4607                dropZone.prev().show(); 
     4608                }); 
     4609        }        
    44944610        return ID; 
    44954611} 

  • sandbox/2.4.2-expresso2/expressoMail1_2/templates/default/main.css

    r6718 r6752  
    144144form.fileupload .files-list { margin-left: 5px; margin-top: -14px; padding: 0.2em 0.7em; } 
    145145form.fileupload .files-list .delete-upload { top: 7px} 
    146 ul.attachments-list { padding: 0; } 
     146 
     147div.attachments-list { 
     148        max-height: 115px; 
     149        overflow-y: auto; 
     150        padding-top: 5px; 
     151} 
    147152 
    148153.button-files-upload { float:left; } 
    … …  
    230235.expressomail-qs-container .menu-control { float:right; margin-left:400px; position: absolute; z-index: 100; padding-top:5px;} 
    231236.expressomail-qs-container .acc-list { width:444px;height:250px;float:left;border:1px solid #DDD;background-color:#EEE;border-radius:3px;margin-left:1px; margin: 10px 5px 5px 1px;} 
    232 .expressomail-qs-container .details-container { width:295px;height:246px; float:right; margin: 5px 5px;} 
     237.expressomail-qs-container .details-container { width:300px;height:246px; float:right; margin: 5px 0;} 
    233238 
    234239.expressomail-qs-container .acc-list .demo {width:100%;margin-top:20px;} 
    … …  
    236241.dialog-modal.expressomail-qs-container  { height: 416px; padding:5px; } 
    237242 
    238 .ui-dialog .ui-dialog-buttonpane { padding: 0; border:none; margin: 0; padding-right: 0.3px !important;} 
     243.ui-dialog .ui-dialog-buttonpane { padding: 0; border:none; margin: 0;} 
    239244.expressomail-qs-container .menu-control .ui-button-text-only .ui-button-text { padding: 0.1em 0.6em; } 
    240245 
    … …  
    10121017} 
    10131018 
    1014 .qtip.qtip-blue.qtip-active ul { 
    1015         padding: 0; 
    1016 } 
    1017  
    1018 .qtip.qtip-blue.qtip-active li { 
    1019         width: 160px; 
    1020         list-style: none; 
    1021 } 
    1022  
    10231019.new-event-win.active .fc-event-skin { 
    10241020        border-color: #36C !important; 
    … …  
    12991295  
    13001296.box{ 
    1301         background-color: #96B3D3; 
     1297        background-color: #DFEFFC; 
    13021298        border-radius: 5px; 
    13031299        -moz-border-radius: 5px; 
    1304         border: 1px solid #201b41;  
     1300        border: 1px solid #ADD9ED;  
    13051301        display: inline-block; 
    13061302        cursor : pointer; 
    … …  
    13171313        color : #201b41; 
    13181314        outline : none; 
    1319 } 
    1320  
    1321 .invalid-email-box{ 
    1322         background-color: #F08080; 
    1323         border : 1px solid #540303 !important; 
    1324 } 
    1325  
    1326 .invalid-email-box span{ 
    1327         color: #540303; 
    13281315} 
    13291316 
    … …  
    13641351} 
    13651352 
    1366 .box-selected{ 
    1367         background-color : #BBBBBB; 
    1368 } 
     1353 
    13691354 
    13701355.hidden { 
    … …  
    13991384        border-color : red; 
    14001385} 
     1386 
     1387div.conteudo div.new-msg-head-data div.att-box{ 
     1388        background-color: #DFEFFC; 
     1389        border-radius: 5px; 
     1390        -moz-border-radius: 5px; 
     1391        border: 1px solid #ADD9ED;  
     1392        display: inline-block; 
     1393        cursor : pointer; 
     1394        margin-top : 3px; 
     1395        margin-right: 3px; 
     1396        outline : none; 
     1397        padding : 1px; 
     1398} 
     1399 
     1400 
     1401div.conteudo div.new-msg-head-data  div.att-box span.att-box-value{ 
     1402        font-family: Verdana, Arial, Helvetica, sans-serif; 
     1403        font-size: 11px; 
     1404        color : #201b41; 
     1405        outline : none; 
     1406} 
     1407 
     1408div.conteudo div.new-msg-head-data div.att-box span.att-box-loading{ 
     1409        background : url("../../../prototype/modules/mail/img/loading.gif") no-repeat !important; 
     1410        display: inline-block; 
     1411        background-size: 15px auto !important; 
     1412} 
     1413 
     1414div.conteudo div.new-msg-head-data div.att-box.invalid-email-box{ 
     1415        background-color: #ea9aa0; 
     1416        border : 1px solid #540303 !important; 
     1417} 
     1418 
     1419div.new-msg-head-data div.email-area .invalid-email-box{ 
     1420        color: #540303; 
     1421        background-color: #ea9aa0; 
     1422        border : 1px solid #540303 !important; 
     1423} 
     1424 
     1425div.new-msg-head-data div.email-area .box-selected{ 
     1426        background-color : #BBBBBB; 
     1427} 
     1428 
     1429.fileupload_msg_tooltip{ 
     1430        width: 99.7%; 
     1431        text-align: center; 
     1432        background: #DFEFFC; 
     1433        font-weight: bold; 
     1434        border-radius: 5px; 
     1435    height: 115px; 
     1436    line-height: 115px; 
     1437    font-size: larger; 
     1438} 
     1439 
     1440.fileupload_msg_tooltip.hover { 
     1441    background: #ADD9ED; 
     1442} 

  • sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment.ejs

    r6214 r6752  
    1 <div id="fileupload_msg<%=data.ID%>" class="fileupload" style="margin : 15px 0px -15px -10px;"> 
     1<div id="fileupload_msg<%=data.ID%>" class="fileupload" style="margin : 15px 0px -15px -10px; padding-bottom : 5px;"> 
    22        <div class="row fileupload-buttonbar"> 
    33                <div class="button-files-upload"> 
    … …  
    1313        <br /> 
    1414        <div class="files-list" style="margin: 5px; padding: 5px;"> 
    15                 <ul class="attachments-list"></ul> 
     15                <div class="attachments-list ui-corner-all" style="display:none;"></div> 
    1616        </div> 
    1717</div> 
     18<div id="fileupload_msg<%=data.ID%>_droopzone" style="display:none;" class="fileupload_msg_tooltip"> 
     19        Solte aqui seus anexos 
     20</div> 

  • sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment_add_itemlist.ejs

    r6124 r6752  
    1 <li style="list-style : none;"> 
    2         <p class="input-group archive-info" style="margin: 0px 0 !important; height: 17px">              
    3                 <span title="<%=data.file.fullFileName%>" class="archive-attach name"><%=data.file.fileName%></span> 
    4                 <span class="archive-attach size"><%=data.file.fileSize%></span> 
    5                 <button type="button" style="margin-bottom: -4px; <%= is_webkit || is_ie ? '' : 'top : 7px;'%>" class="button close tiny upload delete-upload" title="Deletar">Deletar</button> 
    6                 <span class="status-upload"></span> 
    7                 <%if(data.file.error){%> 
    8                         <span class="archive-error error"><%=data.file.error%></span> 
    9                 <%}if(!data.file.error){%> 
    10                         <span style="width: 110px; height: 14px; overflow:hidden"> 
    11                                 <span class="in-progress"> <img src="../prototype/modules/mail/img/loader.gif" /></span> 
    12                         </span> 
    13                 <%}%> 
    14                 <label class="fileinput-button new"></label> 
    15     </p> 
    16 </li> 
     1<div class="att-box ui-corner-all <%= (data.file.error != '' ? 'invalid-email-box' : '') %>" tabindex="0"> 
     2        <span class="att-box-value" style="padding: 5px;"><%=data.file.fileName%>&nbsp;<b>(<%=data.file.fileSize%>)</b></span> 
     3        <% if(data.file.error == ''){ %> 
     4        <span class="att-box-loading">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
     5        <% } %> 
     6        <span class="att-box-delete ui-icon-close ui-icon" style="display: inline-block;">&nbsp;</span> 
     7</div> 

  • sandbox/2.4.2-expresso2/prototype/modules/mail/templates/new_message.ejs

    r6650 r6752  
    125125                        <tr class="attachment"> 
    126126                                <td class="field"> 
     127                                        <%=get_lang("Attachments: ")%> 
    127128                                        <input style="display:none;" name="attDisposition<%= data.id %>" id="attDisposition<%= data.id%>" value="attachment"/> 
    128129                                </td> 
Note: See TracChangeset for help on using the changeset viewer.