diff options
Diffstat (limited to 'skins/larry')
-rw-r--r-- | skins/larry/ie7hacks.css | 10 | ||||
-rw-r--r-- | skins/larry/iehacks.css | 4 | ||||
-rw-r--r-- | skins/larry/images/contactpic_32px.png | bin | 3422 -> 333 bytes | |||
-rw-r--r-- | skins/larry/images/contactpic_48px.png | bin | 3812 -> 409 bytes | |||
-rw-r--r-- | skins/larry/mail.css | 147 | ||||
-rw-r--r-- | skins/larry/svggradients.css | 4 | ||||
-rw-r--r-- | skins/larry/templates/message.html | 56 | ||||
-rw-r--r-- | skins/larry/templates/messageerror.html | 16 | ||||
-rw-r--r-- | skins/larry/templates/messagepreview.html | 13 | ||||
-rw-r--r-- | skins/larry/ui.js | 35 |
10 files changed, 153 insertions, 132 deletions
diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index 935a504fe..893ffdfef 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 { +.previewheader .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, +.previewheader .iconlink, #uploadform a.iconlink { display: inline; } @@ -58,6 +58,10 @@ a.deletebutton, right: -2px; } +#login-form .box-inner form { + margin: 0; +} + #login-form #message div { float: left; display: block; @@ -67,7 +71,7 @@ a.deletebutton, text-align: left; } -#messageheader .iconlink { +#messageheader.previewheader .iconlink { color: #fff; height: 14px; } diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index bba93dc33..93f483c11 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -143,8 +143,8 @@ ul.toolbarmenu li a.active:hover, filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d76', endColorstr='#004558', GradientType=0); } -#partheader, #composeheaders { - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0); +#messageheader, #partheader, #composeheaders { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0); } #previewheaderstoggle { diff --git a/skins/larry/images/contactpic_32px.png b/skins/larry/images/contactpic_32px.png Binary files differindex 25a81418d..233bb1496 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 Binary files differindex 9cd3bceaf..e536ddf0e 100644 --- a/skins/larry/images/contactpic_48px.png +++ b/skins/larry/images/contactpic_48px.png diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 04f56e134..a2756638d 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,24 +675,33 @@ a.iconbutton.threadmode.selected { #messagecontent { position: absolute; - top: 0; + top: 110px; left: 0; width: 100%; - bottom: 28px; + bottom: 27px; overflow: auto; - border-radius: 4px 4px 0 0; } +#messageheader, #partheader, #composeheaders { position: relative; padding: 3px 0; background: #f9f9f9; - background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e9e9e9)); - background: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%); - background: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%); - background: 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%,#f0f0f0)); + background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: linear-gradient(top, #fff 0%, #f0f0f0 100%); + border-bottom: 1px solid #dfdfdf; +} + +#mailview-right #messageheader { + border-radius: 4px 4px 0 0; + padding-left: 78px; + /* avoid headers eating up all the vertical space */ + max-height: 50%; + overflow: auto; } h2.subject { @@ -704,9 +713,13 @@ h2.subject { text-overflow: ellipsis; } +#mailview-right #messageheader h2.subject { + margin-left: -56px; +} + 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; @@ -718,16 +731,23 @@ h3.subject { padding: 2px 8px; } -.headers-table td.header { +.headers-table td.header, +.ui-dialog-content.popup span.adr { font-weight: bold; } -.headers-table td.header a { +.headers-table td.header-title { + white-space: nowrap; +} + +.headers-table td.header a, +.ui-dialog-content.popup span.adr a { color: #666; 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; } @@ -737,8 +757,15 @@ h3.subject { 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; + font-weight: normal; } .rcmaddcontact { @@ -796,29 +823,40 @@ h3.subject { #previewheaderstoggle.remove .iconlink { top: auto; - bottom: 15px; + bottom: 5px; background-position: -5px -242px; } -#previewheaderstoggle .iconlink.allheaders { - display: none; +#full-headers { + position: relative; } -#previewheaderstoggle.remove .iconlink.allheaders { - top: auto; - bottom: 2px; - display: inline-block; - background-position: -27px -242px; +div.more-headers { + position: absolute; + top: -12px; + right: 10px; + width: 12px; + height: 10px; + cursor: pointer; + background: url(images/buttons.png) center -1619px no-repeat; +} + +div.hide-headers { + background-position: center -1629px; } #all-headers { position: relative; - margin: 2px 0; + margin: 4px 10px; padding: 0; height: 180px; - background-color: #f0f0f0; - overflow: hidden; + border: 1px solid #ccc; border-radius: 4px; + 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 { @@ -828,31 +866,28 @@ h3.subject { left: 0; right: 0; bottom: 0; - padding: 2px; + padding: 3px 6px; overflow: auto; text-align: left; - color: #666; + color: #333; +} + +#messageheader.previewheader #all-headers { + margin-left: 0; } -#messageheader { +#messageheader.previewheader { position: relative; height: auto; min-height: 52px; - margin: 0 8px 0 0; - padding: 0 0 0 72px; - border-bottom: 2px solid #f0f0f0; -} - -#messagecontent #messageheader { - padding: 0 0 0 90px; - min-height: 68px; + padding: 0 0 3px 72px; } -#messageheader h3.subject { +#messageheader.previewheader h3.subject { padding: 8px 8px 2px 0; } -#messageheader #contactphoto { +#messageheader.previewheader #contactphoto { display: block; position: absolute; top: 11px; @@ -864,22 +899,26 @@ h3.subject { border-radius: 3px; } -#messageheader #contactphoto img { +#messageheader.previewheader #contactphoto img { width: 32px; height: auto; border-radius: 3px; } -#messagecontent #messageheader #contactphoto { - top: 11px; - left: 31px; +#messageheader #contactphoto { + display: block; + position: absolute; + top: 34px; + left: 30px; width: 48px; height: 48px; - background: url(images/contactpic_48px.png) center center no-repeat #fff; + overflow: hidden; border-radius: 4px; + border: 1px solid #e6e6e6; + background: url(images/contactpic_48px.png) center center no-repeat #fff; } -#messagecontent #messageheader #contactphoto img { +#messageheader #contactphoto img { width: 48px; height: auto; border-radius: 4px; @@ -888,16 +927,25 @@ h3.subject { #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; } +#messagecontent .rightcol, #messagepreview .rightcol { float: right; /* @@ -1110,6 +1158,7 @@ div.message-part blockquote blockquote blockquote { -webkit-box-shadow: 0 2px 3px 0 #999; -moz-box-shadow: 0 2px 3px 0 #999; box-shadow: 0 2px 3px 0 #999; + border-bottom: 0; } #composebuttons { @@ -1168,6 +1217,8 @@ div.message-part blockquote blockquote blockquote { .compose-headers td input { width: 100%; resize: none; + font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; } #compose-cc, #compose-bcc, #compose-replyto, #compose-followupto { diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index 4f1dd8a05..5b3fedbfc 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -133,8 +133,8 @@ ul.toolbarmenu li a.active:hover, background-image: url(svggradient.php?c=005d76;004558); } -#partheader, #composeheaders { - background-image: url(svggradient.php?c=ffffff;e9e9e9); +#messageheader, #partheader, #composeheaders { + background-image: url(svggradient.php?c=ffffff;f0f0f0); } #previewheaderstoggle { diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 89b7bd808..e99f2066a 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -24,38 +24,21 @@ <!-- 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> -<div id="messagecontent"> +<div id="mailview-right" class="offset uibox"> <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 id="contactphoto"><roundcube:object name="contactphoto" /></div> +<span id="previewheaderstoggle"></span> -<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" /> +<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2> +<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" /> +<roundcube:object name="messageFullHeaders" id="full-headers" /> <!-- record navigation --> <div id="countcontrols" class="pagenav"> @@ -64,19 +47,18 @@ <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&gt;" /> </div> -</div><!-- end messageheader --> - -<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="contactphoto"><roundcube:object name="contactphoto" /></div> </div> -</div><!-- end messagecontent --> +<div id="messagecontent"> +<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> <roundcube:object name="message" id="message" class="statusbar" /> diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index 2f5243200..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,14 +34,7 @@ </div> -<!-- 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-right" class="uibox" style="top: 42px"> +<div id="mailview-right" class="offset uibox"> <div id="messagecontent" class="watermark"></div> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index 74c414b0d..de02b050b 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -6,26 +6,27 @@ </head> <body class="iframe fullheight"> -<div id="messageheader"> +<div id="messageheader" class="previewheader"> <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" title="<roundcube:label name='togglemoreheaders' />"></span></a> <div id="contactphoto"><roundcube:object name="contactphoto" /></div> <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" no-switch="true" /> +<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" /> <!-- record navigation --> <div id="countcontrols" class="pagenav"> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index c221b8681..9b5d8309c 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -73,9 +73,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 +320,7 @@ function rcube_mail_ui() */ function layout_messageview() { + $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 1) + 'px'); $('#message-objects div a').addClass('button'); if (!$('#attachment-list li').length) { @@ -512,31 +513,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') } |