diff options
| -rw-r--r-- | skins/larry/images/buttons.png | bin | 8862 -> 25191 bytes | |||
| -rw-r--r-- | skins/larry/images/listicons.png | bin | 19464 -> 16444 bytes | |||
| -rw-r--r-- | skins/larry/includes/mailtoolbar.html | 71 | ||||
| -rw-r--r-- | skins/larry/mail.css | 137 | ||||
| -rw-r--r-- | skins/larry/settings.css | 100 | ||||
| -rw-r--r-- | skins/larry/styles.css | 74 | ||||
| -rw-r--r-- | skins/larry/templates/mail.html | 5 |
7 files changed, 368 insertions, 19 deletions
diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex c9c1637ad..c86f211f2 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png Binary files differindex d0b943621..08c098fe0 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html new file mode 100644 index 000000000..e97e135f5 --- /dev/null +++ b/skins/larry/includes/mailtoolbar.html @@ -0,0 +1,71 @@ +<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: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: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> +<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> +<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:endif /> +</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> + <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> + <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> + <roundcube:container name="messagemenu" id="messagemenu" /> + </ul> +</div> + +<roundcube:if condition="template:name == 'mail'" /> +<div id="markmessagemenu" class="popupmenu"> + <ul class="toolbarmenu"> + <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> + <li><roundcube:button command="mark" prop="unflagged" label="markunflagged" classAct="unflaggedlink active" class="unflaggedlink" /></li> + <roundcube:container name="markmenu" id="markmessagemenu" /> + </ul> +</div> +<roundcube:endif /> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index d59fa24ca..8097a95ef 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -30,7 +30,7 @@ #mailview-top { position: absolute; - top: 0; + top: 42px; left: 0; width: 100%; bottom: 28px; @@ -54,6 +54,7 @@ } #messagelistcontainer { + top: 0; bottom: 32px; overflow: auto; } @@ -72,12 +73,9 @@ } #mailboxlist li.mailbox { - background-position: 8px 2px; + position: relative; background-repeat: no-repeat; -} - -#mailboxlist li.virtual > a { - color: #aaa; + background-position: 6px 2px; } #mailboxlist li.mailbox a { @@ -85,6 +83,57 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + background-image: url(images/listicons.png); + background-repeat: no-repeat; + background-position: 6px 3px; +} + +#mailboxlist li.mailbox.selected > a { + background-position: 6px -21px; +} + +#mailboxlist li.inbox > a { + background-position: 6px -189px; +} + +#mailboxlist li.inbox.selected > a { + background-position: 6px -213px; +} + +#mailboxlist li.drafts > a { + background-position: 6px -238px; +} + +#mailboxlist li.drafts.selected > a { + background-position: 6px -262px; +} + +#mailboxlist li.sent > a { + background-position: 6px -286px; +} + +#mailboxlist li.sent.selected > a { + background-position: 6px -310px; +} + +#mailboxlist li.junk > a { + background-position: 6px -334px; +} + +#mailboxlist li.junk.selected > a { + background-position: 6px -358px; +} + +#mailboxlist li.trash > a { + background-position: 6px -382px; +} + +#mailboxlist li.trash.selected > a { + background-position: 6px -406px; +} + +#mailboxlist li.virtual > a { + color: #aaa; } #mailboxlist li.mailbox ul { @@ -93,23 +142,89 @@ } #mailboxlist li.mailbox ul li { - padding-left: 30px; + padding-left: 26px; +} + +#mailboxlist li.mailbox ul li a { + background-position: 6px -93px; +} + +#mailboxlist li.mailbox ul li.selected a { + background-position: 6px -117px; } #mailboxlist li.mailbox ul li:last-child { border-bottom: 0; } +#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; + cursor: pointer; +} + +#mailboxlist li.mailbox div.expanded { + background-position: -5px -170px; +} + +#mailboxlist li.mailbox ul li div.collapsed, +#mailboxlist li.mailbox ul li div.expanded { + left: 46px; + top: 16px; +} + +#mailboxlist li.mailbox .unreadcount { + position: absolute; + top: 4px; + right: 6px; + 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%); + 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; + -moz-box-shadow: inset 0 1px 1px 0 #536d72; + border-radius: 9px; + color: #fff; + text-align: center; + font-weight: bold; + text-shadow: none; +} + +#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%); + 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; + -moz-box-shadow: inset 0 1px 1px 0 #003645; +} + #searchfilter { width: 16em; } #messagetoolbar { position: absolute; - top: 0; + top: -6px; right: 0; - width: auto; + left: 15em; height: 40px; + text-align: right; } @@ -200,7 +315,7 @@ #messagelist tr td.status, #messagelist tr td.flag, #messagelist tr td.priority { - width: 18px; + width: 20px; padding: 4px 3px; } @@ -370,7 +485,7 @@ html.chrome #messagelist tr td.threads { #messagelist tr td.subject span.msgicon, #messagelist tr td.subject span.unreadchildren { background-position: 0 -1056px; - margin: 0 2px; + margin: 0 4px 0 0; } #messagelist tr td.subject span.replied { diff --git a/skins/larry/settings.css b/skins/larry/settings.css index dc46020e1..13c011587 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -41,3 +41,103 @@ border-radius: 4px 4px 0 0; } +#sections-table tbody td.section, +#settings-sections span.listitem a { + padding-left: 36px; + background: url(images/listicons.png) -100px 0 no-repeat; +} + +#settings-sections span.listitem a { + background-position: 6px -862px; +} + +#settings-sections span.selected a { + background-position: 6px -887px; +} + +#settings-sections span.preferences a { + background-position: 6px -431px; +} + +#settings-sections span.preferences.selected a { + background-position: 6px -455px; +} + +#settings-sections span.folders a, +#sections-table #rcmrowfolders td.section { + background-position: 6px 2px; +} + +#settings-sections span.folders.selected a, +#sections-table #rcmrowfolders.selected td.section { + background-position: 6px -22px; +} + +#settings-sections span.identities a { + background-position: 6px -478px; +} + +#settings-sections span.identities.selected a { + background-position: 6px -502px; +} + +#settings-sections span.about a { + background-position: -100px 0; +} + +#sections-table #rcmrowgeneral td.section { + background-position: 6px -573px; +} + +#sections-table #rcmrowgeneral.selected td.section { + background-position: 6px -598px; +} + +#sections-table #rcmrowmailbox td.section { + background-position: 6px -621px; +} + +#sections-table #rcmrowmailbox.selected td.section { + background-position: 6px -646px; +} + +#sections-table #rcmrowcompose td.section { + background-position: 6px -670px; +} + +#sections-table #rcmrowcompose.selected td.section { + background-position: 6px -695px; +} + +#sections-table #rcmrowmailview td.section { + background-position: 6px -718px; +} + +#sections-table #rcmrowmailview.selected td.section { + background-position: 6px -742px; +} + +#sections-table #rcmrowaddressbook td.section { + background-position: 6px -766px; +} + +#sections-table #rcmrowaddressbook.selected td.section { + background-position: 6px -791px; +} + +#sections-table #rcmrowserver td.section { + background-position: 6px -814px; +} + +#sections-table #rcmrowserver.selected td.section { + background-position: 6px -838px; +} + +#sections-table #rcmrowcalendar td.section { + background-position: 6px -526px; +} + +#sections-table #rcmrowcalendar.selected td.section { + background-position: 6px -550px; +} + diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 7dca2642d..d251adb8e 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -199,11 +199,11 @@ a.button.pressed { } .pagenav a.nextpage span.inner { - background-position: -8px -241px; + background-position: -30px -226px; } .pagenav a.lastpage span.inner { - background-position: -8px -256px; + background-position: -30px -211px; } .pagenav .countdisplay { @@ -222,11 +222,11 @@ a.iconbutton { } a.iconbutton.searchoptions { - background-position: -4px -363px; + background-position: -2px -304px; } a.iconbutton.reset { - background-position: -2px -384px; + background-position: -25px -303px; } @@ -685,5 +685,69 @@ table.propform td.title { #quicksearchbar #searchreset { position: absolute; top: 4px; - right: 4px; + right: 3px; } + + +/*** toolbar ***/ + +.toolbar a.button { + text-align: center; + font-size: 10px; + color: #555; + min-width: 55px; + max-width: 75px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 28px 2px 2px 2px; + text-shadow: 1px 1px 1px #eee; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + background: url(images/buttons.png) -100px 0 no-repeat transparent; + border: 0; +} + +.toolbar a.button.disabled { + opacity: 0.5; +} + +.toolbar a.button.checkmail { + background-position: center -370px; +} + +.toolbar a.button.compose { + background-position: center -410px; +} + +.toolbar a.button.reply { + background-position: center -450px; +} + +.toolbar a.button.reply-all { + background-position: center -490px; +} + +.toolbar a.button.forward { + background-position: center -530px; +} + +.toolbar a.button.delete { + background-position: center -570px; +} + +.toolbar a.button.markmessage, +.toolbar a.button.more { + background-position: center -730px; +} + +/*** popup menus ***/ + +.popupmenu { + display: none; +} + + + diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index d93df4d47..6a1164002 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -40,7 +40,7 @@ <!-- toolbar --> <div id="messagetoolbar"> -<!-- roundcube:include file="/includes/messagetoolbar.html" /--> +<roundcube:include file="/includes/mailtoolbar.html" /> </div> <div id="mailview-top"> @@ -65,8 +65,7 @@ <roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" content="&lt;" /> <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> - + </div> </div> </div><!-- end mailview-top --> |
