Index: /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment_add_itemlist.ejs
===================================================================
--- /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment_add_itemlist.ejs	(revision 6124)
+++ /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment_add_itemlist.ejs	(revision 6752)
@@ -1,16 +1,7 @@
-<li style="list-style : none;">
-	<p class="input-group archive-info" style="margin: 0px 0 !important; height: 17px">		
-		<span title="<%=data.file.fullFileName%>" class="archive-attach name"><%=data.file.fileName%></span>
-		<span class="archive-attach size"><%=data.file.fileSize%></span>
-		<button type="button" style="margin-bottom: -4px; <%= is_webkit || is_ie ? '' : 'top : 7px;'%>" class="button close tiny upload delete-upload" title="Deletar">Deletar</button>
-		<span class="status-upload"></span>
-		<%if(data.file.error){%>
-			<span class="archive-error error"><%=data.file.error%></span>
-		<%}if(!data.file.error){%>
-			<span style="width: 110px; height: 14px; overflow:hidden">
-				<span class="in-progress"> <img src="../prototype/modules/mail/img/loader.gif" /></span>
-			</span>
-		<%}%>
-		<label class="fileinput-button new"></label>
-    </p>
-</li>
+<div class="att-box ui-corner-all <%= (data.file.error != '' ? 'invalid-email-box' : '') %>" tabindex="0">
+	<span class="att-box-value" style="padding: 5px;"><%=data.file.fileName%>&nbsp;<b>(<%=data.file.fileSize%>)</b></span>
+	<% if(data.file.error == ''){ %>
+	<span class="att-box-loading">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+	<% } %>
+	<span class="att-box-delete ui-icon-close ui-icon" style="display: inline-block;">&nbsp;</span>
+</div>
Index: /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment_add_itemlist_tooltip.ejs
===================================================================
--- /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment_add_itemlist_tooltip.ejs	(revision 6752)
+++ /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment_add_itemlist_tooltip.ejs	(revision 6752)
@@ -0,0 +1,19 @@
+<span>
+	<b>File Name: </b>
+	<%=data.attach.fullFileName%>
+</span>
+<br/>
+<span>
+	<b>File Size: </b>
+	<%=data.attach.fileSize%>
+</span>
+<br/>
+<span style="display:inline-block;">
+	<b>Status: </b>
+	<%=(data.attach.error == "" ? "Success " : data.attach.error)%>
+
+</span>
+<% if(data.attach.error == ''){ %>
+
+<span style="display:inline-block;" class="ui-icon <%=(data.attach.error == ''? 'ui-icon-check' : 'ui-icon-close')%>"></span>
+<% } %>
Index: /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment.ejs
===================================================================
--- /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment.ejs	(revision 6214)
+++ /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/attachment.ejs	(revision 6752)
@@ -1,3 +1,3 @@
-<div id="fileupload_msg<%=data.ID%>" class="fileupload" style="margin : 15px 0px -15px -10px;">
+<div id="fileupload_msg<%=data.ID%>" class="fileupload" style="margin : 15px 0px -15px -10px; padding-bottom : 5px;">
 	<div class="row fileupload-buttonbar">
 		<div class="button-files-upload">
@@ -13,5 +13,8 @@
 	<br />
 	<div class="files-list" style="margin: 5px; padding: 5px;">
-		<ul class="attachments-list"></ul>
+		<div class="attachments-list ui-corner-all" style="display:none;"></div>
 	</div>
 </div>
+<div id="fileupload_msg<%=data.ID%>_droopzone" style="display:none;" class="fileupload_msg_tooltip">
+	Solte aqui seus anexos
+</div>
Index: /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/new_message.ejs
===================================================================
--- /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/new_message.ejs	(revision 6650)
+++ /sandbox/2.4.2-expresso2/prototype/modules/mail/templates/new_message.ejs	(revision 6752)
@@ -125,4 +125,5 @@
 			<tr class="attachment">
 				<td class="field">
+					<%=get_lang("Attachments: ")%>
 					<input style="display:none;" name="attDisposition<%= data.id %>" id="attDisposition<%= data.id%>" value="attachment"/>
 				</td>
Index: /sandbox/2.4.2-expresso2/expressoMail1_2/templates/default/main.css
===================================================================
--- /sandbox/2.4.2-expresso2/expressoMail1_2/templates/default/main.css	(revision 6718)
+++ /sandbox/2.4.2-expresso2/expressoMail1_2/templates/default/main.css	(revision 6752)
@@ -144,5 +144,10 @@
 form.fileupload .files-list { margin-left: 5px; margin-top: -14px; padding: 0.2em 0.7em; }
 form.fileupload .files-list .delete-upload { top: 7px}
-ul.attachments-list { padding: 0; }
+
+div.attachments-list {
+	max-height: 115px;
+	overflow-y: auto;
+	padding-top: 5px;
+}
 
 .button-files-upload { float:left; }
@@ -230,5 +235,5 @@
 .expressomail-qs-container .menu-control { float:right; margin-left:400px; position: absolute; z-index: 100; padding-top:5px;}
 .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;}
-.expressomail-qs-container .details-container { width:295px;height:246px; float:right; margin: 5px 5px;}
+.expressomail-qs-container .details-container { width:300px;height:246px; float:right; margin: 5px 0;}
 
 .expressomail-qs-container .acc-list .demo {width:100%;margin-top:20px;}
@@ -236,5 +241,5 @@
 .dialog-modal.expressomail-qs-container  { height: 416px; padding:5px; }
 
-.ui-dialog .ui-dialog-buttonpane { padding: 0; border:none; margin: 0; padding-right: 0.3px !important;}
+.ui-dialog .ui-dialog-buttonpane { padding: 0; border:none; margin: 0;}
 .expressomail-qs-container .menu-control .ui-button-text-only .ui-button-text { padding: 0.1em 0.6em; }
 
@@ -1012,13 +1017,4 @@
 }
 
-.qtip.qtip-blue.qtip-active ul {
-	padding: 0;
-}
-
-.qtip.qtip-blue.qtip-active li {
-	width: 160px;
-	list-style: none;
-}
-
 .new-event-win.active .fc-event-skin {
 	border-color: #36C !important;
@@ -1299,8 +1295,8 @@
  
 .box{
-	background-color: #96B3D3;
+	background-color: #DFEFFC;
 	border-radius: 5px;
 	-moz-border-radius: 5px;
-	border: 1px solid #201b41; 
+	border: 1px solid #ADD9ED; 
 	display: inline-block;
 	cursor : pointer;
@@ -1317,13 +1313,4 @@
 	color : #201b41;
 	outline : none;
-}
-
-.invalid-email-box{
-	background-color: #F08080;
-	border : 1px solid #540303 !important;
-}
-
-.invalid-email-box span{
-	color: #540303;
 }
 
@@ -1364,7 +1351,5 @@
 }
 
-.box-selected{
-	background-color : #BBBBBB;
-}
+
 
 .hidden {
@@ -1399,2 +1384,59 @@
 	border-color : red;
 }
+
+div.conteudo div.new-msg-head-data div.att-box{
+	background-color: #DFEFFC;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	border: 1px solid #ADD9ED; 
+	display: inline-block;
+	cursor : pointer;
+	margin-top : 3px;
+	margin-right: 3px;
+	outline : none;
+	padding : 1px;
+}
+
+
+div.conteudo div.new-msg-head-data  div.att-box span.att-box-value{
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 11px;
+	color : #201b41;
+	outline : none;
+}
+
+div.conteudo div.new-msg-head-data div.att-box span.att-box-loading{
+	background : url("../../../prototype/modules/mail/img/loading.gif") no-repeat !important;
+	display: inline-block;
+	background-size: 15px auto !important;
+}
+
+div.conteudo div.new-msg-head-data div.att-box.invalid-email-box{
+	background-color: #ea9aa0;
+	border : 1px solid #540303 !important;
+}
+
+div.new-msg-head-data div.email-area .invalid-email-box{
+	color: #540303;
+	background-color: #ea9aa0;
+	border : 1px solid #540303 !important;
+}
+
+div.new-msg-head-data div.email-area .box-selected{
+	background-color : #BBBBBB;
+}
+
+.fileupload_msg_tooltip{
+	width: 99.7%;
+	text-align: center;
+	background: #DFEFFC;
+	font-weight: bold;
+	border-radius: 5px;
+    height: 115px;
+    line-height: 115px;
+    font-size: larger;
+}
+
+.fileupload_msg_tooltip.hover {
+    background: #ADD9ED;
+}
Index: /sandbox/2.4.2-expresso2/expressoMail1_2/js/draw_api.js
===================================================================
--- /sandbox/2.4.2-expresso2/expressoMail1_2/js/draw_api.js	(revision 6717)
+++ /sandbox/2.4.2-expresso2/expressoMail1_2/js/draw_api.js	(revision 6752)
@@ -896,6 +896,4 @@
 	var _mouse_out;
 	var _cell;
-	var colGroupMain = document.getElementById("colgroup_main_"+numBox);
-	var colGroupHead = document.getElementById("colgroup_head_"+numBox);
 	for (var r=0;r<trM.length;r++) {
 		for (var c=0;c<trM[r].cells.length;c++) {
@@ -904,7 +902,7 @@
 			if (is_mozilla && !is_webkit) {
 				if (!emptyBody) {
-					colGroupMain.childNodes[c].setAttribute("width",colSizes[tbl][c]);
+					document.getElementById("colgroup_main_"+numBox).childNodes[c].setAttribute("width",colSizes[tbl][c]);
 				}
-				colGroupHead.childNodes[c].setAttribute("width",colSizes[tbl][c]);
+				document.getElementById("colgroup_head_"+numBox).childNodes[c].setAttribute("width",colSizes[tbl][c]);
 				if (tbH.rows[0].cells[c].className=="th_resizable") {
 					// lots of stupid fixes for FF to redraw cell content
@@ -921,8 +919,7 @@
 				}
 			}
-			/*
 			else {
 				tbH.rows[0].cells[c].setAttribute("width",_cell.offsetWidth);
-			}*/
+			}
 		}
 	}
@@ -4337,6 +4334,16 @@
 	var maxAttachmentSize = (preferences.max_attachment_size !== "" && preferences.max_attachment_size != 0) ? (parseInt(preferences.max_attachment_size.replace('M', '')) * 1048576 ) : false;
 	
+	content.find(".new-msg-head-data").scroll(function(){
+		$.each(fileUploadMSG.find(".attachments-list .att-box"), function(index, value){
+			$(this).qtip("api").updatePosition();
+		});
+	});
+	$("#fileupload_msg"+ID+"_droopzone").click(function(){
+		$(this).removeClass('in hover');
+    	$(this).hide();
+    	$(this).prev().show();
+	});
 	fileUploadMSG.find(".button").button().filter(".fileinput-button").find(".ui-button-text").css("margin-top", "2px").find("input:file").fileupload({
-		//singleFileUploads : true,
+		//singleFileUploads : true,fileUploadMSG
 		sequentialUploads: true, 
 		type: 'post',
@@ -4344,5 +4351,5 @@
 		url: "../prototype/post.php",
 		forceIframeTransport: false,
-		dropZone : fileUploadMSG,
+		dropZone : $("#fileupload_msg"+ID+"_droopzone"),
 		formData: function(form) {
 			return [
@@ -4368,28 +4375,58 @@
 				}, 3000);
 			}
+			fileUploadMSG.find(' .attachments-list').show();
 			$.each(data.files, function (index, file) {
 				var attach = {};
 				attach.fullFileName = file.name;
 				attach.fileName = file.name;
-				if(file.name.length > 50)
-					attach.fileName = file.name.substr(0, 32) + " ... " + file.name.substr(file.name.length-9, file.name.length);
+				if(file.name.length > 20)
+					attach.fileName = file.name.substr(0, 17) + " ... " + file.name.substr(file.name.length-6, file.name.length);
 				attach.fileSize = formatBytes(file.size);
 				if(maxAttachmentSize && file.size > maxAttachmentSize)
 					attach.error = 'Tamanho de arquivo nao permitido!!'
-				
-                                var upload = $(DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist.ejs", {file : attach}));				
-				upload.find('.button.close').button({
-					icons: {
-						primary: "ui-icon-close"
-					},
-					text: false
-				}).click(function(){
+				else
+					attach.error = 'Loading...';	
+				var upload = $(DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist.ejs", {file : attach}));				
+				upload.find('.att-box-delete').click(function(){
 					var idAttach = $(this).parent().find('input[name="fileId[]"]').val();
 					fileUploadMSG.find(' .attachments-list').find('input[value="'+idAttach+'"]').remove();
-                                        delAttachment(ID, idAttach)
+                    delAttachment(ID, idAttach);
+                    $(this).parent().qtip("destroy");
 					$(this).parent().remove();
+					if(!fileUploadMSG.find(' .attachments-list').find(".att-box").length){
+						fileUploadMSG.find(' .attachments-list').hide();
+					}
 				});
-                                
-                                fileUploadMSG.find('.attachments-list').append(upload);
+                   
+                fileUploadMSG.find('.attachments-list').append(upload);
+
+              	fileUploadMSG.find('.attachments-list .att-box:last').qtip({
+                	content: DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist_tooltip.ejs", {attach : attach}),
+					position: {
+						corner: {
+							tooltip: 'bottomMiddle',
+							target: 'topMiddle'
+						},
+						adjust: {
+			               resize: true,
+			               scroll: true
+			            }
+					},
+					show: {
+						when: 'mouseover', // Don't specify a show event
+						ready: false // Show the tooltip when ready
+					},
+					hide: 'mouseout', // Don't specify a hide event
+					style: {
+						border: {
+							width: 1,
+							radius: 5
+						},
+						padding: 5, 
+						textAlign: 'center',
+						tip: true, // Give it a speech bubble tip with automatic corner detection
+						name: 'blue' // Style it according to the preset 'cream' style
+					}
+                });
 
 				if(!maxAttachmentSize || file.size < maxAttachmentSize){
@@ -4408,17 +4445,17 @@
 					if(newAttach.rollback !== false)
 					{
-						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');
+						fileUploadMSG.find('.att-box-loading:first').parents('div:first').append('<input type="hidden" name="fileId[]" value="'+newAttach['mailAttachment'][0][0].id+'"/>');
 						addAttachment(ID,newAttach['mailAttachment'][0][0].id);
 					}
 					else                             
-						fileUploadMSG.find('.in-progress:first').parents('p').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error');   
+						fileUploadMSG.find('.att-box-loading:first').parents('div:first').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error');   
 				}else{
-					fileUploadMSG.find('.in-progress:first').parents('p').find('.status-upload').append(newAttach.mailAttachment.error).addClass('message-attach-error');   
+					fileUploadMSG.find('.att-box-loading:first').parents('div:first').find('.status-upload').append(newAttach.mailAttachment.error).addClass('message-attach-error');   
 				}
                                 
 			}else {
-				fileUploadMSG.find(' .progress.on-complete:first').parents('p').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error');
-			}
-            fileUploadMSG.find(' .in-progress:first').remove();
+				fileUploadMSG.find(' .progress.on-complete:first').parents('div:first').find('.status-upload').append('Erro ao fazer upload!').addClass('message-attach-error');
+			}
+            fileUploadMSG.find(' .att-box-loading:first').remove();
 		}
 	}).css({
@@ -4449,4 +4486,5 @@
 					jQuery.each(selectedMessages[folder_name], function(message_number, message) { 
 						if (message) {
+							fileUploadMSG.find(' .attachments-list').show();	
 							var att = new Object();
 							att.folder = folder_name;
@@ -4458,26 +4496,57 @@
 							var attach = {};
 							attach.fileName = onceOpenedMessages[folder_name][message_number].subject + '.eml';
-							if(attach.fileName.length > 45)
-									attach.fileName = attach.fileName.substr(0, 32) + " ... " + attach.fileName.substr(attach.fileName.length-9, attach.fileName.length);
-
+							attach.fullFileName = onceOpenedMessages[folder_name][message_number].subject + '.eml';
+							if(attach.fileName.length > 20)
+								attach.fileName = attach.fileName.substr(0, 17) + "... " + attach.fileName.substr(attach.fileName.length-9, attach.fileName.length);
+
+							attach.error = "";
 							attach.fileSize = formatBytes(onceOpenedMessages[folder_name][message_number].size);
 							var upload = $(DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist.ejs", {file : attach}));
-							upload.find('.status-upload').addClass('ui-icon ui-icon-check');
-							upload.find('.in-progress').remove(); 
+							upload.find('.att-box-loading').remove();
 							upload.append('<input type="hidden" name="fileId[]" value=\''+idATT+'\'/>');
 							
-							upload.find('.button.close').button({
-								icons: {
-												primary: "ui-icon-close"
-										},
-										text: false
-								}).click(function(){
-										var idAttach = $(this).parents("li:first").find('input[name="fileId[]"]').val();
-										fileUploadMSG.find(' .attachments-list').find('input[value="'+idAttach+'"]');
-										delAttachment(ID,idAttach); 
-										$(this).parent().remove();
+							upload.find('.att-box-delete').click(function(){
+								var idAttach = $(this).parent().find('input[name="fileId[]"]').val();
+								fileUploadMSG.find(' .attachments-list').find('input[value="'+idAttach+'"]').remove();
+								delAttachment(ID,idAttach); 
+								$(this).parent().qtip("destroy");
+								$(this).parent().remove();
+								if(!fileUploadMSG.find(' .attachments-list').find(".att-box").length){
+									fileUploadMSG.find(' .attachments-list').hide();
+								}
 							});	
 							
-							fileUploadMSG.find('.attachments-list').append(upload);   
+							fileUploadMSG.find('.attachments-list').append(upload); 
+
+							upload.find('.att-box-loading').remove();
+
+							fileUploadMSG.find('.attachments-list .att-box:last').qtip({
+			                	content: DataLayer.render("../prototype/modules/mail/templates/attachment_add_itemlist_tooltip.ejs", {attach : attach}),
+								position: {
+									corner: {
+										tooltip: 'bottomMiddle',
+										target: 'topMiddle'
+									},
+									adjust: {
+						               resize: true,
+						               scroll: true
+						            }
+								},
+								show: {
+									when: 'mouseover', // Don't specify a show event
+									ready: false // Show the tooltip when ready
+								},
+								hide: 'mouseout', // Don't specify a hide event
+								style: {
+									border: {
+										width: 1,
+										radius: 5
+									},
+									padding: 5, 
+									textAlign: 'center',
+									tip: true, // Give it a speech bubble tip with automatic corner detection
+									name: 'blue' // Style it according to the preset 'cream' style
+								}
+			                });
 						}
 					});
@@ -4492,4 +4561,51 @@
 		});
 	});
+	$(document).bind('drop dragover', function (e) {
+	    e.preventDefault();
+	});
+	//DRAG and DROP DE ARQUIVOS NÃO FUNCIONA NO IE
+	if(!is_ie){
+		$("body").bind('dragenter', function (e) {
+		    var dropZone = $("#fileupload_msg"+ID+"_droopzone");
+        	var timeout = window.dropZoneTimeout;
+			dropZone.show();
+			dropZone.prev().hide();
+		    if (!timeout) {
+		        dropZone.addClass('in');
+		    } else {
+		        clearTimeout(timeout);
+		    }
+		    if (e.target === dropZone[0]) {
+		        dropZone.addClass('hover');
+		    } else {
+		        dropZone.removeClass('hover');
+		    }
+		    $(window).unbind('dragleave');
+		    window.dropZoneTimeout = setTimeout(function () {
+        		$(window).bind('dragleave', function (e) {
+					window.dropZoneTimeout = null;
+		        	dropZone.removeClass('in hover');
+		        	dropZone.hide();
+		        	dropZone.prev().show();
+				});
+		    }, 1);
+		}).bind('dragleave', function (e) {
+			var dropZone = $("#fileupload_msg"+ID+"_droopzone");
+			window.dropZoneTimeout = setTimeout(function () {
+        		$(window).bind('dragleave', function (e) {
+					window.dropZoneTimeout = null;
+		        	dropZone.removeClass('in hover');
+		        	dropZone.hide();
+		        	dropZone.prev().show();
+				});
+		    }, 1);
+		}).bind('drop', function(e){
+			var dropZone = $("#fileupload_msg"+ID+"_droopzone");
+			window.dropZoneTimeout = null;
+        	dropZone.removeClass('in hover');
+        	dropZone.hide();
+        	dropZone.prev().show();
+		});
+	}	
 	return ID;
 }
