Unify appearence of message view (full and preview); limit number of recipients to be displayed in headers section

pull/32/merge
Thomas Bruederli 12 years ago
parent 7257040ca2
commit 10467e8a59

@ -67,16 +67,11 @@ a.deletebutton,
text-align: left; text-align: left;
} }
#messagepreviewheader .iconlink { #messageheader.previewheader .iconlink {
color: #fff; color: #fff;
height: 14px; height: 14px;
} }
#mailview-right #messageheader h2.subject {
position: relative;
left: -56px;
}
#uploadform a.iconlink { #uploadform a.iconlink {
text-indent: 0px; text-indent: 0px;
} }

@ -144,7 +144,7 @@ ul.toolbarmenu li a.active:hover,
} }
#messageheader, #partheader, #composeheaders { #messageheader, #partheader, #composeheaders {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
} }
#previewheaderstoggle { #previewheaderstoggle {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 333 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 409 B

@ -688,17 +688,20 @@ a.iconbutton.threadmode.selected {
position: relative; position: relative;
padding: 3px 0; padding: 3px 0;
background: #f9f9f9; background: #f9f9f9;
background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%); background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e9e9e9)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
background: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%); background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%); background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(top, #fff 0%, #e9e9e9 100%); background: linear-gradient(top, #fff 0%, #f0f0f0 100%);
border-bottom: 1px solid #dfdfdf;
} }
#mailview-right #messageheader { #mailview-right #messageheader {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
padding-left: 58px; padding-left: 78px;
border-bottom: 2px solid #e6e6e6; /* avoid headers eating up all the vertical space */
max-height: 50%;
overflow: auto;
} }
h2.subject { h2.subject {
@ -728,7 +731,8 @@ h3.subject {
padding: 2px 8px; padding: 2px 8px;
} }
.headers-table td.header { .headers-table td.header,
.ui-dialog-content.popup span.adr {
font-weight: bold; font-weight: bold;
} }
@ -736,12 +740,14 @@ h3.subject {
white-space: nowrap; white-space: nowrap;
} }
.headers-table td.header a { .headers-table td.header a,
.ui-dialog-content.popup span.adr a {
color: #666; color: #666;
text-decoration: none; text-decoration: none;
} }
.headers-table td.header a:hover { .headers-table td.header a:hover,
.ui-dialog-content.popup span.adr a:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -751,8 +757,15 @@ h3.subject {
font-weight: bold; font-weight: bold;
} }
.headers-table td.header span { .headers-table td.header span,
.ui-dialog-content.popup span.adr {
white-space: nowrap;
}
.headers-table td.header a.morelink {
color: #0069a6;
white-space: nowrap; white-space: nowrap;
font-weight: normal;
} }
.rcmaddcontact { .rcmaddcontact {
@ -859,24 +872,22 @@ div.hide-headers {
color: #333; color: #333;
} }
#messagepreviewheader #all-headers { #messageheader.previewheader #all-headers {
margin-left: 0; margin-left: 0;
} }
#messagepreviewheader { #messageheader.previewheader {
position: relative; position: relative;
height: auto; height: auto;
min-height: 52px; min-height: 52px;
margin: 0 8px 0 0; padding: 0 0 3px 72px;
padding: 0 0 0px 72px;
border-bottom: 2px solid #f0f0f0;
} }
#messagepreviewheader h3.subject { #messageheader.previewheader h3.subject {
padding: 8px 8px 2px 0; padding: 8px 8px 2px 0;
} }
#messagepreviewheader #contactphoto { #messageheader.previewheader #contactphoto {
display: block; display: block;
position: absolute; position: absolute;
top: 11px; top: 11px;
@ -888,7 +899,7 @@ div.hide-headers {
border-radius: 3px; border-radius: 3px;
} }
#messagepreviewheader #contactphoto img { #messageheader.previewheader #contactphoto img {
width: 32px; width: 32px;
height: auto; height: auto;
border-radius: 3px; border-radius: 3px;
@ -898,11 +909,12 @@ div.hide-headers {
display: block; display: block;
position: absolute; position: absolute;
top: 34px; top: 34px;
left: 10px; left: 30px;
width: 48px; width: 48px;
height: 48px; height: 48px;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e6e6e6;
background: url(images/contactpic_48px.png) center center no-repeat #fff; background: url(images/contactpic_48px.png) center center no-repeat #fff;
} }
@ -912,7 +924,6 @@ div.hide-headers {
border-radius: 4px; border-radius: 4px;
} }
#messagepreviewheader #countcontrols,
#messageheader #countcontrols { #messageheader #countcontrols {
position: absolute; position: absolute;
top: 8px; top: 8px;
@ -1147,6 +1158,7 @@ div.message-part blockquote blockquote blockquote {
-webkit-box-shadow: 0 2px 3px 0 #999; -webkit-box-shadow: 0 2px 3px 0 #999;
-moz-box-shadow: 0 2px 3px 0 #999; -moz-box-shadow: 0 2px 3px 0 #999;
box-shadow: 0 2px 3px 0 #999; box-shadow: 0 2px 3px 0 #999;
border-bottom: 0;
} }
#composebuttons { #composebuttons {

@ -134,7 +134,7 @@ ul.toolbarmenu li a.active:hover,
} }
#messageheader, #partheader, #composeheaders { #messageheader, #partheader, #composeheaders {
background-image: url(svggradient.php?c=ffffff;e9e9e9); background-image: url(svggradient.php?c=ffffff;f0f0f0);
} }
#previewheaderstoggle { #previewheaderstoggle {

@ -34,8 +34,10 @@
<div id="mailview-right" class="offset uibox"> <div id="mailview-right" class="offset uibox">
<div id="messageheader"> <div id="messageheader">
<span id="previewheaderstoggle"></span>
<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2> <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="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
<roundcube:object name="messageFullHeaders" id="full-headers" /> <roundcube:object name="messageFullHeaders" id="full-headers" />
<!-- record navigation --> <!-- record navigation -->

@ -6,10 +6,10 @@
</head> </head>
<body class="iframe fullheight"> <body class="iframe fullheight">
<div id="messagepreviewheader"> <div id="messageheader" class="previewheader">
<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3> <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" title="<roundcube:label name='togglemoreheaders' />"></span></a>
<div id="contactphoto"><roundcube:object name="contactphoto" /></div> <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
<table class="headers-table" id="preview-shortheaders"><tbody><tr> <table class="headers-table" id="preview-shortheaders"><tbody><tr>
@ -24,7 +24,7 @@
<td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></td> <td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></td>
</tr></tbody></table> </tr></tbody></table>
<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" /> <roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" max="10" exclude="subject,replyto" />
<roundcube:object name="messageFullHeaders" id="full-headers" /> <roundcube:object name="messageFullHeaders" id="full-headers" />

Loading…
Cancel
Save