Work in progress of improving mail compose UI

mail/js/app.js

@@ -143,9 +143,18 @@ app.classes.mail = AppJS.extend(
 				break;
 			case 'mail.compose':
 				var app_registry = egw.link_get_registry('mail');
+				var that = this;
 				this.mail_isMainWindow = false;
-				this.hide_cc_compose();
+				this.compose_fieldExpander_hide();
 
+				/* Control focus actions on subject to handle expanders properly.*/
+				jQuery("#mail-compose_subject").on({
+					focus:function(){
+						that.compose_fieldExpander_hide();
+						that.compose_fieldExpander();
+					}
+				});
+								
 				if (typeof app_registry['edit'] != 'undefined' && typeof app_registry['edit_popup'] != 'undefined' )
 				{
 					var w_h =app_registry['edit_popup'].split('x');
@@ -153,7 +162,7 @@ app.classes.mail = AppJS.extend(
 				}
 
 				window.resizeTo((w_h[0]?w_h[0]:870),(w_h[1]?w_h[1]:(screen.availHeight<800?screen.availHeight:800)));
-				this.compose_cc_expander();
+				this.compose_fieldExpander();
 				break;
 		}
 	},
@@ -494,7 +503,7 @@ app.classes.mail = AppJS.extend(
 		}
 		if (content['cc'] || content['bcc'])
 		{
-			this.compose_cc_expander();
+			this.compose_fieldExpander();
 		}
 		return success;
 	},
@@ -3089,62 +3098,97 @@ app.classes.mail = AppJS.extend(
 	},
 
 	/**
-	 * Hide Cc and Bcc rows from the compose popup
+	 * Hide Folder, Cc and Bcc rows from the compose popup
 	 *
 	 */
-	hide_cc_compose: function ()
+	compose_fieldExpander_hide: function ()
 	{
-		jQuery(".mailComposeJQueryCc").hide();
-		jQuery(".mailComposeJQueryBcc").hide();
+		var widgets = {cc:{},bcc:{},folder:{}};
+		for(var widget in widgets)
+		{
+			widgets[widget] = this.et2.getWidgetById(widget+'_expander');
+			if (typeof widgets[widget] != 'undefined')
+			{	
+				widgets[widget].set_disabled(false);
+			}	
+		}
+		jQuery(".mailComposeJQueryCc,.mailComposeJQueryBcc,.mailComposeJQueryFolder").hide();
 	},
-
+	
 	/**
-	 * Display Cc or Bcc fields in compose popup
+	 * Display Folder,Cc or Bcc fields in compose popup
 	 *
 	 * @param {jQuery event} event
-	 * @param {widget object} widget clicked label (Cc or Bcc) from compose popup
+	 * @param {widget object} widget clicked label (Folder, Cc or Bcc) from compose popup
 	 *
 	 */
-	compose_cc_expander: function(event,widget)
+	compose_fieldExpander: function(event,widget)
 	{
-		var Cc = this.et2.getWidgetById('cc_expander');
-		var Bcc = this.et2.getWidgetById('bcc_expander');
-
-		if (typeof widget != "undefined" && widget.id == "cc_expander")
+		var expWidgets = {cc:{},bcc:{},folder:{}};
+		for (var name in expWidgets)
 		{
-			jQuery(".mailComposeJQueryCc").show();
-			if (typeof Cc !='undefined')
-			{
-				Cc.set_disabled(true);
-			}
-
+			expWidgets[name] = this.et2.getWidgetById(name+'_expander');
 		}
-		else if (typeof widget != "undefined" && widget.id == "bcc_expander")
+		
+		if (typeof widget !='undefined')
 		{
-			jQuery(".mailComposeJQueryBcc").show();
-			if (typeof Bcc !='undefined')
+			switch (widget.id)
 			{
-				Bcc.set_disabled(true);
+				case 'cc_expander':
+					jQuery(".mailComposeJQueryCc").show();
+					if (typeof expWidgets.cc !='undefined')
+					{
+						expWidgets.cc.set_disabled(true);
+					}
+					break;
+				case 'bcc_expander':
+					jQuery(".mailComposeJQueryBcc").show();
+					if (typeof expWidgets.bcc !='undefined')
+					{
+						expWidgets.bcc.set_disabled(true);
+					}
+					break;
+				case 'folder_expander':
+					jQuery(".mailComposeJQueryFolder").show();
+					if (typeof expWidgets.folder !='undefined')
+					{
+						expWidgets.folder.set_disabled(true);
+					}
 			}
 		}
 		else if (typeof widget == "undefined")
 		{
-			var CcField = this.et2.getWidgetById('cc');
-			var BccField = this.et2.getWidgetById('bcc');
-			if (CcField.get_value().length)
+			var widgets = {cc:{},bcc:{},folder:{}};
+			
+			for(var widget in widgets)
 			{
-				jQuery(".mailComposeJQueryCc").show();
-				if (typeof Cc !='undefined')
+				widgets[widget] = this.et2.getWidgetById(widget);
+				
+				if (widgets[widget].get_value().length)
 				{
-					Cc.set_disabled(true);
-				}
-			}
-			if (BccField.get_value().length)
-			{
-				jQuery(".mailComposeJQueryBcc").show();
-				if (typeof Bcc !='undefined')
-				{
-					Bcc.set_disabled(true);
+					switch (widget)
+					{
+						case 'cc':
+							jQuery(".mailComposeJQueryCc").show();
+							if (typeof expWidgets.cc != 'undefiend')
+							{
+								expWidgets.cc.set_disabled(true)
+							}
+							break;
+						case 'bcc':
+							jQuery(".mailComposeJQueryBcc").show();
+							if (typeof expWidgets.bcc != 'undefiend')
+							{
+								expWidgets.bcc.set_disabled(true)
+							}
+							break;
+						case 'folder':
+							jQuery(".mailComposeJQueryFolder").show();
+							if (typeof expWidgets.folder != 'undefiend')
+							{
+								expWidgets.folder.set_disabled(true)
+							}
+					}
 				}
 			}
 		}

mail/templates/default/app.css

@@ -126,20 +126,20 @@ tr.forwarded span.status_img {
 
 .subjectBold
 {
-	FONT-SIZE: 12px;
+	font-size: 12px;
 	font-weight : bold;
 	font-family : Arial;
 }
 
 .subject
 {
-	FONT-SIZE: 12px;
+	font-size: 12px;
 	font-family : Arial;
 }
 
 TR.sieveRowActive
 {
-	FONT-SIZE: 11px;
+	font-size: 11px;
 	height : 20px;
 	padding: 0;
 	background : White;
@@ -147,14 +147,14 @@ TR.sieveRowActive
 
 A.sieveRowActive
 {
-	FONT-SIZE: 11px;
+	font-size: 11px;
 	height : 14px;
 	padding: 0;
 }
 
 TR.sieveRowInActive
 {
-	FONT-SIZE: 11px;
+	font-size: 11px;
 	height : 20px;
 	padding: 0;
 	background : White;
@@ -163,7 +163,7 @@ TR.sieveRowInActive
 
 A.sieveRowInActive
 {
-	FONT-SIZE: 11px;
+	font-size: 11px;
 	height : 14px;
 	padding: 0;
 	color: Silver;

mail/templates/default/compose.xet

@@ -59,28 +59,36 @@
 								<textbox class="mail-index_quotaDisplayNone" readonly="true" id="lastdrafted"/>
 							</hbox>
 							<taglist-email id="replyto" empty_label="Reply to" width="100%" maxSelection="1" onclick="app.mail.address_click"/>
+							<hbox>
+								<description id="folder_expander" value="Folder" onclick="app.mail.compose_fieldExpander"/>
+							</hbox>	
+						</row>
+						<row class="mailComposeHeaders mailComposeJQueryFolder">
+							<description value="Folder"/>
+							<taglist id="folder" empty_label="Folder" span="2" autocomplete_url='mail.mail_compose.ajax_searchFolder' autocomplete_params='' allowFreeEntries="false" onclick="app.mail.address_click"/>
 							<description/>
 						</row>
 						<row class="mailComposeHeaders" >
 							<description value="To"/>
 							<taglist-email id="to" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
 							<hbox>
-								<description id="cc_expander" value="Cc" onclick="app.mail.compose_cc_expander"/>
-								<description id="bcc_expander" value="Bcc" onclick="app.mail.compose_cc_expander"/>
+								<description id="cc_expander" value="Cc" onclick="app.mail.compose_fieldExpander"/>
+								<description id="bcc_expander" value="Bcc" onclick="app.mail.compose_fieldExpander"/>
 							</hbox>
 						</row>
 						<row class="mailComposeHeaders mailComposeJQueryCc">
 							<description value="Cc"/>
 							<taglist-email id="cc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
-							<taglist id="folder" empty_label="Folder" autocomplete_url='mail.mail_compose.ajax_searchFolder' autocomplete_params='' allowFreeEntries="false" onclick="app.mail.address_click"/>
+							<description/>
 						</row>
 						<row  class="mailComposeHeaders mailComposeJQueryBcc">
 							<description value="Bcc"/>
 							<taglist-email id="bcc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
+							<description/>
 						</row>
 						<row class="mailComposeHeaders">
 							<description value="Subject"/>
-							<textbox align="left" width="100%" id="subject" span="2"/>
+							<textbox align="left" width="100%" id="subject" span="2" height="25"/>
 							<checkbox statustext="Change editor type" label="HTML" id="mimeType" onchange="app.mail.submitOnChange" options=",, ,disable" tabindex="7"/>
 						</row>
 						<row>
@@ -105,10 +113,10 @@
 					</menulist>
 					<description value=" "/>
 				</groupbox>
-				<groupbox class="et2_file mailUploadSection">
+				<groupbox class="et2_file mailUploadSection" disabled="@no_griddata">
 					<caption label="Files"/>
 					<box class="mailUploadProgress" id="mailUploadProgress" width="99%"/>
-					<grid disabled="@no_griddata" id="attachments" width="100%" maxheight="165" overflow="auto">
+					<grid id="attachments" width="100%" maxheight="165" overflow="auto">
 					  <columns>
 					   <column disabled="!@showtempname"/>
 					   <column width="50%" />

mail/templates/pixelegg/app.css

@@ -131,34 +131,34 @@ tr.forwarded span.status_img {
   background-image: url(images/kmmsgforwarded.png) !important;
 }
 .subjectBold {
-  FONT-SIZE: 12px;
+  font-size: 12px;
   font-weight: bold;
   font-family: Arial;
 }
 .subject {
-  FONT-SIZE: 12px;
+  font-size: 12px;
   font-family: Arial;
 }
 TR.sieveRowActive {
-  FONT-SIZE: 11px;
+  font-size: 11px;
   height: 20px;
   padding: 0;
   background: White;
 }
 A.sieveRowActive {
-  FONT-SIZE: 11px;
+  font-size: 11px;
   height: 14px;
   padding: 0;
 }
 TR.sieveRowInActive {
-  FONT-SIZE: 11px;
+  font-size: 11px;
   height: 20px;
   padding: 0;
   background: White;
   color: Silver;
 }
 A.sieveRowInActive {
-  FONT-SIZE: 11px;
+  font-size: 11px;
   height: 14px;
   padding: 0;
   color: Silver;
@@ -1333,6 +1333,40 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
   background-color: #189800;
   color: #ffffff;
 }
+#mail-compose .mailComposeHeaders span#mail-compose_folder_expander,
+#mail-compose .mailComposeHeadersSection span#mail-compose_folder_expander {
+  /*.border_normal;*/
+  /*.box_shadow_standard_light;*/
+  /*.rounded (3px);*/
+  color: #000000;
+  -webkit-appearance: none;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
+  background-color: #b4b4b4;
+  float: left;
+  width: 47px;
+  margin: 3px;
+  font-size: 8px;
+  margin-left: 12px;
+}
+#mail-compose .mailComposeHeaders span#mail-compose_folder_expander:hover,
+#mail-compose .mailComposeHeadersSection span#mail-compose_folder_expander:hover {
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+  background-color: #189800;
+  color: #ffffff;
+}
 #mail-compose .mailComposeHeaders input#mail-compose_subject,
 #mail-compose .mailComposeHeadersSection input#mail-compose_subject {
   max-width: 716px;

mail/templates/pixelegg/app.less

@@ -599,6 +599,15 @@ div#mail-index{
             margin-left: 12px;
             &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;color: @gray_0;}
         }
+		span#mail-compose_folder_expander{
+			.Complete_Button_normal;
+            float: left;
+            width: 47px;
+            margin: 3px;
+            font-size: 8px;
+            margin-left: 12px;
+            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;color: @gray_0;}
+		}
         /*Betreff*/
         input#mail-compose_subject { max-width: 716px;}