- Preview attachments now shows/hides similar to TO && CC addresses

- Re-order preview fields
- Fix auto-refresh would not turn off

mail/js/app.js

@@ -57,6 +57,16 @@ app.classes.mail = AppJS.extend(
 	 */
 	init: function() {
 		this._super.apply(this,arguments);
+
+		// Set refresh from preferences
+		this.mail_refreshTimeOut = 1000 * (
+			// Nextmatch setting
+			egw.preference('nextmatch-mail.index.rows-autorefresh','mail') ||
+			// Preference setting copied from felamimail
+			egw.preference('refreshTime','mail') ||
+			0
+		);
+
 		window.register_app_refresh("mail", this.app_refresh);
 	},
 
@@ -541,60 +551,72 @@ app.classes.mail = AppJS.extend(
 			return;
 		}
 
-		// Set up additional addresses.  Too bad they weren't all together somewhere.
+		// Set up additional content that can be expanded.
-		// We add a new URL widget for each, so they get all the UI
+		// We add a new URL widget for each address, so they get all the UI
 		// TO addresses have the first one split out, not all together
 		// list of keys:
-		var additional_addresses = [
+		var expand_content = [
-			{data_one: 'toaddress', data: 'additionaltoaddress', widget: 'additionalToAddress', line: 'mailPreviewHeadersTo'},
+			{build_children: true, data_one: 'toaddress', data: 'additionaltoaddress', widget: 'additionalToAddress', line: 'mailPreviewHeadersTo'},
-			{data: 'ccaddress', widget: 'additionalCCAddress', line: 'mailPreviewHeadersCC'}
+			{build_children: true, data: 'ccaddress', widget: 'additionalCCAddress', line: 'mailPreviewHeadersCC'},
+			{build_children: false, data: 'attachmentsBlock', widget:'previewAttachmentArea', line: 'mailPreviewHeadersAttachments'}
 		];
-		for(var j = 0; j < additional_addresses.length; j++)
+		for(var j = 0; j < expand_content.length; j++)
 		{
-			var field = additional_addresses[j] || [];
+			var field = expand_content[j] || [];
-			var addresses = dataElem.data[field.data] || [];
+			var content = dataElem.data[field.data] || [];
 
 			// Add in single address, if there
 			if(typeof field.data_one != 'undefined')
 			{
-				addresses.unshift(dataElem.data[field.data_one]);
+				content.unshift(dataElem.data[field.data_one]);
 				// Unique
-				addresses = addresses.filter(function(value, index, self) {
+				content = content.filter(function(value, index, self) {
 					return self.indexOf(value) === index;
 				});
 			}
 
 			// Disable whole box if there are none
 			var line = this.et2.getWidgetById(field.line);
-			if(line != null) line.set_disabled(addresses.length == 0);
+			if(line != null) line.set_disabled(content.length == 0);
 
 			var widget = this.et2.getWidgetById(field.widget);
 			if(widget == null) continue;
 			$j(widget.getDOMNode()).removeClass('visible');
 
-			// Remove any existing
+			// Programatically build the child elements
-			var children = widget.getChildren();
+			if(field.build_children)
-			for(var i = children.length-1; i >= 0; i--)
 			{
-				children[i].destroy();
+				// Remove any existing
-				widget.removeChild(children[i]);
+				var children = widget.getChildren();
+				for(var i = children.length-1; i >= 0; i--)
+				{
+					children[i].destroy();
+					widget.removeChild(children[i]);
+				}
+
+				// Add for current record
+				for(var i = 0; i < content.length; i++)
+				{
+					var value = content[i];
+					var email = et2_createWidget('url-email',{value:value,readonly:true},widget);
+					email.loadingFinished();
+				}
+			}
+			else
+			{
+				widget.set_value({content: content});
 			}
 
-			// Add for current record
+			// Show or hide button, as needed
-			for(var i = 0; i < addresses.length; i++)
-			{
-				var value = addresses[i];
-				var email = et2_createWidget('url-email',{value:value,readonly:true},widget);
-				email.loadingFinished();
-			}
-
-			// Set up button
 			line.iterateOver(function(button) {
+				// Avoid binding to any child buttons
+				if(button.getParent() != line) return;
 				button.set_disabled(
 					// Disable if only 1 address
-					addresses.length <=1 ||
+					content.length <=1 || (
-					// Disable if all addresses are visible
+					// Disable if all content is visible
-					$j(widget.getDOMNode()).innerWidth() >= widget.getDOMNode().scrollWidth
+					$j(widget.getDOMNode()).innerWidth() >= widget.getDOMNode().scrollWidth &&
+					$j(widget.getDOMNode()).innerHeight() >= widget.getDOMNode().scrollHeight)
 				);
 			},this,et2_button);
 		}
@@ -602,14 +624,6 @@ app.classes.mail = AppJS.extend(
 		//console.log("mail_preview",dataElem);
 		this.mail_selectedMails.push(_id);
 		this.mail_disablePreviewArea(false);
-		if (dataElem.data.attachmentsBlock.length<1)
-		{
-			this.et2.getWidgetById('previewAttachmentArea').set_class('previewAttachmentArea noContent mail_DisplayNone');
-		}
-		else
-		{
-			this.et2.getWidgetById('previewAttachmentArea').set_value({content:dataElem.data.attachmentsBlock});
-		}
 		this.et2.getWidgetById('toolbar').set_actions(JSON.parse(dataElem.data.toolbaractions));
 		var IframeHandle = this.et2.getWidgetById('messageIFRAME');
 		//console.log(IframeHandle);
@@ -622,10 +636,16 @@ app.classes.mail = AppJS.extend(
 	},
 
 	/**
-	 * showAllAddresses
+	 * If a preview header is partially hidden, this is the handler for clicking the
+	 * expand button that shows all the content for that header.
+	 * The button must be directly after the widget to be expanded in the template.
+	 * The widget to be expended is set in the event data.
+	 *
 	 * requires: mainWindow, one mail selected for preview
+	 *
+	 * @param {DOMNode} button
 	 */
-	showAllAddresses: function(button) {
+	showAllHeader: function(button) {
 		// Show list as a list
 		var list = jQuery(button).prev();
 		list.toggleClass('visible');
@@ -650,11 +670,10 @@ app.classes.mail = AppJS.extend(
 	mail_startTimerFolderStatusUpdate: function(_refreshTimeOut) {
 		if (typeof _refreshTimeOut == 'undefined')
 		{
-			var minutes = egw.preference('refreshTime','mail');
+			_refreshTimeOut = this.mail_refreshTimeOut;
-			this.mail_refreshTimeOut = _refreshTimeOut= 1000*60*(minutes?minutes:3); // either the prefs or 3 Minutes
 		}
 		if (this.mail_refreshTimeOut > _refreshTimeOut) _refreshTimeOut = this.mail_refreshTimeOut;
-		if(this.mail_doTimedRefresh) {
+		if(this.mail_doTimedRefresh || _refreshTimeOut == 0) {
 			window.clearTimeout(this.mail_doTimedRefresh);
 		}
 		if(_refreshTimeOut > 9999) {//we do not set _refreshTimeOut's less than 10 seconds

mail/templates/default/app.css

@@ -438,18 +438,16 @@ input[type=button] {
 }
 #mail-index_previewAttachmentArea {
 	background-color:#efefdf;
-	max-height: 3em;
+	max-height: 1.6em;
 	max-width: 50%;
-	position: absolute;
 	overflow:scroll;
 	overflow-x:hidden;
-	right: 0;
-	top: 25px;
 	border: 1px solid red;
 	opacity: 1;
 	-moz-opacity:1;
 	filter: Alpha(opacity=100);
 	display: inline-block !important;
+	vertical-align: text-top;
 }
 #mail-index_previewAttachmentArea.noContent {
 	border:0px !important;
@@ -543,13 +541,13 @@ div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-c
 
 div.mailPreviewHeaders div.mail_extraEmails {
 	display: inline-block;
-	max-height: 1em;
+	max-height: 1.3em;
 	max-width: 50%;
-	padding: 5px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-div.mailPreviewHeaders div.mail_extraEmails.visible {
+div.mailPreviewHeaders div.mail_extraEmails.visible,
+div.mailPreviewHeaders #mail-index_previewAttachmentArea.visible {
 	position: absolute;
 	left: 7em;
 	display: block;
@@ -561,6 +559,7 @@ div.mailPreviewHeaders div.mail_extraEmails.visible {
 }
 .mail_extraEmails > a {
 	display:inline;
+	margin: 5px 5px 0 0;
 }
 .mail_extraEmails.visible > a {
 	display: list-item;

mail/templates/default/index.xet

@@ -52,29 +52,28 @@
 					<description value="From"/>
 					<url-email id="previewFromAddress" readonly="true"/>
 				</hbox>
+				<hbox width="100%" id="mailPreviewHeadersSubject" class="mailPreviewHeaders">
+					<description value="Subject"/>
+					<description align="left" id="previewSubject" readonly="true"/>
+				</hbox>
+				<hbox id="mailPreviewHeadersDate" class="mailPreviewHeaders">
+					<date-time align="left" id="previewDate" readonly="true"/>
+				</hbox>
 				<hbox width="100%" id="mailPreviewHeadersTo" class="mailPreviewHeaders">
 					<description value="To"/>
 					<hbox id="additionalToAddress" class="mail_extraEmails">
 					</hbox>
-					<buttononly class="et2_button ui-button" label="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllAddresses"/>
+					<buttononly class="et2_button ui-button" label="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllHeader"/>
 				</hbox>
 				<hbox id="mailPreviewHeadersCC" class="mailPreviewHeaders">
 					<description value="CC"/>
 					<hbox id="additionalCCAddress" class="mail_extraEmails">
 					</hbox>
-					<buttononly class="et2_button ui-button" label="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllAddresses"/>
+					<buttononly class="et2_button ui-button" label="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllHeader"/>
 				</hbox>
-				<hbox width="100%" id="mailPreviewHeadersDate" class="mailPreviewHeaders">
+				<hbox id="mailPreviewHeadersAttachments" class="mailPreviewHeaders">
-					<description value="Date"/>
+					<description value="Attachments"/>
-					<date-time align="left" id="previewDate" readonly="true"/>
+					<grid disabled="@no_griddata" id="previewAttachmentArea" class="previewAttachmentArea">
-				</hbox>
-				<hbox width="100%" id="mailPreviewHeadersSubject" class="mailPreviewHeaders">
-					<description value="Subject"/>
-					<description align="left" id="previewSubject" readonly="true"/>
-				</hbox>
-				<hbox class="previewAttachmentArea">
-					<!-- <html id="previewAttachmentArea"/> -->
-					<grid disabled="@no_griddata" id="previewAttachmentArea">
 					  <columns>
 					   <column disabled="!@showtempname"/>
 					   <column disabled="!@showtempname"/>
@@ -94,7 +93,7 @@
 						<description id="${row}[partID]" />
 						<description id="${row}[type]" />
 						<description id="${row}[winmailFlag]" />
-						<description class="useEllipsis et2_link" id="${row}[filename]" no_lang="1" onclick="app.mail.displayAttachment"/>
+						<description class="et2_link" id="${row}[filename]" no_lang="1" onclick="app.mail.displayAttachment"/>
 						<description id="${row}[mimetype]" />
 						<description align="right" id="${row}[size]" />
 						<buttononly id="${row}[save]" value="save" image="fileexport" onclick="app.mail.saveAttachment"/>
@@ -103,6 +102,7 @@
 					   </row>
 					  </rows>
 					</grid>
+					<buttononly class="et2_button ui-button" label="Show all attachments" image="foldertree_nolines_plus" onclick="app.mail.showAllHeader"/>
 				</hbox>
 				<hbox id="mailPreviewIcons">
 					<toolbar id="toolbar"/>

mail/templates/pixelegg/app.css

@@ -433,18 +433,16 @@ input[type=button] {
 }
 #mail-index_previewAttachmentArea {
   background-color: #efefdf;
-  max-height: 3em;
+  max-height: 1.6em;
   max-width: 50%;
-  position: absolute;
   overflow: scroll;
   overflow-x: hidden;
-  right: 0;
-  top: 25px;
   border: 1px solid red;
   opacity: 1;
   -moz-opacity: 1;
   filter: alpha(opacity=100);
   display: inline-block !important;
+  vertical-align: text-top;
 }
 #mail-index_previewAttachmentArea.noContent {
   border: 0px !important;
@@ -540,13 +538,13 @@ div.mailPreviewHeaders > * {
 }
 div.mailPreviewHeaders div.mail_extraEmails {
   display: inline-block;
-  max-height: 1em;
+  max-height: 1.3em;
   max-width: 50%;
-  padding: 5px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-div.mailPreviewHeaders div.mail_extraEmails.visible {
+div.mailPreviewHeaders div.mail_extraEmails.visible,
+div.mailPreviewHeaders #mail-index_previewAttachmentArea.visible {
   position: absolute;
   left: 7em;
   display: block;
@@ -558,6 +556,7 @@ div.mailPreviewHeaders div.mail_extraEmails.visible {
 }
 .mail_extraEmails > a {
   display: inline;
+  margin: 5px 5px 0 0;
 }
 .mail_extraEmails.visible > a {
   display: list-item;
@@ -608,7 +607,9 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersTo {
   width: 50%;
 }
 div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersDate {
-  width: 50%;
+  position: absolute;
+  right: 0px;
+  margin: 5px 5px 0 0;
 }
 div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject {
   width: 100%;
@@ -1486,7 +1487,7 @@ input[type=button] {
 #mail-index_mailPreviewContainer {
   position: absolute;
   border: 1px solid silver;
-  top: 75px;
+  top: 90px;
   bottom: 0;
   left: 3px;
   right: 0;
@@ -1545,18 +1546,8 @@ input[type=button] {
 }
 #mail-index_previewAttachmentArea {
   background-color: #f0f0f0;
-  max-height: 5%;
-  max-width: 50%;
-  position: absolute;
-  overflow: scroll;
-  overflow-x: hidden;
-  right: 7px;
-  top: 45px;
   border-color: #e6e6e6;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  opacity: 1;
-  -moz-opacity: 1;
-  z-index: 100;
 }
 #mail-index_previewAttachmentArea img {
   width: 16px;

mail/templates/pixelegg/app.less

@@ -140,7 +140,9 @@ div#mail-index{
 
             // Date
             div#mail-index_mailPreviewHeadersDate{
-                width: 50%;
+                position: absolute;
+				right: 0px;
+				margin: 5px 5px 0 0;
             }
 
             // Subject
@@ -1096,7 +1098,7 @@ input[type=button] {
 #mail-index_mailPreviewContainer {
     position: absolute;
     border: 1px solid silver;
-    top: 75px;
+    top: 90px;
     bottom: 0;
     left: 3px;
     right: 0;
@@ -1145,18 +1147,8 @@ input[type=button] {
 #mail-index_previewAttachmentArea {
     //	background-color:#efefdf;
     .background-color-10-gray;
-    max-height: 5%;
-    max-width: 50%;
-    position: absolute;
-    overflow:scroll;
-    overflow-x:hidden;
-    right: 7px;
-    top: 45px;
     border-color: @gray-10;
     .border_normal;
-    opacity: 1;
-    -moz-opacity:1;
-    z-index: 100;
     //	filter: Alpha(opacity=100);
 
     img {width: 16px; height: 16px;}