Work in progress of mail external image handler:

- Fix styling
- Add handler for mobile and display

api/src/Html/HtmLawed.php

@@ -399,8 +399,7 @@ function hl_email_tag_transform($element, $attribute_array=0)
 			}
 			if (!preg_match('/^cid:.*/',$attribute_array['src']))
 			{
-				$url = preg_replace('/^(http|https):\/\//','',$attribute_array['src']);
+				$url = explode('/', preg_replace('/^(http|https):\/\//','',$attribute_array['src']));
-				$url = explode('/', $url);
 				if (!in_array($url[0], $GLOBALS['egw_info']['user']['preferences']['mail']['allowExternalIMGs']))
 				{
 					//the own webserver url is not external, so it should be allowed

mail/js/app.js

@@ -198,7 +198,7 @@ app.classes.mail = AppJS.extend(
 					// encrypt body if mailvelope is available
 					self.mailvelopeAvailable(self.mailvelopeDisplay);
 					self.mail_prepare_print();
-
+					self.resolveExternalImages(this.contentWindow.document);
 					// Trigger print command if the mail oppend for printing porpuse
 					// load event fires twice in IE and the first time the content is not ready
 					// Check if the iframe content is loaded then trigger the print command
@@ -1036,29 +1036,8 @@ app.classes.mail = AppJS.extend(
 		if (external_images.length > 0 && jQuery(_node).find('.mail_externalImagesMsg').length == 0)
 		{
 			var container = jQuery(document.createElement('div'))
-					.addClass('mail_externalImagesMsg')
+					.click(function(){jQuery(this).remove();})
-					.css({
+					.addClass('mail_externalImagesMsg');
-						"display": 'block',
-						"position": 'fixed',
-						"height": '50px',
-						"width": '100%',
-						"top": '0',
-						"left": '0',
-						"background":'#ffe5a5',
-						"border-top": '1px solid #8f8b8b',
-						"box-shadow": '0px 1px 13px 2px #8f8b8b'
-					});
-			var button_style = {
-				"float": "right",
-				"margin": "15px",
-				"display": "inline-block",
-				"background-color": "transparent",
-				"border": "none",
-				"font-weight": "bold",
-				"color": "#30558c",
-				"cursor": "pointer",
-				"text-decoration": "underline"
-			};
 			var getUrlParts = function (_rawUrl) {
 				var u = _rawUrl.split('[blocked external image:');
 				u = u[1].replace(']','');
@@ -1073,10 +1052,27 @@ app.classes.mail = AppJS.extend(
 			}
 
 			var host = getUrlParts(external_images[0].alt);
-			var showImages = function (_images)
+			var showImages = function (_images, _save)
 			{
+				var save = _save || false;
 				_images.each(function(i, node) {
 					var parts = getUrlParts (node.alt);
+					if (save)
+					{
+						if (pref && pref.length)
+						{
+							if (pref.indexOf(parts.domain) == -1)
+							{
+								pref.push(parts.domain);
+								egw.set_preference( 'mail', 'allowExternalIMGs', pref);
+							}
+						}
+						else
+						{
+							pref = [parts.domain];
+							egw.set_preference( 'mail', 'allowExternalIMGs', pref);
+						}
+					}
 					node.src = parts.url;
 				});
 			}
@@ -1088,56 +1084,24 @@ app.classes.mail = AppJS.extend(
 				return;
 			}
 
-			var text = jQuery(document.createElement('p'))
+			jQuery(document.createElement('p'))
-					.css({
-						"display": 'inline-block',
-						"width":'60%',
-						"font-size":'11pt',
-						"margin": '15px',
-						"color": '#1f1f1f'
-					})
 					.text(egw.lang('In order to protect your privacy all external sources within this email are blocked.'))
 					.appendTo(container);
-			var closeBtn = jQuery(document.createElement('button'))
+			jQuery(document.createElement('button'))
-					.css ({
+					.addClass ('closeBtn')
-						"float":'right',
-						"background-image":'url(pixelegg/images/close.png)',
-						"height": '50px',
-						"width": '50px',
-						"background-repeat": 'no-repeat',
-						"background-position": 'center',
-						"background-size": '22px',
-						"background-color": 'transparent',
-						"border": 'none',
-						"cursor": 'pointer',
-						"display": 'inline-block'
-					})
 					.click (function (){
 						container.remove();
 					})
 					.appendTo(container);
-			var alwaysBtn = jQuery(document.createElement('button'))
+			jQuery(document.createElement('button'))
-					.css(button_style)
 					.text(egw.lang('Allow'))
 					.attr ('title', egw.lang('Always allow external sources from %1', host.domain))
 					.click (function (){
-
+						showImages(external_images, true);
-
-						if (pref && pref.length)
-						{
-							pref.push(host.domain);
-						}
-						else
-						{
-							pref = [host.domain];
-						}
-						egw.set_preference( 'mail', 'allowExternalIMGs', pref);
-						showImages(external_images);
 						container.remove();
 					})
 					.appendTo(container);
-			var alwaysBtn = jQuery(document.createElement('button'))
+			jQuery(document.createElement('button'))
-					.css(button_style)
 					.text(egw.lang('Show'))
 					.attr ('title', egw.lang('Show them this time only'))
 					.click(function(){
@@ -1145,8 +1109,7 @@ app.classes.mail = AppJS.extend(
 						container.remove();
 					})
 					.appendTo(container);
-			container.appendTo(_node.body);
+			container.appendTo(_node.body? _node.body:_node);
-
 		}
 	},
 
@@ -5527,6 +5490,7 @@ app.classes.mail = AppJS.extend(
 				}
 				else
 				{
+					self.resolveExternalImages(this.contentWindow.document)
 					// Use prepare print function to copy iframe content into div
 					// as we don't want to show content in iframe (scrolling problem).
 					self.mail_prepare_print(jQuery(this));

mail/templates/default/preview.css

@@ -63,3 +63,57 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
 #divAppboxHeader {
 	display: none;
 }
+
+.mail_externalImagesMsg {
+	display: block;
+    position: fixed;
+    height: 30px;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+    background: rgb(255, 229, 165);
+    border-top: 1px solid rgb(143, 139, 139);
+    box-shadow: rgb(143, 139, 139) 0px 1px 13px 2px;
+}
+
+.mail_externalImagesMsg button {
+	float: right;
+    margin: 7px;
+    display: inline-block;
+    background-color: transparent;
+    border: none;
+    font-weight: bold;
+    color: rgb(48, 85, 140);
+    cursor: pointer;
+    text-decoration: underline;
+}
+.mail_externalImagesMsg button:hover {
+	color: rgb(20, 48, 88);
+}
+
+.mail_externalImagesMsg p {
+	display: inline-block;
+    width: 60%;
+    font-size: 11pt;
+    margin: 7px 7px 7px 10px;
+    color: rgb(31, 31, 31);
+}
+
+.mail_externalImagesMsg button.closeBtn {
+	float: right;
+    background-image: url(../../../pixelegg/images/close.png);
+    height: 30px;
+    width: 50px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 22px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+	margin: 0;
+	opacity:0.6;
+}
+.mail_externalImagesMsg button.closeBtn:hover {
+	opacity: 1;
+}