From dd525814ca2725e9b11692551d01a5bdf7931b04 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Mon, 1 Oct 2012 21:39:30 +0200
Subject: Replacement for commit af276f21e536: - add a more discrete toggle for
 all headers to message preview - fix message display page issues (#1488590,
 #1488642)

---
 skins/larry/ie7hacks.css                  |  5 +++
 skins/larry/mail.css                      | 59 +++++++++++++++++++++++++------
 skins/larry/templates/message.html        | 11 ++----
 skins/larry/templates/messageerror.html   | 22 ++++++------
 skins/larry/templates/messagepreview.html |  6 ++--
 skins/larry/ui.js                         |  3 +-
 6 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css
index 024c35bb2..f15a615ef 100644
--- a/skins/larry/ie7hacks.css
+++ b/skins/larry/ie7hacks.css
@@ -72,6 +72,11 @@ a.deletebutton,
 	height: 14px;
 }
 
+#mailview-right #messageheader h2.subject {
+	position: relative;
+	left: -56px;
+}
+
 #uploadform a.iconlink {
 	text-indent: 0px;
 }
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 0ee43aef1..3fd2fcc65 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -30,6 +30,11 @@
 	z-index: 3;
 }
 
+#mailview-right.offset {
+	top: 42px;
+	margin-top: 0;
+}
+
 #mailview-top {
 	position: absolute;
 	top: 42px;
@@ -675,12 +680,11 @@ a.iconbutton.threadmode.selected {
 
 #messagecontent {
 	position: absolute;
-	top: 140px;
+	top: 110px;
 	left: 0;
 	width: 100%;
-	bottom: 0;
+	bottom: 27px;
 	overflow: auto;
-	border-radius: 4px 4px 0 0;
 }
 
 #messageheader,
@@ -696,6 +700,12 @@ a.iconbutton.threadmode.selected {
 	background: linear-gradient(top, #fff 0%, #e9e9e9 100%);
 }
 
+#mailview-right #messageheader {
+	border-radius: 4px 4px 0 0;
+	padding-left: 58px;
+	border-bottom: 2px solid #e6e6e6;
+}
+
 h2.subject {
 	font-size: 15px;
 	margin: 0 15em 0 0;
@@ -705,6 +715,10 @@ h2.subject {
 	text-overflow: ellipsis;
 }
 
+#mailview-right #messageheader h2.subject {
+	margin-left: -56px;
+}
+
 h3.subject {
 	font-size: 14px;
 	margin: 0 8em 0 0;
@@ -723,6 +737,10 @@ h3.subject {
 	font-weight: bold;
 }
 
+.headers-table td.header-title {
+	white-space: nowrap;
+}
+
 .headers-table td.header a {
 	color: #666;
 	text-decoration: none;
@@ -782,6 +800,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 {
@@ -800,9 +819,17 @@ h3.subject {
 	background-position: -5px -242px;
 }
 
+#full-headers {
+	position: relative;
+}
+
 div.more-headers {
-	cursor: pointer;
+	position: absolute;
+	top: -12px;
+	right: 10px;
+	width: 12px;
 	height: 10px;
+	cursor: pointer;
 	background: url(images/buttons.png) center -1619px no-repeat;
 }
 
@@ -812,12 +839,16 @@ div.hide-headers {
 
 #all-headers {
 	position: relative;
-	margin: 0 10px;
+	margin: 4px 10px;
 	padding: 0;
 	height: 180px;
-	border: 1px solid #bbb;
+	border: 1px solid #ccc;
 	border-radius: 4px;
-	background: #fff;
+	background: #fdfdfd;
+	-moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
+	-webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
+	-o-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
+	box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
 }
 
 #headers-source {
@@ -827,18 +858,22 @@ div.hide-headers {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 2px 5px;
+	padding: 3px 6px;
 	overflow: auto;
 	text-align: left;
 	color: #333;
 }
 
+#messagepreviewheader #all-headers {
+	margin-left: 0;
+}
+
 #messagepreviewheader {
 	position: relative;
 	height: auto;
 	min-height: 52px;
 	margin: 0 8px 0 0;
-	padding: 0 0 6px 72px;
+	padding: 0 0 0px 72px;
 	border-bottom: 2px solid #f0f0f0;
 }
 
@@ -867,12 +902,13 @@ div.hide-headers {
 #messageheader #contactphoto {
 	display: block;
 	position: absolute;
-	top: 40px;
-	right: 10px;
+	top: 34px;
+	left: 10px;
 	width: 48px;
 	height: 48px;
 	overflow: hidden;
 	border-radius: 4px;
+	background: url(images/contactpic_48px.png) center center no-repeat #fff;
 }
 
 #messageheader #contactphoto img {
@@ -903,6 +939,7 @@ div.hide-headers {
 	overflow-x: auto;
 }
 
+#messagecontent .rightcol,
 #messagepreview .rightcol {
 	float: right;
 /*
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 1becd711a..50ac84473 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -31,10 +31,9 @@
 
 </div>
 
-<div id="mailview-right">
+<div id="mailview-right" class="offset uibox">
 
-<div id="mailview-top">
-<div id="messageheader" class="uibox">
+<div id="messageheader">
 <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" />
@@ -49,7 +48,7 @@
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 </div>
 
-<div id="messagecontent" class="uibox">
+<div id="messagecontent">
 <div class="rightcol">
 <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
 </div>
@@ -59,11 +58,7 @@
 </div>
 </div>
 
-</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 70181f174..3c3c9acdb 100644
--- a/skins/larry/templates/messageerror.html
+++ b/skins/larry/templates/messageerror.html
@@ -16,6 +16,13 @@
 
 <div id="mainscreen">
 
+<!-- toolbar -->
+<div id="messagetoolbar" class="fullwidth">
+	<div id="mailtoolbar" class="toolbar">
+		<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
+	</div>
+</div>
+
 <div id="mailview-left">
 
 <!-- folders list -->
@@ -27,20 +34,11 @@
 
 </div>
 
-<div id="mailview-right">
+<div id="mailview-right" class="offset uibox">
 
-<!-- toolbar -->
-<div id="messagetoolbar" class="fullwidth">
-	<div id="mailtoolbar" class="toolbar">
-		<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
-	</div>
-</div>
-
-<div id="mailview-top" class="uibox watermark"></div>
+<div id="messagecontent" class="watermark"></div>
 
-<div id="mailview-bottom" class="uibox">
-	<roundcube:object name="message" id="message" class="statusbar" />
-</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..792c1bd63 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -15,17 +15,19 @@
 <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>
+	<td class="header from"><roundcube:object name="messageHeaders" valueOf="to" max="3" 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>
+	<td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></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" id="full-headers" />
+
 <!-- record navigation -->
 <div id="countcontrols" class="pagenav">
 <roundcube:if condition="env:mailbox != config:drafts_mbox">
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index c01a17cd2..9b5d8309c 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -73,7 +73,6 @@ 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 });
@@ -321,7 +320,7 @@ function rcube_mail_ui()
    */
   function layout_messageview()
   {
-    $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px');
+    $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 1) + 'px');
     $('#message-objects div a').addClass('button');
 
     if (!$('#attachment-list li').length) {
-- 
cgit v1.2.3