Add full headers view in message preview window (#1488538)

Fix message display page issues - unified with message preview (#1488590, #1488642)

12 files changed, 120 insertions, 89 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 8e9dcb3c7..3a14694c9 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,6 +1,8 @@
 CHANGELOG Roundcube Webmail
 ===========================
 
+- Add full headers view in message preview window (#1488538)
+- Fix message display page issues - unified with message preview (#1488590, #1488642)
 - Fix identity selection on reply (#1488101)
 - Add option to enable HTML editor on forwarding (#1488517)
 - Add option to not include original message on reply, rename option top_posting to reply_mode (#1485149)
diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc
index 7f0b4db5b..6f451e14f 100644
--- a/program/steps/mail/func.inc
+++ b/program/steps/mail/func.inc
@@ -1053,12 +1053,17 @@ function rcmail_message_full_headers($attrib, $headers=NULL)
   global $OUTPUT;
 
   $html = html::div(array('id' => "all-headers", 'class' => "all", 'style' => 'display:none'), html::div(array('id' => 'headers-source'), ''));
-  $html .= html::div(array('class' => "more-headers show-headers", 'onclick' => "return ".JS_OBJECT_NAME.".command('show-headers','',this)"), '');
+
+  if (!get_boolean($attrib['no-switch'])) {
+    $html .= html::div(array('class' => "more-headers show-headers", 'onclick' => "return ".JS_OBJECT_NAME.".command('show-headers','',this)"), '');
+  }
+
+  unset($attrib['no-switch']);
 
   $OUTPUT->add_gui_object('all_headers_row', 'all-headers');
   $OUTPUT->add_gui_object('all_headers_box', 'headers-source');
 
-  return html::div($attrib, $html);
+  return count($attrib) > 1 ? html::div($attrib, $html) : $html;
 }
 
 
diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css
index 024c35bb2..935a504fe 100644
--- a/skins/larry/ie7hacks.css
+++ b/skins/larry/ie7hacks.css
@@ -29,7 +29,7 @@ a.deletebutton,
 .boxfooter .listbutton .inner,
 .attachmentslist li a.delete,
 .attachmentslist li a.cancelupload,
-#messagepreviewheader .iconlink {
+#messageheader .iconlink {
 	/* workaround for text-indent which also offsets the background image */
 	text-indent: 0;
 	font-size: 0;
@@ -45,7 +45,7 @@ a.deletebutton,
 
 .pagenav a.button,
 .pagenav a.button span.inner,
-#messagepreviewheader .iconlink,
+#messageheader .iconlink,
 #uploadform a.iconlink {
 	display: inline;
 }
@@ -67,7 +67,7 @@ a.deletebutton,
 	text-align: left;
 }
 
-#messagepreviewheader .iconlink {
+#messageheader .iconlink {
 	color: #fff;
 	height: 14px;
 }
diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css
index 288202111..bba93dc33 100644
--- a/skins/larry/iehacks.css
+++ b/skins/larry/iehacks.css
@@ -143,7 +143,7 @@ ul.toolbarmenu li a.active:hover,
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d76', endColorstr='#004558', GradientType=0);
 }
 
-#messageheader, #partheader, #composeheaders {
+#partheader, #composeheaders {
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0);
 }
 
diff --git a/skins/larry/images/contactpic_32px.png b/skins/larry/images/contactpic_32px.png
index 276f1974f..25a81418d 100644
--- a/skins/larry/images/contactpic_32px.png
+++ b/skins/larry/images/contactpic_32px.png
diff --git a/skins/larry/images/contactpic_48px.png b/skins/larry/images/contactpic_48px.png
new file mode 100644
index 000000000..9cd3bceaf
--- /dev/null
+++ b/skins/larry/images/contactpic_48px.png
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 4fff24307..d2ff11808 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -38,10 +38,6 @@
 	bottom: 28px;
 }
 
-#mailview-top.fullheight {
-	border-radius: 4px 4px 0 0;
-}
-
 #mailview-bottom {
 	position: absolute;
 	left: 0;
@@ -50,6 +46,10 @@
 	height: 26px;
 }
 
+#mailview-top.fullheight {
+	border-radius: 4px 4px 0 0;
+}
+
 #folderlist-header {
 	width: 100%;
 	height: 12px;
@@ -680,15 +680,14 @@ a.iconbutton.threadmode.selected {
 
 #messagecontent {
 	position: absolute;
-	top: 140px;
+	top: 0;
 	left: 0;
 	width: 100%;
-	bottom: 0;
+	bottom: 28px;
 	overflow: auto;
 	border-radius: 4px 4px 0 0;
 }
 
-#messageheader,
 #partheader,
 #composeheaders {
 	position: relative;
@@ -712,7 +711,7 @@ h2.subject {
 
 h3.subject {
 	font-size: 14px;
-	margin: 0 8em 0 0;
+	margin: 0 13em 0 0;
 	padding: 8px 8px 4px 8px;
 	white-space: nowrap;
 	overflow: hidden;
@@ -787,6 +786,7 @@ h3.subject {
 	background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
 	background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
 	border-right: 1px solid #dfdfdf;
+	border-radius: 3px 0 0 0; /* for Opera */
 }
 
 #previewheaderstoggle .iconlink {
@@ -801,28 +801,27 @@ h3.subject {
 
 #previewheaderstoggle.remove .iconlink {
 	top: auto;
-	bottom: 5px;
+	bottom: 15px;
 	background-position: -5px -242px;
 }
 
-div.more-headers {
-	cursor: pointer;
-	height: 10px;
-	background: url(images/buttons.png) center -1619px no-repeat;
+#previewheaderstoggle .iconlink.allheaders {
+	display: none;
 }
 
-div.hide-headers {
-	background-position: center -1629px;
+#previewheaderstoggle.remove .iconlink.allheaders {
+	top: auto;
+	bottom: 2px;
+	display: inline-block;
+	background-position: -27px -242px;
 }
 
 #all-headers {
 	position: relative;
-	margin: 0 10px;
+	margin: 2px 0;
 	padding: 0;
 	height: 180px;
-	border: 1px solid #bbb;
-	border-radius: 4px;
-	background: #fff;
+	background-color: #f0f0f0;
 }
 
 #headers-source {
@@ -832,25 +831,30 @@ div.hide-headers {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 2px 5px;
+	padding: 0;
 	overflow: auto;
 	text-align: left;
-	color: #333;
+	color: #666;
 }
 
-#messagepreviewheader {
+#messageheader {
 	position: relative;
 	height: auto;
 	margin: 0 8px 0 0;
-	padding: 0 0 6px 72px;
+	padding: 0 0 0 72px;
 	border-bottom: 2px solid #f0f0f0;
 }
 
-#messagepreviewheader h3.subject {
+#messagecontent #messageheader {
+	padding: 0 0 0 90px;
+	min-height: 68px;
+}
+
+#messageheader h3.subject {
 	padding: 8px 8px 2px 0;
 }
 
-#messagepreviewheader #contactphoto {
+#messageheader #contactphoto {
 	display: block;
 	position: absolute;
 	top: 11px;
@@ -862,45 +866,35 @@ div.hide-headers {
 	border-radius: 3px;
 }
 
-#messagepreviewheader #contactphoto img {
+#messageheader #contactphoto img {
 	width: 32px;
 	height: auto;
 	border-radius: 3px;
 }
 
-#messageheader #contactphoto {
-	display: block;
-	position: absolute;
-	top: 40px;
-	right: 10px;
+#messagecontent #messageheader #contactphoto {
+	top: 11px;
+	left: 31px;
 	width: 48px;
 	height: 48px;
-	overflow: hidden;
+	background: url(images/contactpic_48px.png) center center no-repeat #fff;
 	border-radius: 4px;
 }
 
-#messageheader #contactphoto img {
+#messagecontent #messageheader #contactphoto img {
 	width: 48px;
 	height: auto;
 	border-radius: 4px;
 }
 
-#messagepreviewheader #countcontrols,
 #messageheader #countcontrols {
 	position: absolute;
 	top: 8px;
-	right: 8px;
-	width: 20em;
+	right: 0;
 	text-align: right;
 	white-space: nowrap;
 }
 
-#messageheader .pagenav .countdisplay {
-	min-width: 0;
-	padding-right: 0.5em;
-	white-space: nowrap;
-}
-
 #messagecontent .leftcol,
 #messagepreview .leftcol {
 	margin-right: 252px;
diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css
index 143fb375f..4f1dd8a05 100644
--- a/skins/larry/svggradients.css
+++ b/skins/larry/svggradients.css
@@ -133,7 +133,7 @@ ul.toolbarmenu li a.active:hover,
 	background-image: url(svggradient.php?c=005d76;004558);
 }
 
-#messageheader, #partheader, #composeheaders {
+#partheader, #composeheaders {
 	background-image: url(svggradient.php?c=ffffff;e9e9e9);
 }
 
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 1becd711a..89b7bd808 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -24,20 +24,38 @@
 
 <!-- folders list -->
 <div id="mailboxcontainer" class="uibox listbox">
-<div class="scroller">
-<roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" />
-</div>
+    <div class="scroller">
+        <roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" />
+    </div>
 </div>
 
-</div>
+</div><!-- end mailview-left -->
+
+<div id="mailview-right" class="uibox" style="top: 42px">
+
+<div id="messagecontent">
+
+<div id="messageheader">
+<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
+
+<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span><span id="headerstoggleall" class="iconlink allheaders"></span></a>
 
-<div id="mailview-right">
+<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 
-<div id="mailview-top">
-<div id="messageheader" class="uibox">
-<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
-<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" />
-<roundcube:object name="messageFullHeaders" id="full-headers" />
+<table class="headers-table" id="preview-shortheaders"><tbody><tr>
+<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
+	<td class="header-title"><roundcube:label name="to" /></td>
+	<td class="header from"><roundcube:object name="messageHeaders" valueOf="to" addicon="/images/addcontact.png" /></td>
+<roundcube:else />
+	<td class="header-title"><roundcube:label name="from" /></td>
+	<td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
+<roundcube:endif />
+	<td class="header-title"><roundcube:label name="date" /></td>
+	<td class="header from"><roundcube:object name="messageHeaders" valueOf="date" /></td>
+</tr></tbody></table>
+
+<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" />
+<roundcube:object name="messageFullHeaders" no-switch="true" />
 
 <!-- record navigation -->
 <div id="countcontrols" class="pagenav">
@@ -46,24 +64,21 @@
 	<roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;gt;" />
 </div>
 
-<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
-</div>
+</div><!-- end messageheader -->
 
-<div id="messagecontent" class="uibox">
-<div class="rightcol">
-<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
-</div>
-<div class="leftcol">
-<roundcube:object name="messageObjects" id="message-objects" />
-<roundcube:object name="messageBody" id="messagebody" />
-</div>
+<div id="messagepreview">
+    <div class="rightcol">
+        <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
+    </div>
+    <div class="leftcol">
+        <roundcube:object name="messageObjects" id="message-objects" />
+        <roundcube:object name="messageBody" id="messagebody" />
+    </div>
 </div>
 
-</div><!-- end mailview-top -->
+</div><!-- end messagecontent -->
 
-<div id="mailview-bottom" class="uibox">
 <roundcube:object name="message" id="message" class="statusbar" />
-</div>
 
 </div><!-- end mailview-right -->
 
diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html
index 70181f174..2f5243200 100644
--- a/skins/larry/templates/messageerror.html
+++ b/skins/larry/templates/messageerror.html
@@ -27,8 +27,6 @@
 
 </div>
 
-<div id="mailview-right">
-
 <!-- toolbar -->
 <div id="messagetoolbar" class="fullwidth">
 	<div id="mailtoolbar" class="toolbar">
@@ -36,11 +34,11 @@
 	</div>
 </div>
 
-<div id="mailview-top" class="uibox watermark"></div>
+<div id="mailview-right" class="uibox" style="top: 42px">
 
-<div id="mailview-bottom" class="uibox">
-	<roundcube:object name="message" id="message" class="statusbar" />
-</div>
+<div id="messagecontent" class="watermark"></div>
+
+<roundcube:object name="message" id="message" class="statusbar" />
 
 </div><!-- end mailview-right -->
 
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index b53683ec1..74c414b0d 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -6,10 +6,10 @@
 </head>
 <body class="iframe fullheight">
 
-<div id="messagepreviewheader">
+<div id="messageheader">
 <h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
 
-<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span></a>
+<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span><span id="headerstoggleall" class="iconlink allheaders"></a>
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 
 <table class="headers-table" id="preview-shortheaders"><tbody><tr>
@@ -25,6 +25,7 @@
 </tr></tbody></table>
 
 <roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" />
+<roundcube:object name="messageFullHeaders" no-switch="true" />
 
 <!-- record navigation -->
 <div id="countcontrols" class="pagenav">
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index ca1680759..176c93b7d 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -74,9 +74,8 @@ function rcube_mail_ui()
 
       if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
         layout_messageview();
-        rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); });
-        rcmail.addEventListener('afterhide-headers', function() { layout_messageview(); });
-        $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
+        $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false; });
+        $('#headerstoggleall').click(function(e){ toggle_all_headers(this); return false; });
       }
       else if (rcmail.env.action == 'compose') {
         rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); });
@@ -315,7 +314,6 @@ function rcube_mail_ui()
    */
   function layout_messageview()
   {
-    $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px');
     $('#message-objects div a').addClass('button');
 
     if (!$('#attachment-list li').length) {
@@ -508,13 +506,31 @@ function rcube_mail_ui()
   {
     $('#preview-shortheaders').toggle();
     var full = $('#preview-allheaders').toggle(),
-      button = $('a#previewheaderstoggle');
+      button = $('#previewheaderstoggle');
+
+    if (!$('#headerstoggleall').length)
+      $('#all-headers').toggle();
 
     // add toggle button to full headers table
-    if (full.is(':visible'))
-      button.attr('href', '#hide').removeClass('add').addClass('remove')
-    else
-      button.attr('href', '#details').removeClass('remove').addClass('add')
+    if (full.is(':visible')) {
+      button.attr('href', '#hide').removeClass('add').addClass('remove');
+    }
+    else {
+      button.attr('href', '#details').removeClass('remove').addClass('add');
+    }
+  }
+
+
+  /**
+   * Show/hide all message headers
+   */
+  function toggle_all_headers(button)
+  {
+    rcmail.command('show-headers', '', button);
+    $(button).remove();
+    $('#previewheaderstoggle span').css({bottom: '5px'});
+
+    return false;
   }