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

This reverts commit af276f21e5364eb65a56b64c3455bc284ff1e2f2.

Conflicts:

	CHANGELOG
	skins/larry/mail.css

10 files changed, 87 insertions, 112 deletions

diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css
index 935a504fe..024c35bb2 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,
-#messageheader .iconlink {
+#messagepreviewheader .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,
-#messageheader .iconlink,
+#messagepreviewheader .iconlink,
 #uploadform a.iconlink {
 	display: inline;
 }
@@ -67,7 +67,7 @@ a.deletebutton,
 	text-align: left;
 }
 
-#messageheader .iconlink {
+#messagepreviewheader .iconlink {
 	color: #fff;
 	height: 14px;
 }
diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css
index bba93dc33..288202111 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);
 }
 
-#partheader, #composeheaders {
+#messageheader, #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 25a81418d..276f1974f 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
deleted file mode 100644
index 9cd3bceaf..000000000
--- a/skins/larry/images/contactpic_48px.png
+++ /dev/null
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 04f56e134..0ee43aef1 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -38,6 +38,10 @@
 	bottom: 28px;
 }
 
+#mailview-top.fullheight {
+	border-radius: 4px 4px 0 0;
+}
+
 #mailview-bottom {
 	position: absolute;
 	left: 0;
@@ -46,10 +50,6 @@
 	height: 26px;
 }
 
-#mailview-top.fullheight {
-	border-radius: 4px 4px 0 0;
-}
-
 #folderlist-header {
 	width: 100%;
 	height: 12px;
@@ -675,14 +675,15 @@ a.iconbutton.threadmode.selected {
 
 #messagecontent {
 	position: absolute;
-	top: 0;
+	top: 140px;
 	left: 0;
 	width: 100%;
-	bottom: 28px;
+	bottom: 0;
 	overflow: auto;
 	border-radius: 4px 4px 0 0;
 }
 
+#messageheader,
 #partheader,
 #composeheaders {
 	position: relative;
@@ -706,7 +707,7 @@ h2.subject {
 
 h3.subject {
 	font-size: 14px;
-	margin: 0 13em 0 0;
+	margin: 0 8em 0 0;
 	padding: 8px 8px 4px 8px;
 	white-space: nowrap;
 	overflow: hidden;
@@ -781,7 +782,6 @@ 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 {
@@ -796,29 +796,28 @@ h3.subject {
 
 #previewheaderstoggle.remove .iconlink {
 	top: auto;
-	bottom: 15px;
+	bottom: 5px;
 	background-position: -5px -242px;
 }
 
-#previewheaderstoggle .iconlink.allheaders {
-	display: none;
+div.more-headers {
+	cursor: pointer;
+	height: 10px;
+	background: url(images/buttons.png) center -1619px no-repeat;
 }
 
-#previewheaderstoggle.remove .iconlink.allheaders {
-	top: auto;
-	bottom: 2px;
-	display: inline-block;
-	background-position: -27px -242px;
+div.hide-headers {
+	background-position: center -1629px;
 }
 
 #all-headers {
 	position: relative;
-	margin: 2px 0;
+	margin: 0 10px;
 	padding: 0;
 	height: 180px;
-	background-color: #f0f0f0;
-	overflow: hidden;
+	border: 1px solid #bbb;
 	border-radius: 4px;
+	background: #fff;
 }
 
 #headers-source {
@@ -828,31 +827,26 @@ h3.subject {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 2px;
+	padding: 2px 5px;
 	overflow: auto;
 	text-align: left;
-	color: #666;
+	color: #333;
 }
 
-#messageheader {
+#messagepreviewheader {
 	position: relative;
 	height: auto;
 	min-height: 52px;
 	margin: 0 8px 0 0;
-	padding: 0 0 0 72px;
+	padding: 0 0 6px 72px;
 	border-bottom: 2px solid #f0f0f0;
 }
 
-#messagecontent #messageheader {
-	padding: 0 0 0 90px;
-	min-height: 68px;
-}
-
-#messageheader h3.subject {
+#messagepreviewheader h3.subject {
 	padding: 8px 8px 2px 0;
 }
 
-#messageheader #contactphoto {
+#messagepreviewheader #contactphoto {
 	display: block;
 	position: absolute;
 	top: 11px;
@@ -864,35 +858,46 @@ h3.subject {
 	border-radius: 3px;
 }
 
-#messageheader #contactphoto img {
+#messagepreviewheader #contactphoto img {
 	width: 32px;
 	height: auto;
 	border-radius: 3px;
 }
 
-#messagecontent #messageheader #contactphoto {
-	top: 11px;
-	left: 31px;
+#messageheader #contactphoto {
+	display: block;
+	position: absolute;
+	top: 40px;
+	right: 10px;
 	width: 48px;
 	height: 48px;
-	background: url(images/contactpic_48px.png) center center no-repeat #fff;
+	overflow: hidden;
 	border-radius: 4px;
 }
 
-#messagecontent #messageheader #contactphoto img {
+#messageheader #contactphoto img {
 	width: 48px;
 	height: auto;
 	border-radius: 4px;
 }
 
+#messagepreviewheader #countcontrols,
 #messageheader #countcontrols {
 	position: absolute;
 	top: 8px;
-	right: 0;
+	right: 8px;
+	width: 20em;
 	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;
 	overflow-x: auto;
diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css
index 4f1dd8a05..143fb375f 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);
 }
 
-#partheader, #composeheaders {
+#messageheader, #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 89b7bd808..1becd711a 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -24,38 +24,20 @@
 
 <!-- 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><!-- 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>
 
-<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
+<div id="mailview-right">
 
-<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" />
+<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" />
 
 <!-- record navigation -->
 <div id="countcontrols" class="pagenav">
@@ -64,21 +46,24 @@
 	<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><!-- end messageheader -->
+<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
+</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 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>
 
-</div><!-- end messagecontent -->
+</div><!-- end mailview-top -->
 
+<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 2f5243200..70181f174 100644
--- a/skins/larry/templates/messageerror.html
+++ b/skins/larry/templates/messageerror.html
@@ -27,6 +27,8 @@
 
 </div>
 
+<div id="mailview-right">
+
 <!-- toolbar -->
 <div id="messagetoolbar" class="fullwidth">
 	<div id="mailtoolbar" class="toolbar">
@@ -34,11 +36,11 @@
 	</div>
 </div>
 
-<div id="mailview-right" class="uibox" style="top: 42px">
-
-<div id="messagecontent" class="watermark"></div>
+<div id="mailview-top" class="uibox watermark"></div>
 
-<roundcube:object name="message" id="message" class="statusbar" />
+<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/messagepreview.html b/skins/larry/templates/messagepreview.html
index 74c414b0d..b53683ec1 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -6,10 +6,10 @@
 </head>
 <body class="iframe fullheight">
 
-<div id="messageheader">
+<div id="messagepreviewheader">
 <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"></a>
+<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span></a>
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 
 <table class="headers-table" id="preview-shortheaders"><tbody><tr>
@@ -25,7 +25,6 @@
 </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 c221b8681..c01a17cd2 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -74,8 +74,9 @@ function rcube_mail_ui()
 
       if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
         layout_messageview();
-        $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false; });
-        $('#headerstoggleall').click(function(e){ toggle_all_headers(this); return false; });
+        rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); });
+        rcmail.addEventListener('afterhide-headers', function() { layout_messageview(); });
+        $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
       }
       else if (rcmail.env.action == 'compose') {
         rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); });
@@ -320,6 +321,7 @@ 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) {
@@ -512,31 +514,13 @@ function rcube_mail_ui()
   {
     $('#preview-shortheaders').toggle();
     var full = $('#preview-allheaders').toggle(),
-      button = $('#previewheaderstoggle');
-
-    if (!$('#headerstoggleall').length)
-      $('#all-headers').toggle();
+      button = $('a#previewheaderstoggle');
 
     // 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');
-    }
-  }
-
-
-  /**
-   * Show/hide all message headers
-   */
-  function toggle_all_headers(button)
-  {
-    rcmail.command('show-headers', '', button);
-    $(button).remove();
-    $('#previewheaderstoggle span').css({bottom: '5px'});
-
-    return false;
+    if (full.is(':visible'))
+      button.attr('href', '#hide').removeClass('add').addClass('remove')
+    else
+      button.attr('href', '#details').removeClass('remove').addClass('add')
   }