Permalink
Browse files

Replacement for commit af276f2:

- add a more discrete toggle for all headers to message preview
- fix message display page issues (#1488590, #1488642)
  • Loading branch information...
1 parent c23aad2 commit dd525814ca2725e9b11692551d01a5bdf7931b04 @thomascube thomascube committed Oct 1, 2012
View
@@ -72,6 +72,11 @@ a.deletebutton,
height: 14px;
}
+#mailview-right #messageheader h2.subject {
+ position: relative;
+ left: -56px;
+}
+
#uploadform a.iconlink {
text-indent: 0px;
}
View
@@ -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;
/*
@@ -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 @@ <h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" />
<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 @@ <h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" />
</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 -->
@@ -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 -->
@@ -15,17 +15,19 @@ <h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" />
<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">
View
@@ -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) {

0 comments on commit dd52581

Please sign in to comment.