diff options
Diffstat (limited to 'skins')
-rw-r--r-- | skins/larry/images/addcontact.png | bin | 0 -> 1204 bytes | |||
-rw-r--r-- | skins/larry/images/buttons.png | bin | 25191 -> 24695 bytes | |||
-rw-r--r-- | skins/larry/images/favicon.ico | bin | 0 -> 1150 bytes | |||
-rw-r--r-- | skins/larry/images/filetypes.png | bin | 0 -> 5258 bytes | |||
-rw-r--r-- | skins/larry/images/listicons.png | bin | 16444 -> 16672 bytes | |||
-rw-r--r-- | skins/larry/images/messages.png | bin | 2975 -> 2696 bytes | |||
-rw-r--r-- | skins/larry/includes/footer.html | 10 | ||||
-rw-r--r-- | skins/larry/includes/links.html | 1 | ||||
-rw-r--r-- | skins/larry/includes/mailtoolbar.html | 45 | ||||
-rw-r--r-- | skins/larry/mail.css | 305 | ||||
-rw-r--r-- | skins/larry/print.css | 126 | ||||
-rw-r--r-- | skins/larry/styles.css | 168 | ||||
-rw-r--r-- | skins/larry/templates/mail.html | 44 | ||||
-rw-r--r-- | skins/larry/templates/message.html | 72 | ||||
-rw-r--r-- | skins/larry/templates/messagepart.html | 36 | ||||
-rw-r--r-- | skins/larry/templates/messageprint.html | 19 | ||||
-rw-r--r-- | skins/larry/templates/settings.html | 2 | ||||
-rw-r--r-- | skins/larry/templates/settingsedit.html | 2 | ||||
-rw-r--r-- | skins/larry/ui.js | 271 |
19 files changed, 1040 insertions, 61 deletions
diff --git a/skins/larry/images/addcontact.png b/skins/larry/images/addcontact.png Binary files differnew file mode 100644 index 000000000..1d9c0a1d4 --- /dev/null +++ b/skins/larry/images/addcontact.png diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex c86f211f2..54ebc8378 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/images/favicon.ico b/skins/larry/images/favicon.ico Binary files differnew file mode 100644 index 000000000..b3bd18c12 --- /dev/null +++ b/skins/larry/images/favicon.ico diff --git a/skins/larry/images/filetypes.png b/skins/larry/images/filetypes.png Binary files differnew file mode 100644 index 000000000..1ea4599f0 --- /dev/null +++ b/skins/larry/images/filetypes.png diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png Binary files differindex 08c098fe0..dcd214fc5 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/images/messages.png b/skins/larry/images/messages.png Binary files differindex 07672a620..a5b1eb1d0 100644 --- a/skins/larry/images/messages.png +++ b/skins/larry/images/messages.png diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html new file mode 100644 index 000000000..f884bdf82 --- /dev/null +++ b/skins/larry/includes/footer.html @@ -0,0 +1,10 @@ +<script type="text/javascript"> + +// UI startup +var UI = new rcube_mail_ui(); +$(document).ready(function(){ + UI.init(); +}); + +</script> + diff --git a/skins/larry/includes/links.html b/skins/larry/includes/links.html index 1dba9f1cd..d2426aee4 100644 --- a/skins/larry/includes/links.html +++ b/skins/larry/includes/links.html @@ -5,3 +5,4 @@ <roundcube:endif /> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="/iehacks.css" /><![endif]--> <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/ie6hacks.css" /><![endif]--> +<script type="text/javascript" src="/ui.js"></script>
\ No newline at end of file diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html index e97e135f5..09a6f81c1 100644 --- a/skins/larry/includes/mailtoolbar.html +++ b/skins/larry/includes/mailtoolbar.html @@ -1,66 +1,57 @@ <div id="mailtoolbar" class="toolbar"> <roundcube:if condition="template:name == 'message'" /> -<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="backtolist" /> +<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> <roundcube:else /> <roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="checkmail" /> -<roundcube:endif /> <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="writenewmessage" /> +<roundcube:endif /> <roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="replytomessage" /> <span class="dropbutton"> <roundcube:button command="reply-all" type="link" class="button reply-all disabled" classAct="button reply-all" classSel="button reply-all pressed" label="replytoallmessage" /> -<span id="replyallmenulink" onclick="rcmail_ui.show_popup('replyallmenu');return false"></span> +<span class="dropbuttontip" id="replyallmenulink" onclick="UI.show_popup('replyallmenu');return false"></span> </span> <span class="dropbutton"> <roundcube:button command="forward" type="link" class="button forward disabled" classAct="button forward" classSel="button forward pressed" label="forwardmessage" /> -<span id="forwardmenulink" onclick="rcmail_ui.show_popup('forwardmenu');return false"></span> +<span class="dropbuttontip" id="forwardmenulink" onclick="UI.show_popup('forwardmenu');return false"></span> </span> <roundcube:button command="delete" type="link" class="button delete disabled" classAct="button delete" classSel="button delete pressed" label="deletemessage" /> <roundcube:container name="toolbar" id="mailtoolbar" /> <roundcube:if condition="template:name == 'mail'" /> -<roundcube:button name="markmenulink" id="markmenulink" type="link" class="button markmessage" label="markmessages" onclick="rcmail_ui.show_popup('markmenu');return false" /> -<roundcube:endif /> -<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="moreactions" onclick="rcmail_ui.show_popup('messagemenu');return false" /> -<roundcube:if condition="template:name == 'message'" /> -<roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mboxlist" folder_filter="mail" /> +<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="markmessages" onclick="UI.show_popup('markmessagemenu');return false" /> <roundcube:endif /> +<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="moreactions" onclick="UI.show_popup('messagemenu');return false" /> </div> <div id="forwardmenu" class="popupmenu"> <ul class="toolbarmenu"> - <li class="block"> - <input type="radio" name="forwardtype" value="0" onchange="rcmail.command('save-pref', {name: 'forward_attachment', value: 0, env: 'forward_attachment'});" /> - <roundcube:button command="forward" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /> - </li> - <li class="block"> - <input type="radio" name="forwardtype" value="1" onchange="rcmail.command('save-pref', {name: 'forward_attachment', value: 1, env: 'forward_attachment'})" /> - <roundcube:button command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" /> - </li> + <li><roundcube:button command="forward" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /></li> + <li><roundcube:button command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" /></li> <roundcube:container name="forwardmenu" id="forwardmenu" /> </ul> </div> <div id="replyallmenu" class="popupmenu"> - <ul> - <li><roundcube:button command="reply-all" label="replyall" prop="sub" classAct="replyalllink active" class="replyalllink" /></li> - <li><roundcube:button command="reply-list" label="replylist" prop="sub" classAct="replylistlink active" class="replylistlink" /></li> + <ul class="toolbarmenu"> + <li><roundcube:button command="reply-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /></li> + <li><roundcube:button command="reply-list" label="replylist" prop="sub" class="replylistlink" classAct="replylistlink active" /></li> <roundcube:container name="replyallmenu" id="replyallmenu" /> </ul> </div> <div id="messagemenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button class="printlink" command="print" label="printmessage" classAct="printlink active" /></li> - <li><roundcube:button class="downloadlink" command="download" label="emlsave" classAct="downloadlink active" /></li> - <li><roundcube:button class="editlink" command="edit" label="editasnew" classAct="editlink active" /></li> - <li class="separator_below"><roundcube:button class="sourcelink" command="viewsource" label="viewsource" classAct="sourcelink active" /></li> - <li><roundcube:button class="openlink" command="open" label="openinextwin" target="_blank" classAct="openlink active" /></li> + <ul class="toolbarmenu iconized"> + <li><roundcube:button command="print" label="printmessage" class="printlink" classAct="printlink active" /></li> + <li><roundcube:button command="download" label="emlsave" class="downloadlink" classAct="downloadlink active" /></li> + <li><roundcube:button command="edit" label="editasnew" class="editlink" classAct="editlink active" /></li> + <li><roundcube:button command="viewsource" label="viewsource" class="sourcelink" classAct="sourcelink active" /></li> + <li><roundcube:button command="open" label="openinextwin" target="_blank" class="openlink" classAct="openlink active" /></li> <roundcube:container name="messagemenu" id="messagemenu" /> </ul> </div> <roundcube:if condition="template:name == 'mail'" /> <div id="markmessagemenu" class="popupmenu"> - <ul class="toolbarmenu"> + <ul class="toolbarmenu iconized"> <li><roundcube:button command="mark" prop="read" label="markread" classAct="readlink active" class="readlink" /></li> <li><roundcube:button command="mark" prop="unread" label="markunread" classAct="unreadlink active" class="unreadlink" /></li> <li><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="flaggedlink active" class="flaggedlink" /></li> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 8097a95ef..247873539 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -68,6 +68,10 @@ padding: 2px; } +#messagelistfooter.rightalign { + text-align: right; +} + #messagelistfooter #countcontrols { display: inline-block; } @@ -160,22 +164,22 @@ #mailboxlist li.mailbox div.collapsed, #mailboxlist li.mailbox div.expanded { position: absolute; - top: 15px; - left: 21px; - width: 10px; - height: 10px; - background: url(images/listicons.png) -5px -146px no-repeat; + top: 14px; + left: 20px; + width: 14px; + height: 14px; + background: url(images/listicons.png) -3px -144px no-repeat; cursor: pointer; } #mailboxlist li.mailbox div.expanded { - background-position: -5px -170px; + background-position: -3px -168px; } #mailboxlist li.mailbox ul li div.collapsed, #mailboxlist li.mailbox ul li div.expanded { - left: 46px; - top: 16px; + left: 45px; + top: 15px; } #mailboxlist li.mailbox .unreadcount { @@ -185,11 +189,11 @@ width: 2.8em; padding: 2px; background: #82acb5; - background: -moz-linear-gradient(left, #82acb5 0%, #6a939f 100%); - background: -webkit-gradient(linear, left top, right top, color-stop(0%,#82acb5), color-stop(100%,#6a939f)); - background: -o-linear-gradient(left, #82acb5 0%, #6a939f 100%); - background: -ms-linear-gradient(left, #82acb5 0%, #6a939f 100%); - background: linear-gradient(left, #82acb5 0%, #6a939f 100%); + background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f)); + background: -o-linear-gradient(top, #82acb5 0%, #6a939f 100%); + background: -ms-linear-gradient(top, #82acb5 0%, #6a939f 100%); + background: linear-gradient(top, #82acb5 0%, #6a939f 100%); box-shadow: inset 0 1px 1px 0 #536d72; -o-box-shadow: inset 0 1px 1px 0 #536d72; -webkit-box-shadow: inset 0 1px 1px 0 #536d72; @@ -203,11 +207,11 @@ #mailboxlist li.mailbox.selected .unreadcount { background: #005d76; - background: -moz-linear-gradient(left, #005d76 0%, #004558 100%); - background: -webkit-gradient(linear, left top, right top, color-stop(0%,#005d76), color-stop(100%,#004558)); - background: -o-linear-gradient(left, #005d76 0%, #004558 100%); - background: -ms-linear-gradient(left, #005d76 0%, #004558 100%); - background: linear-gradient(left, #005d76 0%, #004558 100%); + background: -moz-linear-gradient(top, #005d76 0%, #004558 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558)); + background: -o-linear-gradient(top, #005d76 0%, #004558 100%); + background: -ms-linear-gradient(top, #005d76 0%, #004558 100%); + background: linear-gradient(top, #005d76 0%, #004558 100%); box-shadow: inset 0 1px 1px 0 #003645; -o-box-shadow: inset 0 1px 1px 0 #003645; -webkit-box-shadow: inset 0 1px 1px 0 #003645; @@ -218,15 +222,42 @@ width: 16em; } +#mailview-left select.mailboxlist { + position: relative; + top: 10px; + width: 100%; +} + #messagetoolbar { position: absolute; top: -6px; right: 0; left: 15em; height: 40px; +} + +#messagetoolbar.fullwidth { + left: 0; +} + +#mailtoolbar { text-align: right; } +#mailpreviewtoggle { + display: block; + position: absolute; + top: 4px; + right: 2px; + width: 20px; + height: 18px; + background: url(images/buttons.png) -5px -318px no-repeat; +} + +#mailpreviewtoggle.enabled { + background-position: -28px -318px; +} + /*** message list ***/ @@ -563,3 +594,241 @@ html.chrome #messagelist tr td.threads { width: 15px; /* background: url(images/tree.gif) 0px 0px no-repeat; */ } + + +/**** message view ****/ + +#messagecontent { + position: absolute; + top: 140px; + left: 0; + width: 100%; + bottom: 32px; + overflow: auto; +} + +#messageheader, +#partheader { + padding: 3px 0; + background: #fff; + 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%); +} + +.headers-table td { + color: #666; + padding: 2px 8px; + font-size: 11px; +} + +.headers-table td.header { + font-weight: bold; +} + +.headers-table td.header a { + color: #666; + text-decoration: none; +} + +.headers-table td.header a:hover { + text-decoration: underline; +} + +.headers-table td.subject { + color: #333; + font-size: 110%; + font-weight: bold; +} + +.rcmaddcontact { + position: relative; + top: 1px; + margin-left: 0.5em; +} + +#messagecontent .leftcol { + margin-right: 250px; +} + +#messagecontent .rightcol { + float: right; +/* + position: absolute; + top: 10px; + right: 10px; + height: 90%; +*/ + width: 230px; + margin: 8px; + min-height: 200px; + background: #f0f0f0; + padding: 8px; +} + + +#messagebody { + margin: 8px; +} + +#message-objects div, +#messagebody span.part-notice { + margin: 8px; +} + +#message-objects div.notice { + color: #960; + border: 1px solid #ffdf0e; + background-color: #fef893; + background-position: 5px -24px; + padding: 6px 12px 4px 30px; +} + +#message-objects div a.button, +#messagebody span.part-notice a.button { + font-size: 11px; + margin-left: 10px; + border: 1px solid #ccc; + box-shadow: 0 1px 1px 0 #e8e386; + -o-box-shadow: 0 1px 1px 0 #e8e386; + -webkit-box-shadow: 0 1px 1px 0 #e8e386; + -moz-box-shadow: 0 1px 1px 0 #e8e386; +} + +div.message-part, +div.message-htmlpart { + padding: 10px 8px; + border-top: 1px solid #ccc; +} + +#messagebody div:first-child { + border-top: 0; +} + +div.message-part a, +div.message-htmlpart a { + color: #0000CC; +} + +div.message-part pre, +div.message-htmlpart pre, +div.message-part div.pre { + margin: 0px; + padding: 0px; + font-family: monospace; + white-space: -moz-pre-wrap !important; + white-space: pre-wrap !important; + white-space: pre; +} + +div.message-part span.sig { + color: #666666; +} + +div.message-part blockquote { + color: blue; + border-left: 2px solid blue; + border-right: 2px solid blue; + background-color: #F6F6F6; + margin: 2px 0px 2px 0px; + padding: 1px 8px 1px 10px; +} + +div.message-part blockquote blockquote { + color: green; + border-left: 2px solid green; + border-right: 2px solid green; +} + +div.message-part blockquote blockquote blockquote { + color: #990000; + border-left: 2px solid #bb0000; + border-right: 2px solid #bb0000; +} + +#messagebody > hr { + color: #fff; + background: #fff; + border: 0; + border-bottom: 2px dotted #ccc; +} + +#messagebody > p > img { + max-width: 80%; +} + +#attachment-list { + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +#attachment-list li { + display: block; + background: url(images/filetypes.png) 0 0 no-repeat; + margin-bottom: 1px; +} + +#attachment-list li.pdf { + background-position: 0 -26px; +} + +#attachment-list li.doc, +#attachment-list li.msword { + background-position: 0 -52px; +} + +#attachment-list li.xls, +#attachment-list li.msexcel { + background-position: 0 -78px; +} + +#attachment-list li.zip, +#attachment-list li.gz { + background-position: 0 -104px; +} + +#attachment-list li.image { + background-position: 0 -130px; +} + +#attachment-list li.audio { + background-position: 0 -156px; +} + +#attachment-list li.video { + background-position: 0 -182px; +} + + +#attachment-list li a { + display: block; + color: #333; + font-size: 11px; + font-weight: bold; + padding: 8px 4px 3px 30px; + text-shadow: 1px 1px 1px #fff; + text-decoration: none; + white-space: nowrap; +} + +#attachment-list li a:hover { + text-decoration: underline; +} + +#messagepartcontainer { + position: absolute; + top: 60px; + left: 0px; + right: 0px; + bottom: 0px; +} + + +#messagepartframe { + border: 0; +}
\ No newline at end of file diff --git a/skins/larry/print.css b/skins/larry/print.css new file mode 100644 index 000000000..97545a557 --- /dev/null +++ b/skins/larry/print.css @@ -0,0 +1,126 @@ +/** + * Roundcube webmail styles for message printing + * + * Copyright (c) 2011, The Roundcube Dev Team + * + * The contents are subject to the Creative Commons Attribution-ShareAlike + * License. It is allowed to copy, distribute, transmit and to adapt the work + * by keeping credits to the original autors in the README file. + * See http://creativecommons.org/licenses/by-sa/3.0/ for details. + * + * $Id$ + */ +body { + font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; + background-color: #fff; + color: #000; + margin: 2mm; +} + +body, td, th, span, div, p { + font-size: 9pt; + color: #000; +} + +h3 { + font-size: 18px; + color: #000; +} + +a, a:active, a:visited { + color: #000; +} + +#header { + float: right; + margin: 0 5mm 3mm 5mm; +} + +table.headers-table { + table-layout: fixed; + margin-top: 14px; +} + +table.headers-table tr td { + font-size: 9pt; +} + +table.headers-table td.header-title { + color: #666; + font-size: 85%; + padding-right: 4mm; + white-space: nowrap; +} + +table.headers-table tr td.subject { + width: 90%; + font-weight: bold; + font-size: 120%; +} + +#attachment-list { + margin-top: 3mm; + padding-top: 3mm; + border-top: 1pt solid #ccc; +} + +#attachment-list li { + font-size: 9pt; +} + +#attachment-list li a { + text-decoration: none; +} + +#attachment-list li a:hover { + text-decoration: underline; +} + +#messagebody { + margin-top: 5mm; + border-top: none; +} + +div.message-part { + padding: 2mm; + margin-top: 5mm; + margin-bottom: 5mm; + border-top: 1pt solid #ccc; +} + +div.message-part a { + color: #00c; +} + +div.message-part pre, +div.message-htmlpart pre, +div.message-part div.pre { + margin: 0; + padding: 0; + font-family: monospace; + white-space: -moz-pre-wrap !important; + white-space: pre-wrap !important; + white-space: pre; + word-wrap: break-word; /* IE (and Safari) */ +} + +div.message-part blockquote { + color: blue; + border-left: 2px solid blue; + border-right: 2px solid blue; + background-color: #F6F6F6; + margin: 0.5em 0em 0.5em 0em; + padding: 0.25em 1em 0.25em 1em; +} + +div.message-part blockquote blockquote { + color: green; + border-left: 2px solid green; + border-right: 2px solid green; +} + +div.message-part blockquote blockquote blockquote { + color: #900; + border-left: 2px solid #b00; + border-right: 2px solid #b00; +} diff --git a/skins/larry/styles.css b/skins/larry/styles.css index d251adb8e..ebfe63e04 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -157,7 +157,8 @@ a.button.disabled span.inner { opacity: 0.4; } -a.button.pressed { +a.button.pressed, +a.button:active { background: #e6e6e6; background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9)); @@ -190,7 +191,8 @@ a.button.pressed { display: inline-block; width: 12px; height: 12px; - text-indent: -1000px; + text-indent: 1000px; + overflow: hidden; background: url(images/buttons.png) -8px -211px no-repeat; } @@ -209,6 +211,7 @@ a.button.pressed { .pagenav .countdisplay { display: inline-block; padding:0 0.5em; + font-size: 11px; text-shadow: 1px 1px 1px #fff; min-width: 20em; } @@ -222,11 +225,11 @@ a.iconbutton { } a.iconbutton.searchoptions { - background-position: -2px -304px; + background-position: -2px -337px; } a.iconbutton.reset { - background-position: -25px -303px; + background-position: -25px -337px; } @@ -236,7 +239,8 @@ a.iconbutton.reset { #message div.warning, #message div.error, #message div.notice, -#message div.confirmation { +#message div.confirmation, +#message-objects div.notice { color: #555; font-weight: bold; padding: 6px 40px 6px 25px; @@ -312,6 +316,11 @@ a.iconbutton.reset { text-decoration: none; } +#topline a:hover, +#topnav a:hover { + text-decoration: underline; +} + #toplogo { padding-top: 2px; } @@ -324,6 +333,11 @@ a.iconbutton.reset { float: right; } +.closelink { + display: inline-block; + padding: 2px 10px 2px 20px; +} + #topline span.username { padding-right: 1em; } @@ -340,6 +354,7 @@ a.iconbutton.reset { color: #fff; } + /*** taskbar ***/ #taskbar a { @@ -437,6 +452,10 @@ a.iconbutton.reset { overflow: auto; } +.listbox .scroller.wfooter { + bottom: 42px; +} + .listbox .boxtitle + .scroller { top: 34px; } @@ -499,6 +518,41 @@ table.listing { border-spacing: 0; } +.listbox .boxfooter { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 42px; + border-top: 1px solid #ccdde4; + background: #d9ecf4; + -webkit-box-shadow: inset 0 1px 0 0 #fff; + -moz-box-shadow: inset 0 1px 0 0 #fff; + box-shadow: inset 0 1px 0 0 #fff; +} + +.boxfooter .listbutton { + display: inline-block; + text-decoration: none; + width: 48px; + border-right: 1px solid #fff; + background: #c7e3ef; + padding: 3px 0; + margin-top: 1px; +} + +.boxfooter .listbutton .inner { + display: inline-block; + width: 48px; + height: 35px; + text-indent: -1000px; + background: url(images/buttons.png) -1000px 0 no-repeat; +} + +.boxfooter .listbutton.groupactions .inner { + background-position: 4px -1212px; +} + .errobox h3 { font-size: 16px; margin-top: 0; @@ -714,40 +768,130 @@ table.propform td.title { opacity: 0.5; } +.dropbutton { + display: inline-block; + position: relative; +} + +.dropbutton .dropbuttontip { + display: block; + position: absolute; + right: 2px; + top: 0; + height: 42px; + width: 18px; + background: url(images/buttons.png) -24px -1049px no-repeat; + cursor: pointer; +} + +.dropbutton .dropbuttontip:hover { + background-position: 0 -1049px; +} + +.toolbar a.button.back { + background-position: 0 -370px; +} + .toolbar a.button.checkmail { - background-position: center -370px; + background-position: center -410px; } .toolbar a.button.compose { - background-position: center -410px; + background-position: center -450px; } .toolbar a.button.reply { - background-position: center -450px; + background-position: center -490px; } .toolbar a.button.reply-all { - background-position: center -490px; + background-position: center -530px; } .toolbar a.button.forward { - background-position: center -530px; + background-position: center -570px; } .toolbar a.button.delete { - background-position: center -570px; + background-position: center -610px; } .toolbar a.button.markmessage, .toolbar a.button.more { - background-position: center -730px; + background-position: center -770px; } /*** popup menus ***/ .popupmenu { display: none; + position: absolute; + top: 32px; + left: 90px; + width: auto; + background: #444; + border: 1px solid #999; + z-index: 240; + border-radius: 4px; + box-shadow: 0 2px 6px 0 #333; + -moz-box-shadow: 0 2px 6px 0 #333; + -webkit-box-shadow: 0 2px 6px 0 #333; + -o-box-shadow: 0 2px 6px 0 #333; +} + +ul.toolbarmenu { + margin: 0; + padding: 0; + list-style: none; +} + +ul.toolbarmenu li { + color: #fff; + font-size: 11px; + white-space: nowrap; + min-width: 130px; + margin: 0; + border-top: 1px solid #5a5a5a; + border-bottom: 1px solid #333; } +ul.toolbarmenu li:first-child { + border-top: 0; +} +ul.toolbarmenu li:last-child { + border-bottom: 0; +} +ul.toolbarmenu li a { + display: block; + color: #666; + text-shadow: 1px 1px 1px #333; + text-decoration: none; + min-height: 14px; + padding: 6px 10px 6px 10px; +} + +ul.toolbarmenu li a.active { + color: #fff; +} + +ul.toolbarmenu li a.active:hover { + background-color: #00aad6; + background: -moz-linear-gradient(top, #00aad6 0%, #008fc9 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00aad6), color-stop(100%,#008fc9)); + background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%); + background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%); + background: linear-gradient(top, #00aad6 0%, #008fc9 100%); +} + +ul.toolbarmenu.iconized li a { + padding-left: 28px; +} + +ul.toolbarmenu li label { + display: block; + color: #fff; + padding: 4px 8px; + text-shadow: 1px 1px 1px #333; +} diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index 6a1164002..b6f333983 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -15,17 +15,17 @@ <!-- search box --> <div id="quicksearchbar"> <roundcube:object name="searchform" id="quicksearchbox" /> -<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" _onclick="rcmail_ui.show_popup('searchmenu');return false" title="searchmod" content=" " /> +<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " /> <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> </div> <!-- folders list --> <div id="mailboxcontainer" class="uibox listbox"> -<div class="scroller"> -<roundcube:object name="mailboxlist" id="mailboxlist"class="listing" folder_filter="mail" /> +<div class="scroller wfooter"> +<roundcube:object name="mailboxlist" id="mailboxlist"class="listing" folder_filter="mail" unreadwrap="%s" /> </div> <div class="boxfooter"> - <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" _onclick="rcmail_ui.show_popup('mailboxmenu');return false" content=" " /> + <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="⚙" /> </div> </div> @@ -66,12 +66,15 @@ <roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" content="&gt;" /> <roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" content="&gt;|" /> </div> + + <a href="#preview" id="mailpreviewtoggle" title="<roundcube:label name='previewpane' />"></a> </div> </div><!-- end mailview-top --> <div id="mailview-bottom" class="uibox"> <div id="mailpreviewframe"> + </div> <roundcube:object name="message" id="message" class="statusbar" /> @@ -82,6 +85,39 @@ </div><!-- end mainscreen --> +<div id="searchmenu" class="popupmenu"> + <ul class="toolbarmenu"> + <li><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <roundcube:label name="subject" /></label></li> + <li><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <roundcube:label name="from" /></label></li> + <li><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <roundcube:label name="to" /></label></li> + <li><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <roundcube:label name="cc" /></label></li> + <li><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <roundcube:label name="bcc" /></label></li> + <li><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <roundcube:label name="msgtext" /></label></li> + </ul> +</div> + +<div id="dragmessagemenu" class="popupmenu"> + <ul class="toolbarmenu"> + <li><roundcube:button command="moveto" onclick="return rcmail.drag_menu_action('moveto')" label="move" classAct="active" /></li> + <li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li> + </ul> +</div> + +<div id="mailboxmenu" class="popupmenu"> + <ul class="toolbarmenu"> + <li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li> + <li class="separator_below"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> + <li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li> + <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" /> + </ul> +</div> + + +<div id="listoptions" class="popupdialog"> + +</div> + +<roundcube:include file="/includes/footer.html" /> </body> </html> diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html new file mode 100644 index 000000000..9cb5928c2 --- /dev/null +++ b/skins/larry/templates/message.html @@ -0,0 +1,72 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +</head> +<body> + +<roundcube:include file="/includes/header.html" /> + +<div id="mainscreen"> + +<div id="mailview-left"> +<roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mailboxlist" folder_filter="mail" /> + +<!-- folders list --> +<div id="mailboxcontainer" class="uibox listbox"> +<div class="scroller"> +<roundcube:object name="mailboxlist" id="mailboxlist"class="listing" folder_filter="mail" /> +</div> +</div> + +</div> + +<div id="mailview-right"> + +<!-- toolbar --> +<div id="messagetoolbar" class="fullwidth"> +<roundcube:include file="/includes/mailtoolbar.html" /> +</div> + +<div id="mailview-top"> +<div id="messageheader" class="uibox"> +<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" /> +<roundcube:object name="messageFullHeaders" id="full-headers" /> +</div> + +<div id="messagecontent" class="uibox"> +<div class="rightcol"> +<roundcube:object name="messageAttachments" id="attachment-list" /> +</div> +<div class="leftcol"> +<roundcube:object name="messageObjects" id="message-objects" /> +<roundcube:object name="messageBody" id="messagebody" /> +</div> +</div> + +<!-- list footer --> +<div id="messagelistfooter" class="rightalign"> + <div id="countcontrols" class="pagenav"> + <roundcube:object name="messageCountDisplay" class="countdisplay" /> + <roundcube:button command="firstmessage" type="link" class="button firstpage disabled" classAct="button firstpage" classSel="button firstpage pressed" innerClass="inner" title="firstmessage" content="|&lt;" /> + <roundcube:button command="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" content="&lt;" /> + <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&gt;" /> + <roundcube:button command="lastmessage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastmessage" content="&gt;|" /> + </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 --> + +</div><!-- end mainscreen --> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html new file mode 100644 index 000000000..db078296f --- /dev/null +++ b/skins/larry/templates/messagepart.html @@ -0,0 +1,36 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +</head> +<body class="extwin"> + +<div id="header"> +<div id="topline"> + <div class="topright"> + <a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a> + </div> +</div> + +<div id="topnav"> + <roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" border="0" alt="Logo" /> +</div> + +<br style="clear:both" /> +</div> + +<div id="mainscreen"> + +<div id="partheader" class="uibox"> +<roundcube:object name="messagePartControls" class="headers-table" /> +</div> + +<div id="messagepartcontainer" class="uibox"> +<roundcube:object name="messagePartFrame" id="messagepartframe" style="width:100%; height:100%" /> +</div> + +</div> + +</body> +</html> diff --git a/skins/larry/templates/messageprint.html b/skins/larry/templates/messageprint.html new file mode 100644 index 000000000..d01c70bcd --- /dev/null +++ b/skins/larry/templates/messageprint.html @@ -0,0 +1,19 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<link rel="shortcut icon" href="/images/favicon.ico"/> +<link rel="stylesheet" type="text/css" href="/print.css" /> +</head> +<body> + +<div id="header"><roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" border="0" alt="Logo" /></div> + +<div id="printmessageframe"> +<roundcube:object name="messageHeaders" class="headers-table" /> +<roundcube:object name="messageAttachments" id="attachment-list" /> +<roundcube:object name="messageBody" id="messagebody" showImages="false" /> +</div> + +</body> +</html> diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 83cfe1341..bd90ae38e 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -25,5 +25,7 @@ </div> +<roundcube:include file="/includes/footer.html" /> + </body> </html> diff --git a/skins/larry/templates/settingsedit.html b/skins/larry/templates/settingsedit.html index e058ec6be..9311af788 100644 --- a/skins/larry/templates/settingsedit.html +++ b/skins/larry/templates/settingsedit.html @@ -18,5 +18,7 @@ </div> </div> +<roundcube:include file="/includes/footer.html" /> + </body> </html> diff --git a/skins/larry/ui.js b/skins/larry/ui.js new file mode 100644 index 000000000..274b71b78 --- /dev/null +++ b/skins/larry/ui.js @@ -0,0 +1,271 @@ +/** + * Roundcube functions for default skin interface + */ + + +function rcube_mail_ui() +{ + var popups = {}; + var popupconfig = { + forwardmenu: { editable:1 }, + searchmenu: { editable:1, callback:searchmenu }, + listoptions: { editable:1 }, + dragmessagemenu: { sticky:1 }, + groupmenu: { above:1 }, + mailboxmenu: { above:1 }, + composeoptionsmenu: { editable:1, overlap:1 }, + // toggle: #1486823, #1486930 + 'attachment-form': { editable:1, above:1, toggle:!bw.ie&&!bw.linux }, + 'upload-form': { editable:1, toggle:!bw.ie&&!bw.linux } + }; + + var me = this; + + // export public methods + this.init = init; + this.show_popup = show_popup; + this.set_searchmod = set_searchmod; + + /** + * + */ + function init() + { + if (rcmail.env.task == 'mail') { + rcmail.addEventListener('menu-open', function(){ show_popup('listoptions'); }); + rcmail.addEventListener('menu-save', save_listoptions); +// rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui); +// rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui); + rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); + $('#mailpreviewtoggle').click(function(e){ toggle_preview_pane(e); return false }); + + if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') { + init_messageview(); + } + } + + $(document.body).bind('mouseup', function(e){ + var config, obj, target = e.target; + for (var id in popups) { + obj = popups[id]; + config = popupconfig[id]; + if (obj.is(':visible') + && target.id != id+'link' + && !config.toggle + && (!config.editable || !target_overlaps(target, obj.get(0))) + && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0))) + ) { + var myid = id+''; + window.setTimeout(function(){ show_popupmenu(myid, false) }, 10); + } + } + }) + .bind('keyup', function(e){ + if (e.keyCode == 27) { + for (var id in popups) { + if (popups[id].is(':visible')) + show_popup(id, false); + } + } + }); + } + + /** + * Adjust UI objects of the mail view screen + */ + function init_messageview() + { + $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px'); + $('#message-objects div a').addClass('button'); + + if (!$('#attachment-list li').length) { + $('#messagecontent div.rightcol').hide(); + $('#messagecontent .leftcol').css('margin-right', '0'); + } + } + + /** + * Trigger for popup menus + */ + function show_popup(popup, show, config) + { + // auto-register menu object + if (config || !popupconfig[popup]) + popupconfig[popup] = $.extend(popupconfig[popup] || {}, config); + + var visible = show_popupmenu(popup, show), + config = popupconfig[popup]; + if (typeof config.callback == 'function') + config.callback(visible); + } + + /** + * Show/hide a specific popup menu + */ + function show_popupmenu(popup, show) + { + var obj = popups[popup], + config = popupconfig[popup], + ref = $('#'+popup+'link'), + above = config.above; + + if (!obj) { + obj = popups[popup] = $('#'+popup); + obj.appendTo(document.body); // move them to top for proper absolute positioning + } + + if (!obj || !obj.length) + return false; + + if (typeof show == 'undefined') + show = obj.is(':visible') ? false : true; + else if (config.toggle && show && obj.is(':visible')) + show = false; + + if (show && ref) { + var parent = ref.parent(), + win = $(window), + pos; + + if (parent.hasClass('dropbutton')) + ref = parent; + + pos = ref.offset(); + ref.offsetHeight = ref.outerHeight(); + if (!above && pos.top + ref.offsetHeight + obj.height() > win.height()) + above = true; + if (pos.left + obj.width() > win.width()) + pos.left = win.width() - obj.width() - 12; + + obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) }); + } + + obj[show?'show':'hide'](); + + // hide drop-down elements on buggy browsers + if (bw.ie6 && config.overlap) { + $('select').css('visibility', show?'hidden':'inherit'); + $('select', obj).css('visibility', 'inherit'); + } + + return show; + } + + /** + * + */ + function target_overlaps(target, elem) + { + while (target.parentNode) { + if (target.parentNode == elem) + return true; + target = target.parentNode; + } + return false; + } + + + function toggle_preview_pane(e) + { + var button = $(e.target); + var visible = !button.hasClass('enabled'); + + button.removeClass().addClass(visible ? 'enabled' : 'closed'); + +// rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) }); + } + + + /**** popup callbacks ****/ + + function searchmenu(show) + { + if (show && rcmail.env.search_mods) { + var n, all, + obj = popups['searchmenu'], + list = $('input:checkbox[name="s_mods[]"]', obj), + mbox = rcmail.env.mailbox, + mods = rcmail.env.search_mods; + + if (rcmail.env.task == 'mail') { + mods = mods[mbox] ? mods[mbox] : mods['*']; + all = 'text'; + } + else { + all = '*'; + } + + if (mods[all]) + list.map(function() { + this.checked = true; + this.disabled = this.value != all; + }); + else { + list.prop('disabled', false).prop('checked', false); + for (n in mods) + $('#s_mod_' + n).prop('checked', true); + } + } + } + + + function save_listoptions() + { + show_popupmenu('listoptions', false); + + var sort = $('input[name="sort_col"]:checked').val(), + ord = $('input[name="sort_ord"]:checked').val(), + thread = $('input[name="view"]:checked').val(), + cols = $('input[name="list_col[]"]:checked') + .map(function(){ return this.value; }).get(); + + rcmail.set_list_options(cols, sort, ord, thread == 'thread' ? 1 : 0); + } + + + function set_searchmod(elem) + { + var all, m, task = rcmail.env.task, + mods = rcmail.env.search_mods, + mbox = rcmail.env.mailbox; + + if (!mods) + mods = {}; + + if (task == 'mail') { + if (!mods[mbox]) + mods[mbox] = rcube_clone_object(mods['*']); + m = mods[mbox]; + all = 'text'; + } + else { //addressbook + m = mods; + all = '*'; + } + + if (!elem.checked) + delete(m[elem.value]); + else + m[elem.value] = 1; + + // mark all fields + if (elem.value != all) + return; + + $('input:checkbox[name="s_mods[]"]').map(function() { + if (this == elem) + return; + + this.checked = true; + if (elem.checked) { + this.disabled = true; + delete m[this.value]; + } + else { + this.disabled = false; + m[this.value] = 1; + } + }); + } +} + |