|
I have been playing with this all day (although I admittidly know
NOTHING about CSS, but was able to figure enough out just playing with
the file). I discovered a few things throughout this, about interface
considerations. There are 3 ways to handle the email and header display. The current way, which I think we all agree is less than ideal. Another way that is easy enough to implement with CSS, is to have just the headers and message be inside a scroll page (basically, make messageframe scroll). This works fairly well, except that normally email clients keep the headers visible at all times. The final way, having the headers always visible while the message scrolls, appears to be very difficult to implement in CSS, and also has one very serious flaw. Currently, RoundCube always shows the entire sent/received/cc list for an email. I have already had a few emails that were sent to large groups and take up over half the page with this header. If you implement the design where the header always shows and just the message scrolls, some emails could be unreadable because of such long headers. So, this brings up a few other options. Personally, I feel that the ideal (but I don't know about ease of implementation), is to have the header only show 1 line of Subject, Sender, Copy, and Date by default, and then be able to expand the header by clicking on a button (this is similiar to how Thunderbird functions). This would allow the header always visible + message scrolling method to be easier to implement (you will at least have a better idea to how large the header is going to be), and also makes sure the email will always be readable. If we consider that to be too difficult, or not the way you want it, it is very easy to make the whole messageframe scroll, and I went ahead and attached the mail.css file I created that will demonstrate this behavior (I works great in firefox, but I have no clue what needs to be done to make it work in IE). Maybe if nothing else, this would be a good solution for now, until you have time to implement the ideal. Rob P.S. I fixed an alignment issue, the top of the headers weren't lining up like they should, it was off by 10 pixels. Changing line 406 of mail.css from: top: 70px; to top: 60px; Fixes this alignment issue. Justin Frydman wrote: I will play with it more right now and see If I can get it to mimic what you want. |
/***** RoundCube|Mail mail task styles *****/
#messagetoolbar
{
position: absolute;
top: 20px;
left: 200px;
right: 250px;
height: 35px;
/* border: 1px solid #cccccc; */
}
#messagetoolbar a
{
padding-right: 10px;
}
#messagetoolbar select
{
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
#messagetoolbar select.mboxlist
{
position: absolute;
left: 300px;
top: 10px;
}
#messagetoolbar select.mboxlist option
{
padding-left: 15px;
}
#messagetoolbar select.mboxlist option[value="0"]
{
padding-left: 2px;
}
#listcontrols
{
position: absolute;
left: 200px;
bottom: 60px;
height: 16px;
width: 400px;
}
#listcontrols a,
#listcontrols a:active,
#listcontrols a:visited
{
color: #999999;
font-size: 11px;
text-decoration: none;
}
#listcontrols a.active,
#listcontrols a.active:active,
#listcontrols a.active:visited
{
color: #CC0000;
}
#listcontrols a.active:hover
{
text-decoration: underline;
}
#messagecountbar
{
position: absolute;
top: 35px;
right: 60px;
width: 250px;
height: 20px;
text-align: right;
}
#messagecountbar span
{
font-size: 11px;
color: #333333;
}
#messagepartcontainer
{
position: absolute;
top: 80px;
left: 20px;
right: 20px;
bottom: 20px;
}
#mailcontframe
{
position: absolute;
top: 60px;
left: 200px;
right: 40px;
bottom: 80px;
border: 1px solid #999999;
background-color: #F9F9F9;
overflow: auto;
/* css hack for IE */
width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
height: expression((parseInt(document.documentElement.clientHeight)-140)+'px');
}
#messagepartframe
{
border: 1px solid #999999;
background-color: #F9F9F9;
}
#partheader
{
position: absolute;
top: 10px;
left: 220px;
height: 40px;
}
#partheader table td
{
padding-left: 2px;
padding-right: 4px;
vertical-align: middle;
font-size: 11px;
}
#partheader table td.title
{
color: #666666;
font-weight: bold;
}
#rcmdraglayer
{
width: 300px;
border: 1px solid #999999;
background-color: #F9F9F9;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 11px;
opacity: 0.6;
-moz-opacity: 0.6;
}
/** mailbox list styles */
#mailboxlist-header
{
position: absolute;
top: 80px;
left: 20px;
width: 140px !important;
/* width: 162px; */
height: 13px;
padding: 3px 10px 2px 10px;
background-color: #EBEBEB;
background-image: url(images/listheader_aqua.gif);
border: 1px solid #CCCCCC;
color: #333333;
font-size: 11px;
font-weight: bold;
}
#mailboxlist-container
{
position: absolute;
top: 100px;
left: 20px;
width: 160px;
bottom: 80px;
border: 1px solid #CCCCCC;
background-color: #F9F9F9;
overflow: auto;
/* css hack for IE */
height: expression((parseInt(document.documentElement.clientHeight)-180)+'px');
}
#mailboxlist
{
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
overflow: hidden;
white-space: nowrap;
}
#mailboxlist li
{
/* height: 18px; */
font-size: 11px;
background: url(images/icons/folder-closed.png) no-repeat;
background-position: 10px 1px;
border-bottom: 1px solid #EBEBEB;
/* IE 5.5 margin-left: -16px; */
}
#mailboxlist li.inbox
{
background-image: url(images/icons/folder-inbox.png);
}
#mailboxlist li.sent
{
background-image: url(images/icons/folder-sent.png);
}
#mailboxlist li.junk
{
background-image: url(images/icons/folder-junk.png);
}
#mailboxlist li.trash
{
background-image: url(images/icons/folder-trash.png);
}
#mailboxlist li a
{
display: block;
padding-left: 32px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
}
#mailboxlist li, #mailboxlist li.unread
{
/* background-image: url(images/mailbox_list.gif); */
}
#mailboxlist li.unread
{
font-weight: bold;
}
#mailboxlist li.selected
{
background-color: #929292;
border-bottom: 1px solid #898989;
}
#mailboxlist li.selected a
{
color: #FFF;
font-weight: bold;
}
/* styles for nested folders */
#mailboxlist ul {
list-style: none;
padding: 0;
margin:0;
border-top: 1px solid #EBEBEB;
}
#mailboxlist ul li {
padding-left: 15px;
background-position: 25px 1px;
}
#mailboxlist li.selected li {
background-color: #F9F9F9;
}
#mailboxlist li.unread li {
font-weight: normal;
}
#mailboxlist li.unread li.unread {
font-weight: bold;
}
#mailboxlist li.selected li a{
color: black;
font-weight: normal;
}
/** message list styles */
body.messagelist
{
margin: 0px;
background-color: #F9F9F9;
}
#messagelist
{
width: 100%;
table-layout: fixed;
/* css hack for IE */
width: expression(document.getElementById('mailcontframe').clientWidth);
}
#messagelist thead tr td
{
height: 20px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 4px;
vertical-align: middle;
border-bottom: 1px solid #999999;
color: #333333;
background-color: #EBEBEB;
background-image: url(images/listheader_aqua.gif);
font-size: 11px;
font-weight: bold;
}
#messagelist tbody tr td
{
height: 16px !important;
height: 20px;
padding: 2px;
padding-right: 4px;
font-size: 11px;
white-space: nowrap;
border-bottom: 1px solid #EBEBEB;
cursor: pointer;
}
#messagelist tr td.icon
{
width: 16px;
}
#messagelist tr td.subject
{
overflow: hidden;
text-align: left;
}
#messagelist tr td.size
{
width: 60px;
text-align: right;
}
#messagelist tr td.from,
#messagelist tr td.to
{
width: 180px;
overflow: hidden;
}
#messagelist tr td.date
{
width: 110px;
}
#messagelist tr.message
{
background-color: #FFFFFF;
}
/*
#messagelist tr.odd
{
background-color: #F9F9F9;
}
*/
#messagelist tr.unread
{
font-weight: bold;
background-color: #FFFFFF;
}
#messagelist tr.selected td
{
font-weight: bold;
color: #FFFFFF;
background-color: #CC3333;
}
#messagelist tr.selected td a.rcmContactAddress
{
color: #FFFFFF;
}
/** message view styles */
#messageframe
{
position: absolute;
top: 60px;
left: 200px;
right: 40px;
/* css hack for IE */
//margin-bottom: 50px;
overflow: auto;
bottom: 80px;
//width: expression(document.body.clientWidth-240);
//height: expression(document.body.clientHeight-140)
width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
height: expression((parseInt(document.documentElement.clientHeight)-140)+'px');
border: 1px solid #cccccc;
background-color: #FFFFFF;
}
table.headers-table
{
width: 100%;
background-color: #EBEBEB;
table-layout: fixed;
}
table.headers-table tr td
{
font-size: 11px;
border-bottom:1px solid #FFFFFF;
}
table.headers-table td.header-title
{
width: 70px;
color: #666666;
font-weight: bold;
text-align: right;
padding-right: 4px;
}
table.headers-table tr td.subject
{
width: 95%;
font-weight: bold;
}
#attachment-list
{
margin: 0px;
padding: 0px 0px 0px 68px;
height: 18px;
list-style-image: none;
list-style-type: none;
background-color: #DFDFDF;
background: url(images/icons/attachment.png) no-repeat #DFDFDF;
background-position: 52px 1px;
border-bottom: 1px solid #FFFFFF;
}
#attachment-list li
{
/* display: block; */
float: left;
height: 18px;
font-size: 11px;
padding: 2px 10px 0px 10px;
}
#attachment-list li a
{
text-decoration: none;
}
#attachment-list li a:hover
{
text-decoration: underline;
}
#messagebody
{
// min-height: 300px;
//height: 80%;
//margin-top: 10px;
overflow: visible;
//margin-bottom: 50px;
background-color: #FFFFFF;
//border: 1px solid #cccccc;
//border-top: none;
}
div.message-part
{
padding: 8px;
padding-top: 8px;
//padding-bottom: 8px;
//margin-top: 8px;
//margin-left: 8px;
//height: 100%;
//border-top: 1px solid #cccccc;
overflow: visible;
}
div.message-part a
{
color: #0000CC;
}
div.message-part pre
{
margin: 0px;
padding: 0px;
}
#remote-objects-message
{
display: none;
height: 20px;
min-height: 20px;
padding: 10px 10px 6px 46px;
margin-top: 8px;
}
#remote-objects-message a
{
color: #666666;
padding-left: 10px;
}
#remote-objects-message a:hover
{
color: #333333;
}
/** message compose styles */
#priority-selector
{
position: absolute;
left: 200px;
top: 10px;
}
#compose-container
{
position: absolute;
top: 70px;
left: 200px;
right: 40px;
bottom: 60px;
padding: 0px;
margin: 0px;
/* css hack for IE */
width: expression(document.documentElement.clientWidth-240);
/* height: expression((parseInt(document.documentElement.clientHeight)-130)+'px'); */
}
/*
#compose-headers
{
position: absolute;
top: 70px;
left: 200px;
height: 84px;
border-top: 1px solid #cccccc;
overflow: auto;
}
#compose-headers td
{
padding-top: 1px;
padding-bottom: 1px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
*/
#compose-headers
{
width: 100%;
}
/*
#compose-headers td
{
width: 100%;
}
*/
#compose-headers td.top
{
vertical-align: top;
}
#compose-headers td.title,
#compose-subject td.title
{
width: 80px !important;
color: #666666;
font-size: 11px;
font-weight: bold;
padding-right: 10px;
white-space: nowrap;
}
#compose-headers td.add-button
{
width: 40px !important;
text-align: right;
vertical-align: bottom;
}
#compose-headers td.add-button a
{
color: #666666;
font-size: 11px;
text-decoration: none;
}
#compose-headers td textarea
{
width: 100%;
height: 40px;
}
#compose-headers td input
{
width: 100%;
}
#compose-cc,
#compose-bcc,
#compose-replyto
{
display: none;
}
#compose-body
{
margin-top: 10px;
width: 100% !important;
width: 95%;
height: 95%;
min-height: 400px;
font-size: 9pt;
font-family: "Courier New", Courier, monospace;
}
#compose-attachments
{
position: absolute;
top: 100px;
left: 20px;
width: 160px;
}
#compose-attachments ul
{
margin: 0px;
padding: 0px;
border: 1px solid #CCCCCC;
background-color: #F9F9F9;
list-style-image: none;
list-style-type: none;
}
#compose-attachments ul li
{
height: 18px;
font-size: 11px;
padding-left: 26px;
padding-top: 2px;
padding-right: 4px;
background: url(images/icons/attachment.png) no-repeat;
background-position: 4px 1px;
border-bottom: 1px solid #EBEBEB;
white-space: nowrap;
overflow: hidden;
}
#attachment-form
{
position: absolute;
top: 150px;
left: 20px;
z-index: 200;
padding: 8px;
visibility: hidden;
border: 1px solid #CCCCCC;
background-color: #F9F9F9;
}
#attachment-form input.button
{
margin-top: 8px;
}
