diff options
Diffstat (limited to 'skins/larry')
29 files changed, 1465 insertions, 1193 deletions
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index bfdd68127..f0ff357b3 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -14,7 +14,7 @@ position: absolute; top: 0; left: 0; - width: 220px; + width: 200px; bottom: 0; z-index: 2; } @@ -22,7 +22,7 @@ #addressview-right { position: absolute; top: 0; - left: 232px; + left: 212px; right: 0; bottom: 0; z-index: 3; @@ -49,14 +49,14 @@ position: absolute; top: 0; left: 0; - width: 280px; + width: 260px; bottom: 0; } #contacts-box { position: absolute; top: 0; - left: 292px; + left: 272px; right: 0; bottom: 0; } @@ -66,6 +66,7 @@ } #directorylist li a, +.treelist li.contactsearch a, #contacts-table .contact td.name { background-image: url(images/listicons.png); background-position: -100px 0; @@ -78,42 +79,66 @@ background-position: 6px -766px; } +#directorylist ul li.addressbook a { + background-position: 32px -766px; +} + +#directorylist ul ul li.addressbook a { + background-position: 58px -766px; +} + #directorylist li.addressbook.selected > a { + background-color: transparent; background-position: 6px -791px; } -#directorylist li.addressbook ul.groups li { - width: 100%; +#directorylist ul li.addressbook.selected > a { + background-position: 32px -791px; +} + +#directorylist ul ul li.addressbook.selected > a { + background-position: 58px -791px; } #directorylist li.contactgroup a { + background-position: 6px -1555px; +} + +#directorylist ul li.contactgroup a { background-position: 32px -1555px; } +#directorylist ul ul li.contactgroup a { + background-position: 58px -1555px; +} + +#directorylist ul ul ul li.contactgroup a { + background-position: 84px -1555px; +} + #directorylist li.contactgroup.selected a { background-position: 32px -1579px; } -#directorylist li.contactgroup input { - margin-left: 36px; +#directorylist ul ul li.contactgroup.selected a { + background-position: 58px -1579px; } -#directorylist li.contactsearch a { - background-position: 6px -1651px; +#directorylist ul ul ul li.contactgroup.selected a { + background-position: 84px -1579px; } -#directorylist li.contactsearch.selected a { - background-position: 6px -1675px; +.treelist li.contactsearch a { + background-position: 6px -1651px; } -#directorylist li.contactsearch input { - margin-left: 8px; +.treelist li.contactsearch.selected a { + background-position: 6px -1675px; } #directorylist li.addressbook div.collapsed, #directorylist li.addressbook div.expanded { top: 15px; - left: 20px; } #contacts-table .contact.readonly td { @@ -138,56 +163,25 @@ background: url(images/listicons.png) -2px -1180px no-repeat; } -/* This padding-left should be equal to the focused border-left + the focused padding-left */ -#contacts-table thead tr td:first-child, -#contacts-table tbody tr td:first-child { - border-left: 0; - padding-left: 36px; -} - -/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ -#contacts-table tbody tr.focused > td:first-child { - border-left: 2px solid #b0ccd7; - padding-left: 34px; -} - -#contacts-table tbody tr.selected.focused > td:first-child { - border-left-color: #9ec2d0; -} - #contacts-table .contact td.name { - background-position: 6px -1603px; -} - -#contacts-table .contact.focused td.name { background-position: 4px -1603px; } -#contacts-table .contact.selected td.name, -#contacts-table .contact.unfocused td.name { - background-position: 6px -1627px; - font-weight: bold; -} - -#contacts-table .contact.selected.focused td.name { +#contacts-table .contact.selected td.name { background-position: 4px -1627px; + font-weight: bold; } #contacts-table .group td.name { - background-position: 6px -1555px; -} - -#contacts-table .group.focused td.name { background-position: 4px -1555px; } -#contacts-table .group.selected td.name, -#contacts-table .group.unfocused td.name { - background-position: 6px -1579px; +#contacts-table .group.selected td.name { + background-position: 4px -1579px; font-weight: bold; } -#contacts-table .group.selected.focused td.name { +#contacts-table.focus .group.selected.focused td.name { background-position: 4px -1579px; } @@ -232,6 +226,8 @@ float: left; margin: 0 18px 20px 0; width: 112px; + border: 0; + padding: 0; } #contactpic { @@ -254,9 +250,7 @@ #contactpic.droptarget.hover { background-color: #d9ecf4; box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); } #contactpic.droptarget.active img { @@ -267,6 +261,10 @@ opacity: 0.05; } +#contactphoto .formlinks a[aria-disabled='true'] { + visibility: hidden; +} + #contacthead { border: 0; margin: 0 16em 1em 0; @@ -275,6 +273,10 @@ font-size: 12px; } +#contacthead > legend { + display: none; +} + form #contacthead { margin-right: 0; } diff --git a/skins/larry/editor_content.css b/skins/larry/editor_content.css deleted file mode 100644 index aabed07b5..000000000 --- a/skins/larry/editor_content.css +++ /dev/null @@ -1,31 +0,0 @@ -/* This file contains the CSS data for the editable area(iframe) of TinyMCE */ - -body, td, pre { - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - font-size: 12px; -} - -body { - background-color: #FFFFFF; - margin-left: 4px; - margin-right: 4px; - margin-top: 2px; -} - -pre -{ - margin: 0; - padding: 0; - white-space: -moz-pre-wrap !important; - white-space: pre-wrap !important; - white-space: pre; - word-wrap: break-word; /* IE (and Safari) */ -} - -blockquote -{ - padding-left: 5px; - border-left: #1010ff 2px solid; - margin-left: 5px; - width: 100%; -} diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex df4b3afd5..21298ab59 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 551639876..6a5edfdb1 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html index f421ec5b0..6cd3e62d1 100644 --- a/skins/larry/includes/footer.html +++ b/skins/larry/includes/footer.html @@ -6,6 +6,7 @@ var UI = new rcube_mail_ui(); $(document).ready(function(){ UI.set('errortitle', '<roundcube:label name="errortitle" quoting="javascript" />'); + UI.set('toggleoptions', '<roundcube:label name="toggleadvancedoptions" quoting="javascript" />'); UI.init(); }); diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html index 69e8b8aa6..179b86002 100644 --- a/skins/larry/includes/header.html +++ b/skins/larry/includes/header.html @@ -1,5 +1,6 @@ <div id="header"> -<div id="topline"> +<div id="topline" role="banner" aria-labelledby="aria-label-topnav"> + <h2 id="aria-label-topnav" class="voice"><roundcube:label name="arialabeltopnav" /></h2> <div class="topleft"> <roundcube:container name="topline-left" id="topline-left" /> <roundcube:button name="about" type="link" label="about" class="about-link" onclick="UI.show_about(this);return false" condition="!env:extwin" /> @@ -21,13 +22,14 @@ <roundcube:if condition="!env:extwin && !env:framed" /> <div id="topnav"> - <div id="taskbar" class="topright"> - <roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" /> - <roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" /> - <roundcube:container name="taskbar" id="taskbar" /> - <roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" /> - <roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" /> - <span class="minmodetoggle"></span> + <h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2> + <div id="taskbar" class="topright" role="navigation" aria-labelledby="aria-label-tasknav"> + <roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" /> + <roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" /> + <roundcube:container name="taskbar" id="taskbar" /> + <roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" /> + <roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" /> + <span class="minmodetoggle" role="presentation"></span> </div> <roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" alt="Logo" onclick="if(window.rcmail)rcmail.command('switch-task','mail')" /> </div> diff --git a/skins/larry/includes/links.html b/skins/larry/includes/links.html index ce9863a6c..a49e58826 100644 --- a/skins/larry/includes/links.html +++ b/skins/larry/includes/links.html @@ -1,4 +1,3 @@ -<meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> <meta name="viewport" content="" id="viewport" /> <link rel="shortcut icon" href="/images/favicon.ico"/> <link rel="stylesheet" type="text/css" href="/styles.css" /> diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html index ac08a3200..9d66763cd 100644 --- a/skins/larry/includes/mailtoolbar.html +++ b/skins/larry/includes/mailtoolbar.html @@ -3,11 +3,11 @@ <roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="reply" title="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="replyall" title="replytoallmessage" /> - <span class="dropbuttontip" id="replyallmenulink" onclick="UI.show_popup('replyallmenu');return false"></span> + <a href="#reply-all" class="dropbuttontip" id="replyallmenulink" onclick="UI.toggle_popup('replyallmenu',event);return false" aria-haspopup="true" aria-expanded="false" aria-owns="replyallmenu-menu" tabindex="0">Reply-all options</a> </span> <span class="dropbutton"> <roundcube:button command="forward" type="link" class="button forward disabled" classAct="button forward" classSel="button forward pressed" label="forward" title="forwardmessage" /> - <span class="dropbuttontip" id="forwardmenulink" onclick="UI.show_popup('forwardmenu');return false"></span> + <a href="#forward" class="dropbuttontip" id="forwardmenulink" onclick="UI.toggle_popup('forwardmenu',event);return false" aria-haspopup="true" aria-expanded="false" aria-owns="forwardmenu-menu" tabindex="0">Forwarding options</a> </span> <roundcube:button command="delete" type="link" class="button delete disabled" classAct="button delete" classSel="button delete pressed" label="delete" title="deletemessage" /> <roundcube:if condition="template:name == 'message'" /> @@ -15,44 +15,48 @@ <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" title="printmessage" /> <roundcube:endif /> <roundcube:container name="toolbar" id="mailtoolbar" /> -<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="mark" title="markmessages" onclick="UI.show_popup('markmessagemenu');return false" /> -<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="more" title="moreactions" onclick="UI.show_popup('messagemenu');return false" /> +<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="mark" title="markmessages" onclick="UI.toggle_popup('markmessagemenu',event);return false" aria-haspopup="true" aria-expanded="false" aria-owns="markmessagemenu-menu" /> +<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="more" title="moreactions" onclick="UI.toggle_popup('messagemenu',event);return false" aria-haspopup="true" aria-expanded="false" aria-owns="messagemenu-menu" /> -<div id="forwardmenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button command="forward-inline" 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> +<div id="forwardmenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-forwardmenu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3> + <ul id="forwardmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu"> + <roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /> + <roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" /> <roundcube:container name="forwardmenu" id="forwardmenu" /> </ul> </div> -<div id="replyallmenu" class="popupmenu"> - <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> +<div id="replyallmenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-replyallmenu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3> + <ul id="replyallmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu"> + <roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /> + <roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="replylistlink" classAct="replylistlink active" /> <roundcube:container name="replyallmenu" id="replyallmenu" /> </ul> </div> -<div id="messagemenu" class="popupmenu"> - <ul class="toolbarmenu iconized"> - <li><roundcube:button command="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /></li> - <li><roundcube:button command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /></li> - <li><roundcube:button command="edit" prop="new" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /></li> - <li><roundcube:button command="viewsource" label="viewsource" class="icon" classAct="icon active" innerclass="icon viewsource" /></li> - <li><roundcube:button command="move" label="moveto" class="icon" classAct="icon active" innerclass="icon move folder-selector-link" /></li> - <li><roundcube:button command="copy" label="copyto" class="icon" classAct="icon active" innerclass="icon copy folder-selector-link" /></li> - <li><roundcube:button command="open" label="openinextwin" target="_blank" class="icon" classAct="icon active" innerclass="icon extwin" /></li> +<div id="messagemenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-messagemenu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3> + <ul id="messagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-messagemenu"> + <roundcube:button type="link-menuitem" command="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /> + <roundcube:button type="link-menuitem" command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /> + <roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /> + <roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="icon" classAct="icon active" innerclass="icon viewsource" /> + <roundcube:button type="link-menuitem" command="move" label="moveto" class="icon" classAct="icon active" innerclass="icon move folder-selector-link" /> + <roundcube:button type="link-menuitem" command="copy" label="copyto" class="icon" classAct="icon active" innerclass="icon copy folder-selector-link" /> + <roundcube:button type="link-menuitem" command="open" label="openinextwin" target="_blank" class="icon" classAct="icon active" innerclass="icon extwin" /> <roundcube:container name="messagemenu" id="messagemenu" /> </ul> </div> -<div id="markmessagemenu" class="popupmenu"> - <ul class="toolbarmenu iconized"> - <li><roundcube:button command="mark" prop="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /></li> - <li><roundcube:button command="mark" prop="unread" label="markunread" classAct="icon active" class="icon" innerclass="icon unread" /></li> - <li><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="icon active" class="icon" innerclass="icon flagged" /></li> - <li><roundcube:button command="mark" prop="unflagged" label="markunflagged" classAct="icon active" class="icon" innerclass="icon unflagged" /></li> +<div id="markmessagemenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-markmessagemenu" class="voice"><roundcube:label name="arialabelmarkmessagesas" /></h3> + <ul id="markmessagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-markmessagemenu"> + <roundcube:button type="link-menuitem" command="mark" prop="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /> + <roundcube:button type="link-menuitem" command="mark" prop="unread" label="markunread" classAct="icon active" class="icon" innerclass="icon unread" /> + <roundcube:button type="link-menuitem" command="mark" prop="flagged" label="markflagged" classAct="icon active" class="icon" innerclass="icon flagged" /> + <roundcube:button type="link-menuitem" command="mark" prop="unflagged" label="markunflagged" classAct="icon active" class="icon" innerclass="icon unflagged" /> <roundcube:container name="markmenu" id="markmessagemenu" /> </ul> </div> diff --git a/skins/larry/includes/settingstabs.html b/skins/larry/includes/settingstabs.html index e62695848..d43e8f075 100644 --- a/skins/larry/includes/settingstabs.html +++ b/skins/larry/includes/settingstabs.html @@ -1,7 +1,9 @@ -<div id="settings-sections" class="uibox listbox"> -<h2 class="boxtitle"><roundcube:label name="settings" /></h2> +<div id="settings-sections" class="uibox listbox" role="navigation" aria-labelledby="aria-label-settingstabs"> +<h2 class="boxtitle" id="aria-label-settingstabs"><roundcube:label name="settings" /></h2> <div id="settings-tabs" class="scroller"> - <roundcube:object name="settingstabs" class="listitem" /> + <ul class="listing iconized"> + <roundcube:object name="settingstabs" class="listitem" tagname="li" /> + </ul> <roundcube:container name="tabs" id="settings-tabs" /> </div> </div> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index b9f24b8d0..7eb324254 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -14,7 +14,7 @@ position: absolute; top: 0; left: 0; - width: 220px; + width: 200px; bottom: 0; z-index: 2; } @@ -22,7 +22,7 @@ #mailview-right { position: absolute; top: 0; - left: 232px; + left: 212px; right: 0; bottom: 0; z-index: 3; @@ -38,6 +38,9 @@ left: 0; right: 0; bottom: 0px; +} + +html.ie #mailview-top { overflow: visible; /* fixes display issues of fixed list header in IE */ } @@ -92,6 +95,7 @@ html>/**/body #messagelist { background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); border-radius: 0 0 4px 4px; + white-space: nowrap; } #messagelistfooter.rightalign { @@ -133,227 +137,32 @@ a.iconbutton.threadmode.selected { background-position: -26px -497px; } -#mailboxlist li.mailbox { - position: relative; - background-repeat: no-repeat; - background-position: 6px 2px; -} - #mailboxlist > li:first-child { - border-radius: 4px 4px 0 0; border-top: 0; } -#mailboxlist li.mailbox a { - padding-left: 36px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - background-image: url(images/listicons.png); - background-repeat: no-repeat; - background-position: 6px 3px; +html.mozilla #mailboxlist > li:first-child { + border-radius: 4px 4px 0 0; } #mailboxlist li.mailbox.unread > a { padding-right: 36px; } -#mailboxlist li.mailbox.selected > a { - background-position: 6px -21px; -} - -#mailboxlist li.mailbox.inbox > a { - background-position: 6px -189px; -} - -#mailboxlist li.mailbox.inbox.selected > a { - background-position: 6px -213px; -} - -#mailboxlist li.mailbox.drafts > a { - background-position: 6px -238px; -} - -#mailboxlist li.mailbox.drafts.selected > a { - background-position: 6px -262px; -} - -#mailboxlist li.mailbox.sent > a { - background-position: 6px -286px; -} - -#mailboxlist li.mailbox.sent.selected > a { - background-position: 6px -310px; -} - -#mailboxlist li.mailbox.junk > a { - background-position: 6px -334px; -} - -#mailboxlist li.mailbox.junk.selected > a { - background-position: 6px -358px; -} - -#mailboxlist li.mailbox.trash > a { - background-position: 6px -382px; -} - -#mailboxlist li.mailbox.trash.selected > a { - background-position: 6px -406px; -} - -#mailboxlist li.mailbox.trash.empty > a { - background-position: 6px -1924px; -} - -#mailboxlist li.mailbox.trash.empty.selected > a { - background-position: 6px -1948px; -} - -#mailboxlist li.mailbox.archive > a { - background-position: 6px -1699px; -} - -#mailboxlist li.mailbox.archive.selected > a { - background-position: 6px -1723px; -} - -#mailboxlist li.mailbox ul li.drafts > a { - background-position: 23px -238px; -} - -#mailboxlist li.mailbox ul li.drafts.selected > a { - background-position: 23px -262px; -} - -#mailboxlist li.mailbox ul li.sent > a { - background-position: 23px -286px; -} - -#mailboxlist li.mailbox ul li.sent.selected > a { - background-position: 23px -310px; -} - -#mailboxlist li.mailbox ul li.junk > a { - background-position: 23px -334px; -} - -#mailboxlist li.mailbox ul li.junk.selected > a { - background-position: 23px -358px; -} - -#mailboxlist li.mailbox ul li.trash > a { - background-position: 23px -382px; -} - -#mailboxlist li.mailbox ul li.trash.selected > a { - background-position: 23px -406px; -} - -#mailboxlist li.mailbox ul li.trash.empty > a { - background-position: 23px -1924px; -} - -#mailboxlist li.mailbox ul li.trash.empty.selected > a { - background-position: 23px -1948px; -} - -#mailboxlist li.mailbox ul li.archive > a { - background-position: 23px -1699px; -} - -#mailboxlist li.mailbox ul li.archive.selected > a { - background-position: 23px -1723px; -} - #mailboxlist li.unread { font-weight: bold; } -#mailboxlist li.virtual > a { - color: #aaa; -} - #mailboxlist li.recent > a { color: #017cb4; } -#mailboxlist li.mailbox div.treetoggle { - top: 13px; - left: 19px; -} - -#mailboxlist li.mailbox ul li:last-child { - border-bottom: 0; -} - -/* nested mailboxes */ - -#mailboxlist li.mailbox ul { - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid #bbd3da; -} - -#mailboxlist li.mailbox ul li a { - padding-left: 52px; /* 36 + 1 x 16 */ - background-position: 22px -93px; /* 6 + 1 x 16 */ -} -#mailboxlist li.mailbox ul li.selected > a { - background-position: 22px -117px; -} -#mailboxlist li.mailbox ul li div.treetoggle { - left: 33px; - top: 14px; -} - -#mailboxlist li.mailbox ul ul li.mailbox a { - padding-left: 68px; /* 2x */ - background-position: 38px -93px; -} -#mailboxlist li.mailbox ul ul li.selected > a { - background-position: 38px -117px; -} -#mailboxlist li.mailbox ul ul li div.treetoggle { - left: 48px; -} - -#mailboxlist li.mailbox ul ul ul li.mailbox a { - padding-left: 84px; /* 3x */ - background-position: 54px -93px; -} -#mailboxlist li.mailbox ul ul ul li.selected > a { - background-position: 54px -117px; -} -#mailboxlist li.mailbox ul ul ul li div.treetoggle { - left: 64px; -} - -#mailboxlist li.mailbox ul ul ul ul li.mailbox a { - padding-left: 100px; /* 4x */ - background-position: 70px -93px; -} -#mailboxlist li.mailbox ul ul ul ul li.selected > a { - background-position: 70px -117px; -} -#mailboxlist li.mailbox ul ul ul ul li div.treetoggle { - left: 80px; -} - -/* indent folders on levels > 4 */ -#mailboxlist li.mailbox ul ul ul ul ul li { - padding-left: 16px; -} -#mailboxlist li.mailbox ul ul ul ul ul li div.treetoggle { - left: 96px; -} - #mailboxlist li.mailbox .unreadcount { position: absolute; top: 3px; right: 6px; min-width: 1.8em; + line-height: 15px; padding: 2px 4px; background: #82acb5; background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%); @@ -362,9 +171,7 @@ a.iconbutton.threadmode.selected { 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; - -moz-box-shadow: inset 0 1px 1px 0 #536d72; border-radius: 9px; color: #fff; text-align: center; @@ -380,9 +187,7 @@ a.iconbutton.threadmode.selected { 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; - -moz-box-shadow: inset 0 1px 1px 0 #003645; } #mailboxlist li.mailbox.recent > a .unreadcount { @@ -393,9 +198,7 @@ a.iconbutton.threadmode.selected { background: -ms-linear-gradient(top, #017cb4 0%, #006ca4 100%); background: linear-gradient(top, #017cb4 0%, #006ca4 100%); box-shadow: inset 0 1px 1px 0 #005080; - -o-box-shadow: inset 0 1px 1px 0 #005080; -webkit-box-shadow: inset 0 1px 1px 0 #005080; - -moz-box-shadow: inset 0 1px 1px 0 #005080; } #searchfilter { @@ -437,7 +240,7 @@ a.iconbutton.threadmode.selected { #mailpreviewtoggle { display: block; position: absolute; - top: 6px; + top: 7px; right: 4px; width: 20px; height: 18px; @@ -459,66 +262,54 @@ table.messagelist.fixedcopy { z-index: 2; } -.messagelist thead td:first-child { +.messagelist thead th:first-child { border-radius: 4px 0 0 0; /* for Chrome */ } -.messagelist tr td.attachment, -.messagelist tr td.threads, -.messagelist tr td.status, -.messagelist tr td.flag, -.messagelist tr td.priority { +.messagelist tr > .attachment, +.messagelist tr > .threads, +.messagelist tr > .status, +.messagelist tr > .flag, +.messagelist tr > .priority { width: 20px; - padding: 2px 3px; -} - -.webkit .messagelist tr td.attachment, -.webkit .messagelist tr td.threads, -.webkit .messagelist tr td.status, -.webkit .messagelist tr td.flag, -.webkit .messagelist tr td.priority { - width: 26px; + padding: 2px 3px !important; } -.messagelist tr td.threads { +.messagelist tr > .threads { width: 26px; } -.webkit .messagelist tr td.threads { - width: 30px; -} - -.messagelist tr td.threads, -.messagelist tr td.threads + td { +.messagelist tr > .threads + td, +.messagelist tr > .threads + th { border-left: 0; } -.messagelist tr td.size { +.messagelist tr > .size { width: 60px; text-align: right; } -.messagelist thead tr td.size { +.messagelist thead tr th.size { text-align: left; } -.messagelist tr td.fromto, -.messagelist tr td.from, -.messagelist tr td.to, -.messagelist tr td.cc, -.messagelist tr td.replyto { +.messagelist tr > .fromto, +.messagelist tr > .from, +.messagelist tr > .to, +.messagelist tr > .cc, +.messagelist tr > .replyto { width: 200px; } -.messagelist tr td.date { +.messagelist tr > .date { width: 155px; } -.messagelist tr td.folder { +.messagelist tr > .folder { width: 135px; } -.messagelist tr td.hidden { +.messagelist tr > .hidden { display: none; } @@ -535,19 +326,22 @@ table.messagelist.fixedcopy { /* background-color: #fff; */ } +.messagelist tr.flagged th, .messagelist tr.flagged td, .messagelist tr.flagged td a { color: #f30; } -.messagelist thead tr td.sortedASC a, -.messagelist thead tr td.sortedDESC a { +.messagelist thead tr th.sortedASC a, +.messagelist thead tr th.sortedDESC a { color: #004458; text-decoration: underline; - background: url(images/listicons.png) right -912px no-repeat; + background-image: url(images/listicons.png); + background-repeat: no-repeat; + background-position: right -912px; } -.messagelist thead tr td.sortedASC a { +.messagelist thead tr th.sortedASC a { background-position: right -944px; } @@ -569,39 +363,41 @@ table.messagelist.fixedcopy { cursor: pointer; } -.messagelist tr td.flag span, -.messagelist tr td.status span, -.messagelist tr td.attachment span, -.messagelist tr td.priority span { +.messagelist tr > .flag span, +.messagelist tr > .status span, +.messagelist tr > .attachment span, +.messagelist tr > .priority span { display: block; width: 20px; + text-indent: -5000px; + overflow: hidden; } .messagelist tr td div.collapsed, .messagelist tr td div.expanded, -.messagelist tr td.threads div.listmenu, -.messagelist tr td.attachment span.attachment, -.messagelist tr td.attachment span.report, -.messagelist tr td.priority span.priority, -.messagelist tr td.priority span.prio1, -.messagelist tr td.priority span.prio2, -.messagelist tr td.priority span.prio3, -.messagelist tr td.priority span.prio4, -.messagelist tr td.priority span.prio5, -.messagelist tr td.flag span.flagged, -.messagelist tr td.flag span.unflagged, -.messagelist tr td.flag span.unflagged:hover, -.messagelist tr td.status span.status, -.messagelist tr td.status span.msgicon, -.messagelist tr td.status span.deleted, -.messagelist tr td.status span.unread, -.messagelist tr td.status span.unreadchildren, -.messagelist tr td.subject span.msgicon, -.messagelist tr td.subject span.deleted, -.messagelist tr td.subject span.unread, -.messagelist tr td.subject span.replied, -.messagelist tr td.subject span.forwarded, -.messagelist tr td.subject span.unreadchildren { +.messagelist tr > .threads .listmenu, +.messagelist tr > .attachment span.attachment, +.messagelist tr > .attachment span.report, +.messagelist tr > .priority span.priority, +.messagelist tr > .priority span.prio1, +.messagelist tr > .priority span.prio2, +.messagelist tr > .priority span.prio3, +.messagelist tr > .priority span.prio4, +.messagelist tr > .priority span.prio5, +.messagelist tr > .flag span.flagged, +.messagelist tr > .flag span.unflagged, +.messagelist tr > .flag span.unflagged:hover, +.messagelist tr > .status span.status, +.messagelist tr > .status span.msgicon, +.messagelist tr > .status span.deleted, +.messagelist tr > .status span.unread, +.messagelist tr > .status span.unreadchildren, +.messagelist tr > .subject span.msgicon, +.messagelist tr > .subject span.deleted, +.messagelist tr > .subject span.unread, +.messagelist tr > .subject span.replied, +.messagelist tr > .subject span.forwarded, +.messagelist tr > .subject span.unreadchildren { display: inline-block; vertical-align: middle; height: 18px; @@ -614,16 +410,16 @@ table.messagelist.fixedcopy { background-position: 0 -996px; } -.messagelist thead tr td.attachment span.attachment { - background-position: -24px -997px; +.messagelist thead tr th.attachment span.attachment { + background-position: -24px -996px; } .messagelist tbody tr td.attachment span.report { background-position: -24px -1116px; } -.messagelist thead tr td.priority span.priority { - background-position: -24px -1845px; +.messagelist thead tr th.priority span.priority { + background-position: -25px -1845px; } .messagelist tr td.priority span.prio5 { @@ -646,15 +442,15 @@ table.messagelist.fixedcopy { background-position: 0 -1036px; } -.messagelist thead tr td.flag span.flagged { - background-position: -22px -1036px; +.messagelist thead tr th.flag span.flagged { + background-position: -22px -1037px; } -.messagelist tr td.status span.msgicon:hover { - background-position: -23px -1056px; +.messagelist tr:hover td.status span.msgicon { + background-position: -23px -1057px; } -.messagelist tr td.flag span.unflagged:hover { +.messagelist tr:hover td.flag span.unflagged { background-position: -23px -1076px; } @@ -688,19 +484,19 @@ table.messagelist.fixedcopy { } */ .messagelist tr td.status span.deleted, -.messagelist tr td.status span.deleted:hover, +.messagelist tr:hover td.status span.deleted, .messagelist tr td.subject span.deleted { - background-position: -22px -1096px; + background-position: -21px -1096px; } .messagelist tr td.status span.status, .messagelist tr td.status span.unread, .messagelist tr td.subject span.unread, .messagelist tr td.status span.unread:hover { - background-position: 0 -1016px; + background-position: 0 -1017px; } -.messagelist thead tr td.status span.status { +.messagelist thead tr th.status span.status { background-position: -23px -1017px; } @@ -714,13 +510,23 @@ table.messagelist.fixedcopy { cursor: pointer; } -.messagelist tr td.threads div.listmenu { - background-position: 0 -976px; +.messagelist tr th.threads .listmenu { + background-position: 4px -972px; cursor: pointer; - width: 26px; + width: 24px; + height: 21px; + overflow: hidden; + text-indent: -5000px; + margin: -3px -5px -2px -6px; + padding: 3px 5px 2px 6px; } -.messagelist thead tr td.subject, +.messagelist tr th.threads .listmenu:focus { + background-color: rgba(73,180,210,0.7); + outline: none; +} + +.messagelist thead tr th.subject, .messagelist tbody tr td.subject { width: 99%; white-space: nowrap; @@ -763,7 +569,7 @@ table.messagelist.fixedcopy { #messagecontframe { border: 0; - border-radius: 4px 4px 0 0; + border-radius: 4px; } #messagecontent { @@ -812,7 +618,7 @@ h2.subject { h3.subject { font-size: 14px; - margin: 0 12em 0 0; + margin: 0 15em 0 0; padding: 8px 8px 4px 8px; white-space: nowrap; overflow: hidden; @@ -904,6 +710,16 @@ h3.subject { border-radius: 3px 0 0 0; /* for Opera */ } +.moreheaderstoggle:focus { + background: #f2f2f2; + background: -moz-linear-gradient(left, #66bcd9 0, #49b3d2 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0,#66bcd9), color-stop(100%,#49b3d2)); + background: -o-linear-gradient(left, #66bcd9 0, #49b3d2 100%); + background: -ms-linear-gradient(left, #66bcd9 0, #49b3d2 100%); + background: linear-gradient(left, #66bcd9 0, #49b3d2 100%); + border-right-color: #149cc5; +} + .moreheaderstoggle .iconlink { display: inline-block; position: absolute; @@ -946,10 +762,8 @@ div.hide-headers { 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); + -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1); } #headers-source { @@ -1036,7 +850,6 @@ div.hide-headers { } #messageheader .pagenav .countdisplay { - min-width: 0; padding-right: 0.5em; white-space: nowrap; } @@ -1102,16 +915,11 @@ div.message-partheaders { border-top: 0; } -div.message-part pre, -div.message-htmlpart pre, div.message-part div.pre { margin: 0; padding: 0; font-family: monospace; font-size: 12px; - white-space: -moz-pre-wrap !important; - white-space: pre-wrap !important; - white-space: pre; } div.message-part span.sig { @@ -1123,8 +931,10 @@ div.message-part blockquote { border-left: 2px solid blue; border-right: 2px solid blue; background-color: #F6F6F6; - margin: 2px 0 2px 0; - padding: 1px 8px 1px 10px; + margin: 2px 0; + padding: 0 0.4em; + overflow: hidden; + text-overflow: ellipsis; } div.message-part blockquote blockquote { @@ -1253,14 +1063,14 @@ div.message-partheaders .headers-table td.header { position: absolute; top: 0; left: 0; - width: 250px; + width: 200px; bottom: 0; } #composeview-right { position: absolute; top: 0; - left: 262px; + left: 212px; right: 0; bottom: 0; } @@ -1273,21 +1083,8 @@ div.message-partheaders .headers-table td.header { bottom: 0; } -#composequicksearch { - position: relative; - padding: 4px; - background: #c7e3ef; -} - -#composequicksearch .searchbox input { - width: 100%; - height: 26px; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#composequicksearch #searchmenulink { - width: 15px; +#compose-contacts .listsearchbox { + display: block; } #compose-contacts #directorylist { @@ -1318,13 +1115,19 @@ div.message-partheaders .headers-table td.header { margin-left: 0.5em; } -#compose-contacts li a, #contacts-table td { - background: url(images/listicons.png) -100px 0 no-repeat; +#compose-contacts li a, +#contacts-table td { + background-image: url(images/listicons.png); + background-position: -100px 0; + background-repeat: no-repeat; overflow: hidden; - padding-left: 36px; text-overflow: ellipsis; } +#compose-contacts li a { + padding-left: 36px; +} + #contacts-table td.contactgroup a { color: #376572; text-decoration: none; @@ -1346,6 +1149,7 @@ div.message-partheaders .headers-table td.header { background-position: 6px -766px; } +#compose-contacts li.addressbook a:focus, #compose-contacts li.addressbook.selected a { background-position: 6px -791px; } @@ -1354,7 +1158,6 @@ div.message-partheaders .headers-table td.header { background-position: 6px -1555px; } -#contacts-table tr.unfocused td.contactgroup, #contacts-table tr.selected td.contactgroup { background-position: 6px -1579px; } @@ -1363,7 +1166,6 @@ div.message-partheaders .headers-table td.header { background-position: 6px -1603px; } -#contacts-table tr.unfocused td.contact, #contacts-table tr.selected td.contact { background-position: 6px -1627px; } @@ -1443,8 +1245,6 @@ div.message-partheaders .headers-table td.header { .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 { @@ -1457,9 +1257,7 @@ div.message-partheaders .headers-table td.header { white-space: normal; border-top: 1px solid #dfdfdf; box-shadow: inset 0 1px 0 0 #fff; - -o-box-shadow: inset 0 1px 0 0 #fff; -webkit-box-shadow: inset 0 1px 0 0 #fff; - -moz-box-shadow: inset 0 1px 0 0 #fff; } .composeoption { @@ -1514,17 +1312,13 @@ div.message-partheaders .headers-table td.header { font-size: 9pt; outline: none; box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); - -moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); - -o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); } #composebody:active, #composebody:focus { box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); - -moz-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); - -o-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); } #compose-attachments { @@ -1551,17 +1345,13 @@ div.message-partheaders .headers-table td.header { #compose-attachments.droptarget.active { border-color: #019bc6; box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); - -moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); -webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); - -o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); } #compose-attachments.droptarget.hover { background-color: #d9ecf4; box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); } #composeview-bottom .formbuttons.floating { @@ -1572,16 +1362,13 @@ div.message-partheaders .headers-table td.header { padding-bottom: 8px; } -.defaultSkin table.mceLayout, -.defaultSkin table.mceLayout tr.mceLast td { - border: 0 !important; -} - -.defaultSkin td.mceToolbar { +#composebodycontainer .mce-tinymce { border: 0 !important; + margin-top: 1px; } -.defaultSkin table.mceLayout tr.mceFirst td { +#composebodycontainer .mce-panel { + border-color: #ccc !important; background: #f0f0f0; } diff --git a/skins/larry/print.css b/skins/larry/print.css index a56c9b938..22d6c5288 100644 --- a/skins/larry/print.css +++ b/skins/larry/print.css @@ -91,16 +91,11 @@ 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) */ + font-size: 12px; } div.message-part blockquote { @@ -108,8 +103,8 @@ div.message-part blockquote { 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; + margin: 2px 0; + padding: 0 0.4em; } div.message-part blockquote blockquote { diff --git a/skins/larry/settings.css b/skins/larry/settings.css index 675ef9973..51bf12f88 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -45,7 +45,7 @@ #preferences-frame { border: 0; - border-radius: 4px 4px 0 0; + border-radius: 4px; } #preferences-details fieldset.advanced legend { @@ -70,7 +70,7 @@ width: 20px; height: 18px; background: url('images/listicons.png') 0 -1157px no-repeat; - text-indent: 1000px; + text-indent: -5000px; overflow: hidden; } @@ -78,9 +78,10 @@ background-position: -24px -1137px; } -#sections-table tbody td.section, -#settings-sections span.listitem a, -#settings-sections span.tablink a { +#sections-table tbody td, +#sections-table .listitem span, +#settings-sections .listitem a, +#settings-sections .tablink a { padding-left: 36px; background-image: url(images/listicons.png); background-position: -100px 0; @@ -88,120 +89,144 @@ } /* note: support span.tablink because this is used by plugins */ -#settings-sections span.listitem a, -#settings-sections span.tablink a { +#settings-sections .listitem a, +#settings-sections .tablink a { background-position: 6px -862px; } -#settings-sections span.selected a, -#settings-sections span.tablink.selected a { +#settings-sections .selected a, +#settings-sections .tablink.selected a { background-position: 6px -887px; } -#settings-sections span.preferences a { +#settings-sections .preferences a { background-position: 6px -431px; } -#settings-sections span.preferences.selected a { +#settings-sections .preferences.selected a { background-position: 6px -455px; } -#settings-sections span.folders a, -#sections-table #rcmrowfolders td.section { +#settings-sections .folders a { background-position: 6px 2px; } -#settings-sections span.folders.selected a, -#sections-table #rcmrowfolders.selected td.section { +#settings-sections .folders.selected a { background-position: 6px -22px; } -#settings-sections span.identities a { +#sections-table #rcmrowfolders .section { + background-position: 4px 2px; +} + +#sections-table #rcmrowfolders.selected .section { + background-position: 4px -22px; +} + +#settings-sections .identities a { background-position: 6px -478px; } -#settings-sections span.identities.selected a { +#settings-sections .identities.selected a { background-position: 6px -502px; } -#settings-sections span.filter a { +#settings-sections .filter a { background-position: 6px -1746px; } -#settings-sections span.filter.selected a { +#settings-sections .filter.selected a { background-position: 6px -1770px; } -#settings-sections span.password a { +#settings-sections .password a { background-position: 6px -1795px; } -#settings-sections span.password.selected a { +#settings-sections .password.selected a { background-position: 6px -1819px; } -#settings-sections span.responses a { +#settings-sections .responses a { background-position: 6px -1972px; } -#settings-sections span.responses.selected a { +#settings-sections .responses.selected a { background-position: 6px -1996px; } -#sections-table #rcmrowgeneral td.section { - background-position: 6px -573px; +#sections-table #rcmrowgeneral .section { + background-position: 4px -573px; +} + +#sections-table #rcmrowgeneral.selected .section { + background-position: 4px -598px; +} + +#sections-table #rcmrowmailbox .section { + background-position: 4px -621px; +} + +#sections-table #rcmrowmailbox.selected .section { + background-position: 4px -646px; } -#sections-table #rcmrowgeneral.selected td.section { - background-position: 6px -598px; +#sections-table #rcmrowcompose .section { + background-position: 4px -670px; } -#sections-table #rcmrowmailbox td.section { - background-position: 6px -621px; +#sections-table #rcmrowcompose.selected .section { + background-position: 4px -695px; } -#sections-table #rcmrowmailbox.selected td.section { - background-position: 6px -646px; +#sections-table #rcmrowmailview .section { + background-position: 4px -718px; } -#sections-table #rcmrowcompose td.section { - background-position: 6px -670px; +#sections-table #rcmrowmailview.selected .section { + background-position: 4px -742px; } -#sections-table #rcmrowcompose.selected td.section { - background-position: 6px -695px; +#sections-table #rcmrowaddressbook .section { + background-position: 4px -766px; } -#sections-table #rcmrowmailview td.section { - background-position: 6px -718px; +#sections-table #rcmrowaddressbook.selected .section { + background-position: 4px -791px; } -#sections-table #rcmrowmailview.selected td.section { - background-position: 6px -742px; +#sections-table #rcmrowserver .section { + background-position: 4px -814px; } -#sections-table #rcmrowaddressbook td.section { - background-position: 6px -766px; +#sections-table #rcmrowserver.selected .section { + background-position: 4px -838px; } -#sections-table #rcmrowaddressbook.selected td.section { - background-position: 6px -791px; +#sections-table #rcmrowcalendar .section { + background-position: 4px -526px; } -#sections-table #rcmrowserver td.section { - background-position: 6px -814px; +#sections-table #rcmrowcalendar.selected .section { + background-position: 4px -550px; } -#sections-table #rcmrowserver.selected td.section { - background-position: 6px -838px; +#folderslist .boxtitle a.iconbutton.search { + background-position: -2px -317px; + cursor: pointer; + position: absolute; + right: 8px; + top: 8px; + width: 16px; } -#sections-table #rcmrowcalendar td.section { - background-position: 6px -526px; +#folderslist .listsearchbox + .scroller { + top: 34px; } -#sections-table #rcmrowcalendar.selected td.section { - background-position: 6px -550px; +.listsearchbox select { + width: 100%; + margin: 0 0 4px 0; } #folderslist, @@ -237,26 +262,22 @@ bottom: 0; } -#subscription-table { - table-layout: fixed; -} - -#subscription-table tr.root td { +#subscription-table li.root { font-size: 5%; + line-height: 5px; height: 5px; padding: 2px; } -#subscription-table td.name { - width: 85%; - overflow: hidden; - text-overflow: ellipsis; +#subscription-table li input { + position: absolute; + right: 8px; + top: 4px; + margin-right: 0; } -#subscription-table td.subscribed { - min-width: 30px; - padding: 3px 12px 3px 3px; - text-align: right; +#subscription-table li a { + padding-right: 28px; } .skinselection { diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 111049f8b..1e4035070 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -35,6 +35,30 @@ img { border: 0; } +.voice { + position: absolute; + border: 0; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; +} + +html.mozilla select { + padding: 2px 1px; +} + +input, +textarea, +select, +button { + font-family: inherit; + font-size: inherit; + vertical-align: middle; +} + input[type="text"], input[type="password"], textarea { @@ -43,25 +67,24 @@ textarea { border: 1px solid #b2b2b2; border-radius: 4px; box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); - -moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); - -o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); } input[type="text"]:focus, input[type="password"]:focus, -input[type="text"]:required, -input[type="password"]:required, input.button:focus, textarea:focus { border-color: #4787b1; box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); outline: none; } +input[type="text"]:required, +input[type="password"]:required { + border-color: #4787b1; +} + input.placeholder, textarea.placeholder { color: #aaa; @@ -72,8 +95,7 @@ textarea.placeholder { } /* fixes vertical alignment of checkboxes and labels */ -label input, -label span { +label input + span { vertical-align: middle; } @@ -94,9 +116,7 @@ input.button { background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); - -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); - -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); text-decoration: none; outline: none; } @@ -115,9 +135,7 @@ input.button { background: -ms-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* IE10+ */ background: linear-gradient(top, #7b7b7b 0%, #606060 100%); /* W3C */ box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; - -o-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; -webkit-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; - -moz-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; } .formbuttons input.button:hover, @@ -127,9 +145,7 @@ input.button.mainaction:focus { color: #f2f2f2; border-color: #465864; box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; - -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; - -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; } .formbuttons input.button:active { @@ -152,9 +168,7 @@ input.button.mainaction { background: -ms-linear-gradient(top, #505050 0%, #2a2e31 100%); background: linear-gradient(top, #505050 0%, #2a2e31 100%); box-shadow: inset 0 1px 0 0 #777; - -moz-box-shadow: inset 0 1px 0 0 #777; -webkit-box-shadow: inset 0 1px 0 0 #777; - -o-box-shadow: inset 0 1px 0 0 #777; } input.button.mainaction:active { @@ -195,9 +209,7 @@ a.button, background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); - -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); - -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); text-decoration: none; } @@ -210,9 +222,7 @@ a.button:focus, input.button:focus { border-color: #4fadd5; box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); - -moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); -webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); - -o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); outline: none; } @@ -229,14 +239,11 @@ input.button.disabled:hover, input.button[disabled]:hover { border-color: #c6c6c6; box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); - -o-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); -webkit-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); - -moz-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); } a.button.disabled span.inner { opacity: 0.4; - filter: alpha(opacity=40); } .buttongroup a.button { @@ -245,9 +252,7 @@ a.button.disabled span.inner { border-radius: 0; background: none; box-shadow: none; - -o-box-shadow: none; -webkit-box-shadow: none; - -moz-box-shadow: none; } .buttongroup a.button.first, @@ -283,9 +288,7 @@ input.button:active { background: -ms-linear-gradient(top, #d8d8d8 0%, #bababa 100%); background: linear-gradient(top, #d8d8d8 0%, #bababa 100%); box-shadow: 0 1px 1px 0 #999; - -o-box-shadow: 0 1px 1px 0 #999; -webkit-box-shadow: 0 1px 1px 0 #999; - -moz-box-shadow: 0 1px 1px 0 #999; } .pagenav.dark a.button.pressed { @@ -305,13 +308,22 @@ input.button:active { background: -o-linear-gradient(top, #909090 0%, #858585 100%); background: -ms-linear-gradient(top, #909090 0%, #858585 100%); background: linear-gradient(top, #909090 0%, #858585 100%); - -webkit-box-shadow: inset 0 1px 2px 0 #555; - -moz-box-shadow: inset 0 1px 2px 0 #555; box-shadow: inset 0 1px 2px 0 #555; + -webkit-box-shadow: inset 0 1px 2px 0 #555; border-right-color: #555; border-left-color: #555; } +.buttongroup a.button:focus, +.buttongroup a.button.selected:focus { + background: #f2f2f2; + background: -moz-linear-gradient(top, #49b3d2 0, #66bcd9 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#49b3d2), color-stop(100%,#66bcd9)); + background: -o-linear-gradient(top, #49b3d2 0, #66bcd9 100%); + background: -ms-linear-gradient(top, #49b3d2 0, #66bcd9 100%); + background: linear-gradient(top, #49b3d2 0, #66bcd9 100%); +} + .pagenav a.button { padding: 1px 3px; height: 16px; @@ -429,15 +441,19 @@ a.iconbutton { a.iconbutton.disabled { opacity: 0.4; - filter: alpha(opacity=40); cursor: default; } +a.iconbutton.searchicon, a.iconbutton.searchoptions { width: 24px; background-position: -2px -317px; } +a.iconbutton.searchicon { + width: 15px; +} + a.iconbutton.reset { width: 24px; background-position: -25px -317px; @@ -615,10 +631,8 @@ a.iconlink.upload { background: -ms-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); background: linear-gradient(to bottom, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); - -moz-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; - -webkit-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; - -o-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; + -webkit-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; } #messagestack div:after { @@ -666,6 +680,11 @@ a.iconlink.upload { background: url(images/ajaxloader_dark.gif) 0 4px no-repeat; } +#messagestack div.voice { + position: absolute; + top: -1000px; +} + #messagestack div a { color: #94c0da; } @@ -822,7 +841,6 @@ a.iconlink.upload { .minimal #topline:hover { top: 0px; opacity: 0.94; - filter: alpha(opacity=94); -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; @@ -894,9 +912,7 @@ a.iconlink.upload { white-space: nowrap; border: 1px solid #777; box-shadow: 0 1px 5px 0 #333; - -moz-box-shadow: 0 1px 5px 0 #333; -webkit-box-shadow: 0 1px 5px 0 #333; - -o-box-shadow: 0 1px 5px 0 #333; z-index: 200; white-space: nowrap; text-shadow: 0px 1px 1px #000; @@ -945,6 +961,13 @@ a.iconlink.upload { background: url(images/buttons.png) -1000px 0 no-repeat; } +#taskbar a:focus { + color: #fff; + text-shadow: 0px 1px 1px #666; + background-color: rgba(73,180,210,0.7); + outline: none; +} + #taskbar a.button-selected { color: #3cf; background-color: #2c2c2c; @@ -1018,6 +1041,14 @@ a.iconlink.upload { bottom: 0; } +#mainscreen.offset { + top: 132px; +} + +#mainscreen .offset { + top: 42px; +} + .minimal #mainscreen { top: 62px; } @@ -1030,12 +1061,8 @@ a.iconlink.upload { top: 40px; } -#mainscreen.offset { - top: 132px; -} - -#mainscreen .offset { - top: 42px; +.extwin #mainscreen.offset { + top: 86px; } .uibox { @@ -1043,9 +1070,7 @@ a.iconlink.upload { border-radius: 4px; overflow: hidden; box-shadow: 0 0 2px #999; - -o-box-shadow: 0 0 2px #999; -webkit-box-shadow: 0 0 2px #999; - -moz-box-shadow: 0 0 2px #999; background: #fff; } @@ -1110,23 +1135,26 @@ a.iconlink.upload { } .boxtitle, +.uibox .listing thead th, .uibox .listing thead td { font-size: 12px; font-weight: bold; - padding: 10px 8px 3px 8px; - height: 20px; /* doesn't affect table-cells in FF */ + padding: 7px 8px 6px 8px; + line-height: 20px; margin: 0; text-shadow: 0px 1px 1px #fff; border-bottom: 1px solid #bbd3da; white-space: nowrap; } +.uibox .listing thead th, .uibox .listing thead td { padding-bottom: 8px; height: auto; } .uibox .boxtitle, +.uibox .listing thead th, .uibox .listing thead td { background: #b0ccd7; color: #004458; @@ -1145,6 +1173,7 @@ a.iconlink.upload { } .listbox .listitem a, +.listbox .listitem span, .listbox .tablink a, .listing tbody td, .listing li a { @@ -1153,27 +1182,49 @@ a.iconlink.upload { text-shadow: 0px 1px 1px #fff; text-decoration: none; cursor: default; - padding: 6px 8px 2px 8px; - height: 17px; /* doesn't affect table-cells in FF */ + padding: 4px 8px; + line-height: 17px; + height: 17px; white-space: nowrap; } .listing tbody td { display: table-cell; - padding-bottom: 5px; - height: auto; min-height: 14px; + outline: none; +} + +.listing tbody td a { + color: #376572; + text-shadow: 0px 1px 1px #fff; + text-decoration: none; } .webkit .listing tbody td { height: 14px; } +/* This padding-left minus the focused padding left should be half of the focused border-left */ +.listing thead tr td:first-child, +.listing tbody tr td:first-child { + border-left: 2px solid transparent; + padding-left: 6px; +} + +.listing.iconized thead tr td:first-child, +.listing.iconized tbody tr td:first-child { + padding-left: 34px; +} + +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +.listing.focus tbody tr.focused > td:first-child { + border-left: 2px solid #739da8; +} + .listbox .listitem.selected, .listbox .tablink.selected, .listbox .listitem.selected > a, .listbox .tablink.selected > a, -.listing tbody tr.unfocused td, .listing tbody tr.selected td, .listing li.selected, .listing li.selected > a { @@ -1240,6 +1291,16 @@ ul.treelist li a { text-overflow: ellipsis; } +ul.treelist li a:focus, +ul.listing .listitem a:focus, +ul.listing .listitem span:focus, +ul.listing.focus .listitem.focused span { + color: #fff !important; + background-color: rgba(73,180,210,0.6); + text-shadow: 0px 1px 1px #666; + outline: none; +} + ul.treelist ul li a { padding-left: 38px; } @@ -1252,10 +1313,18 @@ ul.treelist.iconized li a { padding-left: 36px; } -ul.treelist.iconized li ul li a { +ul.treelist.iconized ul li a { padding-left: 62px; } +ul.treelist.iconized ul ul li a { + padding-left: 88px; +} + +ul.treelist.iconized ul ul ul li a { + padding-left: 114px; +} + ul.treelist li div.treetoggle { position: absolute; top: 7px; @@ -1275,8 +1344,12 @@ ul.treelist.iconized li div.treetoggle { left: 19px; } -ul.treelist.iconized li ul li div.treetoggle { - left: 35px; +ul.treelist.iconized ul li div.treetoggle { + left: 45px; +} + +ul.treelist.iconized ul ul li div.treetoggle { + left: 71px; } ul.treelist li div.treetoggle.expanded { @@ -1299,9 +1372,8 @@ ul.treelist li.selected > div.expanded { 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; + -webkit-box-shadow: inset 0 1px 0 0 #fff; white-space: nowrap; overflow: hidden; } @@ -1320,6 +1392,13 @@ ul.treelist li.selected > div.expanded { margin-top: 1px; } +.boxfooter a.listbutton:focus { + color: #fff; + background-color: rgba(73,180,210,0.6); + text-shadow: 0px 1px 1px #666; + outline: none; +} + .uibox .boxfooter .listbutton:first-child { border-radius: 0 0 0 4px; } @@ -1329,7 +1408,9 @@ ul.treelist li.selected > div.expanded { width: 48px; height: 35px; text-indent: -5000px; - background: url(images/buttons.png) -1000px 0 no-repeat; + background-image: url(images/buttons.png); + background-position: -1000px 0; + background-repeat: no-repeat; } .boxfooter .listbutton.add .inner { @@ -1367,7 +1448,6 @@ ul.treelist li.selected > div.expanded { .boxfooter .listbutton.disabled .inner { opacity: 0.4; - filter: alpha(opacity=40); } .boxfooter .countdisplay { @@ -1410,7 +1490,6 @@ ul.treelist li.selected > div.expanded { .boxpagenav a.icon.disabled { opacity: 0.4; - filter: alpha(opacity=40); } .centerbox { @@ -1443,6 +1522,7 @@ table.records-table { border: 0; } +.records-table thead th, .records-table thead td { color: #69939e; font-size: 11px; @@ -1457,13 +1537,17 @@ table.records-table { padding: 8px 7px; overflow: hidden; text-overflow: ellipsis; + text-align: left; } +.records-table.sortheader thead th, .records-table.sortheader thead td { padding: 0; } +.records-table thead th a, .records-table thead td a, +.records-table thead th span, .records-table thead td span { display: block; padding: 7px 7px; @@ -1473,6 +1557,14 @@ table.records-table { text-overflow: ellipsis; } +.records-table thead th a:focus, +.records-table thead td a:focus { + color: #fff; + background-color: rgba(73,180,210,0.7); + text-shadow: 0px 1px 1px #666; + outline: none; +} + .records-table tbody td { padding: 2px 7px; border-bottom: 1px solid #ddd; @@ -1482,27 +1574,28 @@ table.records-table { overflow: hidden; text-overflow: ellipsis; background-color: #fff; + outline: none; } /* This padding-left minus the focused padding left should be half of the focused border-left */ +.records-table thead tr th:first-child, .records-table thead tr td:first-child, .records-table tbody tr td:first-child { - border-left: 0; - padding-left: 6px; -} - -/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ -.records-table tbody tr.focused > td:first-child { - border-left: 2px solid #b0ccd7; + border-left: 2px solid transparent; padding-left: 4px; } -.records-table tbody tr.selected.focused > td:first-child { - border-left-color: #49b3d2; +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +.records-table.focus tbody tr.focused > td:first-child { + border-left: 2px solid #49b3d2; } .records-table tr.selected td { color: #fff !important; + background-color: #4db0d2 !important; +} + +.records-table.focus tr.selected td { background: #019bc6; background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4)); @@ -1516,16 +1609,6 @@ table.records-table { color: #fff !important; } -.records-table tr.unfocused td { - color: #fff !important; - background-color: #4db0d2 !important; -} - -.records-table tr.unfocused td a, -.records-table tr.unfocused td span { - color: #fff !important; -} - .records-table tr.deleted td, .records-table tr.deleted td a { color: #ccc !important; @@ -1731,9 +1814,7 @@ ul.proplist li { border: 1px solid #333; border-radius: 5px; box-shadow: inset 0 0 1px #ccc; - -o-box-shadow: inset 0 0 1px #ccc; -webkit-box-shadow: inset 0 0 1px #ccc; - -moz-box-shadow: inset 0 0 1px #ccc; } #login-form .box-bottom { @@ -1772,17 +1853,13 @@ ul.proplist li { background: -ms-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); background: linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); box-shadow: inset 0 1px 0 0 #fff; - -moz-box-shadow: inset 0 1px 0 0 #fff; -webkit-box-shadow: inset 0 1px 0 0 #fff; - -o-box-shadow: inset 0 1px 0 0 #fff; } #login-form input.button:hover, #login-form input.button:focus { box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; - -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; - -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; } #login-form input.button:active { @@ -1863,6 +1940,7 @@ ul.proplist li { font-size: 11px; } +.searchbox .searchicon, .searchbox #searchmenulink, #quicksearchbar #searchmenulink { position: absolute; @@ -1871,12 +1949,25 @@ ul.proplist li { } .searchbox #searchreset, +.searchbox .iconbutton.reset, #quicksearchbar #searchreset { position: absolute; top: 4px; right: 1px; } +.listsearchbox { + padding: 4px; + background: #c7e3ef; + display: none; +} + +.listsearchbox input { + width: 100%; + height: 26px; + -moz-box-sizing: border-box; + box-sizing: border-box; +} /*** toolbar ***/ @@ -1892,7 +1983,7 @@ ul.proplist li { font-size: 10px; color: #555; min-width: 50px; - max-width: 75px; + max-width: 70px; height: 13px; overflow: hidden; text-overflow: ellipsis; @@ -1900,17 +1991,22 @@ ul.proplist li { padding: 28px 2px 0 2px; text-shadow: 0px 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; border-radius: 0; } +.dropbutton .dropbuttontip:focus, +.toolbar a.button:focus { + color: #fff; + text-shadow: 0px 1px 1px #666; + background-color: rgba(30,150,192, 0.5); + border-radius: 3px; +} + .toolbar a.button.disabled { opacity: 0.4; - filter: alpha(opacity=40); } .dropbutton { @@ -1923,19 +2019,22 @@ ul.proplist li { position: absolute; right: 0; top: 0; - height: 42px; + height: 41px; width: 18px; + overflow: hidden; + text-indent: -5000px; background: url(images/buttons.png) 0 -1255px no-repeat; cursor: pointer; + outline: none; } +.dropbutton .dropbuttontip:focus, .dropbutton .dropbuttontip:hover { background-position: -26px -1255px; } .dropbutton a.button.disabled + .dropbuttontip { opacity: 0.5; - filter: alpha(opacity=50); } .dropbutton a.button.disabled + .dropbuttontip:hover { @@ -1967,12 +2066,12 @@ ul.proplist li { .toolbar a.button.reply-all { min-width: 64px; - background-position: left -610px; + background-position: 0 -610px; } .toolbar a.button.forward { min-width: 64px; - background-position: left -650px; + background-position: 0 -650px; } .toolbar a.button.delete { @@ -2009,11 +2108,11 @@ ul.proplist li { .toolbar a.button.spellcheck { min-width: 64px; - background-position: left -930px; + background-position: 0 -930px; } .toolbar a.button.spellcheck.selected { - background-position: left -1620px; + background-position: 0 -1620px; color: #1978a1; } @@ -2030,8 +2129,8 @@ ul.proplist li { } .toolbar a.button.export { - min-width: 74px; - background-position: center -1054px; + min-width: 64px; + background-position: 0 -1054px; } .toolbar a.button.send { @@ -2096,7 +2195,6 @@ select.decorated { opacity: 0; height: 22px; cursor: pointer; - filter: alpha(opacity=0); -khtml-appearance: none; -webkit-appearance: none; border: 0; @@ -2119,6 +2217,17 @@ select.decorated option { } +a.menuselector:focus, +a.menuselector.focus, +a.iconbutton:focus, +.pagenav a.button:focus { + border-color: #4fadd5; + box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8); + -webkit-box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8); + outline: none; +} + + /*** quota indicator ***/ #quotadisplay { @@ -2131,6 +2240,30 @@ select.decorated option { background: url(images/quota.png) -100px 0 no-repeat; } +table.quota-info { + border-spacing: 0; + border-collapse: collapse; + table-layout: fixed; + margin: 5px; +} + +table.quota-info td, +table.quota-info th { + color: white; + border: 1px solid lightgrey; + padding: 2px 3px; + text-align: center; + min-width: 80px; +} + +table.quota-info td.name { + text-align: left; +} + +table.quota-info td.root { + font-style: italic; +} + /*** popup menus ***/ .popupmenu, @@ -2148,9 +2281,7 @@ select.decorated option { 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; } .popupmenu.dropdown { @@ -2211,6 +2342,7 @@ ul.toolbarmenu li a.active { .googie_list td.googie_list_onhover, ul.toolbarmenu li a.active:hover, +ul.toolbarmenu li a.active:focus, #rcmKSearchpane ul li.selected, select.decorated option:hover, select.decorated option[selected='selected'] { @@ -2220,6 +2352,7 @@ select.decorated option[selected='selected'] { 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%); + outline: none; } ul.toolbarmenu.iconized li a, @@ -2248,7 +2381,8 @@ ul.toolbarmenu li a.icon { padding: 2px 6px; } -ul.toolbarmenu li span.icon { +ul.toolbarmenu li span.icon, +#rcmKSearchpane ul li i.icon { display: block; min-height: 14px; padding: 4px 4px 1px 24px; @@ -2257,12 +2391,10 @@ ul.toolbarmenu li span.icon { background-position: -100px 0; background-repeat: no-repeat; opacity: 0.2; - filter: alpha(opacity=20); } ul.toolbarmenu li a.active span.icon { opacity: 0.99; - filter: alpha(opacity=100); } ul.toolbarmenu li span.read { @@ -2347,9 +2479,25 @@ ul.toolbarmenu li span.copy { text-shadow: 0px 1px 1px #333; text-decoration: none; min-height: 14px; - padding: 6px 10px 6px 10px; + padding: 6px 10px 6px 28px; border: 0; cursor: default; + position: relative; +} + +#rcmKSearchpane ul li i.icon { + opacity: 0.99; + position: absolute; + top: 4px; + left: 5px; + width: 18px; + height: 18px; + padding: 0; + background-position: -1px -2223px; +} + +#rcmKSearchpane ul li.group i.icon { + background-position: -1px -2247px; } .popupdialog { @@ -2405,14 +2553,11 @@ ul.toolbarmenu li span.copy { border: 1px solid #555; 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; z-index: 250; color: #ccc; white-space: nowrap; opacity: 0.92; - filter: alpha(opacity=92); text-shadow: 0px 1px 1px #333; } @@ -2441,6 +2586,10 @@ ul.toolbarmenu li span.copy { z-index: 255; } +.popup label > input { + margin-left: 10px; +} + /*** folder selector ***/ #folder-selector { @@ -2478,6 +2627,224 @@ ul.toolbarmenu li span.copy { background-position: 4px -2100px; } +/*** folders list ***/ + +.folderlist li.mailbox a { + padding-left: 36px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + background-image: url(images/listicons.png); + background-repeat: no-repeat; + background-position: 6px 3px; +} + +.folderlist li.mailbox.unread > a { + padding-right: 36px; +} + +.folderlist li.mailbox > a:focus, +.folderlist li.mailbox.selected > a { + background-position: 6px -21px; +} + +.folderlist li.mailbox.inbox > a { + background-position: 6px -189px; +} + +.folderlist li.mailbox.inbox > a:focus, +.folderlist li.mailbox.inbox.selected > a { + background-position: 6px -213px; +} + +.folderlist li.mailbox.drafts > a { + background-position: 6px -238px; +} + +.folderlist li.mailbox.drafts > a:focus, +.folderlist li.mailbox.drafts.selected > a { + background-position: 6px -262px; +} + +.folderlist li.mailbox.sent > a { + background-position: 6px -286px; +} + +.folderlist li.mailbox.sent > a:focus, +.folderlist li.mailbox.sent.selected > a { + background-position: 6px -310px; +} + +.folderlist li.mailbox.junk > a { + background-position: 6px -334px; +} + +.folderlist li.mailbox.junk > a:focus, +.folderlist li.mailbox.junk.selected > a { + background-position: 6px -358px; +} + +.folderlist li.mailbox.trash > a { + background-position: 6px -382px; +} + +.folderlist li.mailbox.trash > a:focus, +.folderlist li.mailbox.trash.selected > a { + background-position: 6px -406px; +} + +.folderlist li.mailbox.trash.empty > a { + background-position: 6px -1924px; +} + +.folderlist li.mailbox.trash.empty > a:focus, +.folderlist li.mailbox.trash.empty.selected > a { + background-position: 6px -1948px; +} + +.folderlist li.mailbox.archive > a { + background-position: 6px -1699px; +} + +.folderlist li.mailbox.archive > a:focus, +.folderlist li.mailbox.archive.selected > a { + background-position: 6px -1723px; +} + +.folderlist li.mailbox ul li.drafts > a { + background-position: 23px -238px; +} + +.folderlist li.mailbox ul li.drafts > a:focus, +.folderlist li.mailbox ul li.drafts.selected > a { + background-position: 23px -262px; +} + +.folderlist li.mailbox ul li.sent > a { + background-position: 23px -286px; +} + +.folderlist li.mailbox ul li.sent > a:focus, +.folderlist li.mailbox ul li.sent.selected > a { + background-position: 23px -310px; +} + +.folderlist li.mailbox ul li.junk > a { + background-position: 23px -334px; +} + +.folderlist li.mailbox ul li.junk > a:focus, +.folderlist li.mailbox ul li.junk.selected > a { + background-position: 23px -358px; +} + +.folderlist li.mailbox ul li.trash > a { + background-position: 23px -382px; +} + +.folderlist li.mailbox ul li.trash > a:focus, +.folderlist li.mailbox ul li.trash.selected > a { + background-position: 23px -406px; +} + +.folderlist li.mailbox ul li.trash.empty > a { + background-position: 23px -1924px; +} + +.folderlist li.mailbox ul li.trash.empty > a:focus, +.folderlist li.mailbox ul li.trash.empty.selected > a { + background-position: 23px -1948px; +} + +.folderlist li.mailbox ul li.archive > a { + background-position: 23px -1699px; +} + +.folderlist li.mailbox ul li.archive > a:focus, +.folderlist li.mailbox ul li.archive.selected > a { + background-position: 23px -1723px; +} + +.folderlist li.virtual > a { + color: #aaa; +} + +.folderlist li.mailbox div.treetoggle { + top: 13px; + left: 19px; +} + +.folderlist li.mailbox ul li:last-child { + border-bottom: 0; +} + +/* nested mailboxes */ + +.folderlist li.mailbox ul { + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid #bbd3da; +} + +.folderlist li.mailbox ul li a { + padding-left: 52px; /* 36 + 1 x 16 */ + background-position: 22px -95px; /* 6 + 1 x 16 */ +} +.folderlist li.mailbox ul li > a:focus, +.folderlist li.mailbox ul li.selected > a { + background-position: 22px -119px; +} +.folderlist li.mailbox ul li div.treetoggle { + left: 33px; + top: 14px; +} + +.folderlist li.mailbox ul ul li.mailbox a { + padding-left: 68px; /* 2x */ + background-position: 38px -95px; +} +.folderlist li.mailbox ul ul li > a:focus, +.folderlist li.mailbox ul ul li.selected > a { + background-position: 38px -119px; +} +.folderlist li.mailbox ul ul li div.treetoggle { + left: 48px; +} + +.folderlist li.mailbox ul ul ul li.mailbox a { + padding-left: 84px; /* 3x */ + background-position: 54px -95px; +} +.folderlist li.mailbox ul ul ul li > a:focus, +.folderlist li.mailbox ul ul ul li.selected > a { + background-position: 54px -119px; +} +.folderlist li.mailbox ul ul ul li div.treetoggle { + left: 64px; +} + +.folderlist li.mailbox ul ul ul ul li.mailbox a { + padding-left: 100px; /* 4x */ + background-position: 70px -95px; +} +.folderlist li.mailbox ul ul ul ul li > a:focus, +.folderlist li.mailbox ul ul ul ul li.selected > a { + background-position: 70px -119px; +} +.folderlist li.mailbox ul ul ul ul li div.treetoggle { + left: 80px; +} + +/* indent folders on levels > 4 */ +.folderlist li.mailbox ul ul ul ul ul li { + padding-left: 16px; +} +.folderlist li.mailbox ul ul ul ul ul li div.treetoggle { + left: 96px; +} + + /*** attachment list ***/ .attachmentslist { @@ -2495,6 +2862,11 @@ ul.toolbarmenu li span.copy { margin-bottom: 1px; } +.attachmentslist li.txt, +.attachmentslist li.text { + background-position: 0 -416px; +} + .attachmentslist li.pdf { background-position: 0 -26px; } @@ -2554,11 +2926,6 @@ ul.toolbarmenu li span.copy { background-position: 0 -338px; } -.attachmentslist li.txt, -.attachmentslist li.text { - background-position: 0 -416px; -} - .attachmentslist li.ics, .attachmentslist li.calendar { background-position: 0 -364px; @@ -2607,6 +2974,7 @@ ul.toolbarmenu li span.copy { overflow: hidden; text-overflow: ellipsis; line-height: 20px; + outline: none; } .attachmentslist li a.drop { @@ -2618,6 +2986,15 @@ ul.toolbarmenu li span.copy { right: 0; top: 0; padding: 0; + overflow: hidden; + text-indent: -5000px; + outline: none; +} + +.attachmentslist li a:focus, +.attachmentslist li a.drop:focus { + background-color: rgba(30,150,192, 0.5); + border-radius: 2px; } #compose-attachments ul li { @@ -2642,36 +3019,37 @@ ul.toolbarmenu li span.copy { padding: 0; text-decoration: none; text-indent: -5000px; - background: url(images/buttons.png) -7px -337px no-repeat; + background-image: url(images/buttons.png); + background-position: -6px -338px; + background-repeat: no-repeat; } .attachmentslist li a.cancelupload { - background-position: -7px -377px; + background-position: -6px -378px; } - /*** fieldset tabs ***/ -.tabsbar { - margin-bottom: 12px; - padding-top: 15px; - height: 27px; - white-space: nowrap; +.tabbed.ui-tabs { + padding: 0; + border: 0 !important; + background: none; } -.ui-dialog-content .tabsbar { - margin-bottom: 0; +.ui-dialog .tabbed.ui-tabs { + margin: -12px -8px 0 -8px; } -.tabsbar .tablink { - padding: 15px 1px 15px 0; - background: #f8f8f8; - background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8)); - background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); - background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); - background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); - background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); +.boxcontent.tabbed.ui-tabs { + padding: 10px; +} + +.ui-tabs .tabsbar.ui-tabs-nav { + margin-bottom: 10px; +} + +.ui-dialog-content .ui-tabs .tabsbar.ui-tabs-nav { + margin-bottom: 0; } .tabsbar .tablink:last-child { @@ -2682,28 +3060,33 @@ ul.toolbarmenu li span.copy { border-right: 0; } -.tabsbar .tablink a { - padding: 15px; - color: #999; - font-size: 12px; - font-weight: bold; - text-decoration: none; +.ui-tabs .ui-tabs-nav li.tablink a { background: #fff; - border-right: 1px solid #fafafa; } -.tabsbar .tablink.selected a { - color: #004458; - background: #f6f6f6; - background: -moz-linear-gradient(top, #fff 40%, #efefef 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef)); - background: -o-linear-gradient(top, #fff 40%, #efefef 100%); - background: -ms-linear-gradient(top, #fff 40%, #efefef 100%); - background: linear-gradient(top, #fff 40%, #efefef 100%); -} - -fieldset.tab { +.ui-tabs fieldset.ui-tabs-panel { border: 0; padding: 0; margin-left: 0; + background: none; +} + +.ui-dialog .propform .ui-tabs-panel { + display: block; + background: #efefef; + padding: 0.5em 1em; +} + +#image-selector-form.droptarget { + background: url(images/filedrop.png) center bottom no-repeat; +} + +/** Common TinyMCE fixes **/ +.mce-btn-small .mce-ico { + display: inline; /* for old Firefox */ +} + +.mce-btn-small i { + line-height: 16px !important; + vertical-align: text-top !important; } diff --git a/skins/larry/templates/about.html b/skins/larry/templates/about.html index e2bd0b019..b0d36d177 100644 --- a/skins/larry/templates/about.html +++ b/skins/larry/templates/about.html @@ -14,7 +14,7 @@ <roundcube:object name="aboutcontent" /> <h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2> -<p class="copyright">Copyright © 2005-2013, The Roundcube Dev Team</p> +<p class="copyright">Copyright © 2005-2014, The Roundcube Dev Team</p> <p class="license">This program is free software; you can redistribute it and/or modify it under the terms of the <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GNU General Public License</a> as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.<br/> diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index 97efdc6f3..62bca3c84 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -4,31 +4,56 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body class="noscroll"> +<roundcube:if condition="env:extwin" /><body class="noscroll extwin"><roundcube:else /><body class="noscroll"><roundcube:endif /> <roundcube:include file="/includes/header.html" /> <div id="mainscreen"> +<h1 class="voice"><roundcube:label name="addressbook" /></h1> + <!-- toolbar --> -<div id="addressbooktoolbar" class="toolbar"> +<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> +<div id="addressbooktoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar"> <roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" /> <span class="dropbutton"> <roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" /> - <span class="dropbuttontip" id="exportmenulink" onclick="UI.show_popup('exportmenu');return false"></span> + <a href="#export" class="dropbuttontip" id="exportmenulink" onclick="return UI.toggle_popup('exportmenu',event)" aria-haspopup="true" aria-expanded="false" aria-owns="exportmenu-menu" tabindex="0"><roundcube:label name="arialabelcontactexportoptions" /></a> </span> <span class="spacer"></span> <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> <roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advanced" title="advsearch" /> <roundcube:container name="toolbar" id="addressbooktoolbar" /> + + <div id="exportmenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-exportmenu" class="voice"><roundcube:label name="arialabelcontactexportoptions" /></h3> + <ul id="exportmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-exportmenu"> + <roundcube:button type="link-menuitem" command="export" label="exportall" prop="sub" class="exportalllink" classAct="exportalllink active" /> + <roundcube:button type="link-menuitem" command="export-selected" label="exportsel" prop="sub" class="exportsellink" classAct="exportsellink active" /> + </ul> + </div> + </div> <!-- search box --> -<div id="quicksearchbar" class="searchbox"> +<div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform"> +<h2 id="aria-label-searchform" class="voice"><roundcube:label name="arialabelcontactsearchform" /></h2> +<label for="quicksearchbox" class="voice"><roundcube:label name="arialabelquicksearchbox" /></label> +<roundcube:button command="menu-open" prop="searchmenu" id="searchmenulink" class="iconbutton searchoptions" title="searchmod" label="options" aria-haspopup="true" aria-expanded="false" aria-owns="searchmenu-menu" /> <roundcube:object name="searchform" id="quicksearchbox" /> -<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=" " /> +<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" label="resetsearch" /> + +<div id="searchmenu" class="popupmenu" data-editable="true"> + <h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3> + <ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu"> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="name" id="s_mod_name" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="name" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="firstname" id="s_mod_firstname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="firstname" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="surname" id="s_mod_surname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="surname" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="email" id="s_mod_email" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="email" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="*" id="s_mod_all" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="allfields" /></span></label></li> + </ul> +</div> </div> <div id="mainscreencontent"> @@ -36,42 +61,66 @@ <div id="addressview-left"> <!-- sources/groups list --> -<div id="directorylistbox" class="uibox listbox"> +<div id="directorylistbox" class="uibox listbox" role="navigation" aria-labelledby="directorylist-header"> <h2 id="directorylist-header" class="boxtitle"><roundcube:label name="groups" /></h2> <div id="directorylist-content" class="scroller withfooter"> <roundcube:object name="directorylist" id="directorylist" class="treelist listing iconized" /> + <h3 class="boxtitle voice"><roundcube:label name="savedsearches" /></h3> + <roundcube:object name="savedsearchlist" id="savedsearchlist" class="treelist listing iconized" /> </div> <div id="directorylist-footer" class="boxfooter"> - <roundcube:button command="group-create" type="link" title="newcontactgroup" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="groupoptions" id="groupoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('groupoptions');return false" innerClass="inner" content="⚙" /> + <roundcube:button command="group-create" type="link" title="newgroup" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="addgroup" /><roundcube:button name="groupoptions" id="groupoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="return UI.toggle_popup('groupoptions',event)" innerClass="inner" label="arialabelabookgroupoptions" aria-haspopup="true" aria-expanded="false" aria-owns="groupoptionsmenu" /> </div> </div> +<div id="groupoptions" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-groupoptions" class="voice"><roundcube:label name="arialabelabookgroupoptions" /></h3> + <ul id="groupoptionsmenu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-groupoptions"> + <roundcube:button type="link-menuitem" command="group-rename" label="grouprename" classAct="active" /> + <roundcube:button type="link-menuitem" command="group-delete" label="groupdelete" classAct="active" /> + <roundcube:button type="link-menuitem" command="search-create" label="searchsave" classAct="active" /> + <roundcube:button type="link-menuitem" command="search-delete" label="searchdelete" classAct="active" /> + <roundcube:container name="groupoptions" id="groupoptionsmenu" /> + </ul> +</div> + </div><!-- end addressview-left --> -<div id="addressview-right"> +<div id="addressview-right" role="main" aria-labelledby="aria-label-contactslist"> <!-- contacts list --> <div id="addresslist" class="uibox listbox"> -<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" /> +<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" id="aria-label-contactslist" /> <div class="scroller withfooter"> -<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" /> +<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" /> +</div> +<div class="boxpagenav"> + <roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" label="first" /> + <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" label="previous" /> + <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" label="next" /> + <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" label="last" /> </div> <div class="boxfooter"> - <roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="x" /><roundcube:button command="group-remove-selected" type="link" title="groupremoveselected" class="listbutton removegroup disabled" classAct="listbutton removegroup" innerClass="inner" content="-" /> - <roundcube:object name="recordsCountDisplay" class="countdisplay" label="fromtoshort" /> + <roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="addcontact" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" label="deletecontact" /><roundcube:button command="group-remove-selected" type="link" title="groupremoveselected" class="listbutton removegroup disabled" classAct="listbutton removegroup" innerClass="inner" label="groupremoveselected" /> + <span class="countdisplay" aria-live="polite" aria-relevant="text"> + <span class="voice"><roundcube:label name="contacts" /></span> + <roundcube:object name="recordsCountDisplay" label="fromtoshort" /> + </span> </div> -<div class="boxpagenav"> - <roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" content="|&lt;" /> - <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&lt;" /> - <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&gt;" /> - <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&gt;|" /> </div> + +<div class="voice" role="note"> +<h3><roundcube:label name="helplistnavigation" /></h3> +<pre> +<roundcube:label name="helplistkeyboardnavigation" /> +<roundcube:label name="helplistkeyboardnavcontacts" /> +</pre> </div> <div id="contacts-box" class="uibox"> <div class="iframebox"> - <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="contactproperties" /> </div> </div> @@ -81,37 +130,10 @@ </div><!-- end mainscreen --> -<div id="exportmenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button command="export" label="exportall" prop="sub" class="exportalllink" classAct="exportalllink active" /></li> - <li><roundcube:button command="export-selected" label="exportsel" prop="sub" class="exportsellink" classAct="exportsellink active" /></li> - </ul> -</div> - -<div id="searchmenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><label><input type="checkbox" name="s_mods[]" value="name" id="s_mod_name" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="name" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="firstname" id="s_mod_firstname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="firstname" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="surname" id="s_mod_surname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="surname" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="email" id="s_mod_email" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="email" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="*" id="s_mod_all" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="allfields" /></span></label></li> - </ul> -</div> - -<div id="groupoptions" class="popupmenu"> - <ul id="groupoptionsmenu" class="toolbarmenu"> - <li><roundcube:button command="group-rename" label="grouprename" classAct="active" /></li> - <li><roundcube:button command="group-delete" label="groupdelete" classAct="active" /></li> - <li><roundcube:button command="search-create" label="searchsave" classAct="active" /></li> - <li><roundcube:button command="search-delete" label="searchdelete" classAct="active" /></li> - <roundcube:container name="groupoptions" id="groupoptionsmenu" /> - </ul> -</div> - -<div id="dragcontactmenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li> - <li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li> +<div id="dragcontactmenu" class="popupmenu" aria-hidden="true"> + <ul class="toolbarmenu" role="menu"> + <roundcube:button type="link-menuitem" command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /> + <roundcube:button type="link-menuitem" command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /> </ul> </div> diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html index d0338292b..04a987f89 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -13,66 +13,71 @@ <div id="mainscreen"> +<h1 class="voice"><roundcube:object name="pagetitle" /></h1> + <!-- 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="cancel" condition="!env:extwin" /> - <roundcube:button command="close" type="link" class="button close disabled" classAct="button close" classSel="button close pressed" label="cancel" condition="env:extwin" /> +<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> + <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" label="cancel" condition="!env:extwin" tabindex="2" /> + <roundcube:button command="close" type="link" class="button close disabled" classAct="button close" label="cancel" condition="env:extwin" tabindex="2" /> <span class="spacer"></span> - <roundcube:button command="send" type="link" class="button send" classAct="button send" classSel="button send pressed" label="send" title="sendmessage" /> - <roundcube:button command="savedraft" type="link" class="button savedraft" classAct="button savedraft" classSel="button savedraft pressed" label="save" title="savemessage" /> + <roundcube:button command="send" type="link" class="button send disabled" classAct="button send" label="send" title="sendmessage" tabindex="2" /> + <roundcube:button command="savedraft" type="link" class="button savedraft disabled" classAct="button savedraft" label="save" title="savemessage" tabindex="2" /> <span class="spacer"></span> <roundcube:if condition="config:enable_spellcheck" /> <span class="dropbutton"> - <roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" /> - <span class="dropbuttontip" id="spellmenulink" onclick="UI.show_popup('spellmenu');return false"></span> + <roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" tabindex="2" /> + <a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true" aria-expanded="false" tabindex="2">Select Spell Language</a> </span> <roundcube:endif /> - <roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" /> - <roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" /> - <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.show_popup('responsesmenu');return false"><roundcube:label name="responses" /></a> + <roundcube:button name="addattachment" type="link" class="button attach" label="attach" title="addattachment" onclick="UI.show_uploadform(event);return false" aria-haspopup="true" aria-expanded="false"tabindex="2" /> + <roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" label="signature" title="insertsignature" tabindex="2" /> + <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.toggle_popup('responsesmenu',event);return false" tabindex="2" aria-haspopup="true" aria-expanded="false" aria-owns="textresponsesmenu"><roundcube:label name="responses" /></a> <roundcube:container name="toolbar" id="compose-toolbar" /> </div> -</div> <div id="mainscreencontent"> <div id="composeview-left"> <!-- inline address book --> -<div id="compose-contacts" class="uibox listbox"> -<h2 class="boxtitle"><roundcube:label name="contacts" /></h2> - <div id="composequicksearch"> +<div id="compose-contacts" class="uibox listbox" role="region" aria-labelledby="aria-label-composecontacts"> +<h2 id="aria-label-composecontacts" class="boxtitle"><roundcube:label name="contacts" /></h2> + <div class="listsearchbox" role="search" aria-labelledby="aria-label-composequicksearch"> + <h3 id="aria-label-composequicksearch" class="voice"><roundcube:label name="arialabelcontactquicksearch" /></h3> <div class="searchbox"> + <label for="contactsearchbox" class="voice"><roundcube:label name="arialabelcontactsearchbox" /></label> <roundcube:object name="searchform" id="contactsearchbox" /> - <a id="searchmenulink" class="iconbutton searchoptions"> </a> - <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> + <a id="searchmenulink" class="iconbutton searchicon"> </a> + <roundcube:button command="reset-search" class="iconbutton reset" title="resetsearch" content=" " /> </div> </div> - <roundcube:object name="addressbooks" id="directorylist" class="listing" /> - <div class="scroller withfooter"> - <roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" /> + <roundcube:object name="addressbooks" id="directorylist" class="treelist listing" summary="ariasummarycomposecontacts" /> + <div class="scroller withfooter" tabindex="-1"> + <roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" /> </div> <div class="boxfooter"> <roundcube:button command="add-recipient" prop="to" type="link" title="to" class="listbutton addto disabled" classAct="listbutton addto" innerClass="inner" content="To+" /><roundcube:button command="add-recipient" prop="cc" type="link" title="cc" class="listbutton addcc disabled" classAct="listbutton addcc" innerClass="inner" content="Cc+" /><roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" class="listbutton addbcc disabled" classAct="listbutton addbcc" innerClass="inner" content="Bcc+" /> </div> <div class="boxpagenav"> - <roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" content="|&lt;" /> - <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&lt;" /> - <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&gt;" /> - <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&gt;|" /> + <roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" label="first" /> + <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" label="previous" /> + <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" label="next" /> + <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" label="last" /> </div> </div> </div> -<div id="composeview-right"> +<div id="composeview-right" role="main"> <roundcube:form name="form" method="post" id="compose-content" class="uibox"> <!-- message headers --> -<div id="composeheaders"> -<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a> +<div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders"> +<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2> + +<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle" title="<roundcube:label name='togglecomposeoptions' />" aria-exapnded="false"><span class="iconlink"></span></a> <table class="headers-table compose-headers"> <tbody> @@ -80,77 +85,78 @@ <td class="title"><label for="_from"><roundcube:label name="from" /></label></td> <td class="editfield"> <roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" /> - <a href="#identities" onclick="return rcmail.command('identities')" class="iconlink edit"><roundcube:label name="editidents" /></a> + <a href="#identities" onclick="return rcmail.command('identities')" class="iconlink edit" tabindex="0"><roundcube:label name="editidents" /></a> </td> </tr><tr> <td class="title top"><label for="_to"><roundcube:label name="to" /></label></td> - <td class="editfield"><roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="1" tabindex="2" /></td> + <td class="editfield"><roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="1" tabindex="1" aria-required="true" /></td> </tr><tr id="compose-cc"> <td class="title top"> <label for="_cc"><roundcube:label name="cc" /></label> - <a href="#cc" onclick="return UI.hide_header_row('cc');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a> + <a href="#cc" onclick="return UI.hide_header_row('cc');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="cc" /></a> </td> - <td class="editfield"><roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="1" tabindex="3" /></td> + <td class="editfield"><roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="1" tabindex="1" /></td> </tr><tr id="compose-bcc"> <td class="title top"> <label for="_bcc"><roundcube:label name="bcc" /></label> - <a href="#bcc" onclick="return UI.hide_header_row('bcc');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a> + <a href="#bcc" onclick="return UI.hide_header_row('bcc');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="bcc" /></a> </td> - <td class="editfield"><roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="1" tabindex="4" /></td> + <td class="editfield"><roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="1" tabindex="1" /></td> </tr><tr id="compose-replyto"> <td class="title top"> <label for="_replyto"><roundcube:label name="replyto" /></label> - <a href="#replyto" onclick="return UI.hide_header_row('replyto');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a> + <a href="#replyto" onclick="return UI.hide_header_row('replyto');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="replyto" /></a> </td> - <td class="editfield"><roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="5" /></td> + <td class="editfield"><roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="1" /></td> </tr><tr id="compose-followupto"> <td class="title top"> <label for="_followupto"><roundcube:label name="followupto" /></label> - <a href="#followupto" onclick="return UI.hide_header_row('followupto');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a> + <a href="#followupto" onclick="return UI.hide_header_row('followupto');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="followupto" /></a> </td> - <td class="editfield"><roundcube:object name="composeHeaders" part="followupto" form="form" id="_followupto" size="70" tabindex="7" /></td> + <td class="editfield"><roundcube:object name="composeHeaders" part="followupto" form="form" id="_followupto" size="70" tabindex="1" /></td> </tr><tr> <td></td> <td class="formlinks"> - <a href="#cc" onclick="return UI.show_header_row('cc')" id="cc-link" class="iconlink add"><roundcube:label name="addcc" /></a> - <a href="#bcc" onclick="return UI.show_header_row('bcc')" id="bcc-link" class="iconlink add"><roundcube:label name="addbcc" /></a> - <a href="#reply-to" onclick="return UI.show_header_row('replyto')" id="replyto-link" class="iconlink add"><roundcube:label name="addreplyto" /></a> - <a href="#followup-to" onclick="return UI.show_header_row('followupto')" id="followupto-link" class="iconlink add"><roundcube:label name="addfollowupto" /></a> + <a href="#cc" onclick="return UI.show_header_row('cc')" id="cc-link" class="iconlink add" tabindex="3"><roundcube:label name="addcc" /></a> + <a href="#bcc" onclick="return UI.show_header_row('bcc')" id="bcc-link" class="iconlink add" tabindex="3"><roundcube:label name="addbcc" /></a> + <a href="#reply-to" onclick="return UI.show_header_row('replyto')" id="replyto-link" class="iconlink add" tabindex="3"><roundcube:label name="addreplyto" /></a> + <a href="#followup-to" onclick="return UI.show_header_row('followupto')" id="followupto-link" class="iconlink add" tabindex="3"><roundcube:label name="addfollowupto" /></a> </td> </tr><tr> <td class="title"><label for="compose-subject"><roundcube:label name="subject" /></label></td> - <td class="editfield"><roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="8" /></td> + <td class="editfield"><roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="1" /></td> </tr> </tbody> </table> <div id="composebuttons" class="formbuttons"> - <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" condition="!env:extwin" /> + <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" label="openinextwin" condition="!env:extwin" /> </div> <!-- (collapsable) message options --> -<div id="composeoptions"> +<div id="composeoptions" role="region" aria-labelledby="aria-label-composeoptions"> + <h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="arialabelcomposeoptions" /></h2> <roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" /> <span class="composeoption"> <label><roundcube:label name="editortype" /> - <roundcube:object name="editorSelector" editorid="composebody" tabindex="14" /></label> + <roundcube:object name="editorSelector" editorid="composebody" tabindex="4" /></label> </span> <roundcube:endif /> <span class="composeoption"> <label for="rcmcomposepriority"><roundcube:label name="priority" /> - <roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></label> + <roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" tabindex="4" /></label> </span> <span class="composeoption"> - <label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /> <roundcube:label name="returnreceipt" /></label> + <label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" tabindex="4" /> <roundcube:label name="returnreceipt" /></label> </span> <roundcube:if condition="config:smtp_server != ''" /> <span class="composeoption"> - <label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" /> <roundcube:label name="dsn" /></label> + <label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" tabindex="4" /> <roundcube:label name="dsn" /></label> </span> <roundcube:endif /> <roundcube:if condition="!config:no_save_sent_messages" /> <span class="composeoption"> - <label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" /></label> + <label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" tabindex="4" /></label> </span> <roundcube:endif /> <roundcube:container name="composeoptions" id="composeoptions" /> @@ -161,13 +167,15 @@ <!-- message compose body --> <div id="composeview-bottom"> <div id="composebodycontainer"> - <roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="9" /> + <label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label> + <roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="1" /> </div> - <div id="compose-attachments" class="rightcol"> + <div id="compose-attachments" class="rightcol" role="region" aria-labelledby="aria-label-composeattachments"> + <h2 id="aria-label-composeattachments" class="voice"><roundcube:label name="attachments" /></h2> <div style="text-align:center; margin-bottom:20px"> - <roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" /> + <roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform(event);return false" tabindex="1" /> </div> - <roundcube:object name="composeAttachmentList" id="attachment-list" class="attachmentslist" /> + <roundcube:object name="composeAttachmentList" id="attachment-list" class="attachmentslist" tabindex="1" /> <roundcube:object name="fileDropArea" id="compose-attachments" /> </div> <!-- @@ -187,7 +195,8 @@ </div><!-- end mainscreen --> -<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />"> +<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />" aria-hidden="true"> + <h2 id="aria-label-uploaddialog" class="voice"><roundcube:label name="arialabelattachmentuploadform" /></h2> <roundcube:object name="composeAttachmentForm" id="uploadform" buttons="no" /> <div class="formbuttons"> <roundcube:button command="send-attachment" type="input" class="button mainaction" label="upload" /> @@ -195,15 +204,16 @@ </div> </div> -<div id="spellmenu" class="popupmenu"></div> +<div id="spellmenu" class="popupmenu" aria-hidden="true"></div> -<div id="responsesmenu" class="popupmenu"> - <ul class="toolbarmenu" id="textresponsesmenu"> - <li class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li> +<div id="responsesmenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-responsesmenu" class="voice"><roundcube:label name="arialabelresponsesmenu" /></h3> + <ul class="toolbarmenu" id="textresponsesmenu" role="menu" aria-labelledby="aria-label-responsesmenu"> + <li role="separator" class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li> <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" /> - <li class="separator"><label><roundcube:label name="manageresponses" /></label></li> - <li><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li> - <li><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li> + <li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li> + <roundcube:button command="save-response" type="link-menuitem" label="newresponse" classAct="active" unselectable="on" /> + <roundcube:button command="responses" type="link-menuitem" label="editresponses" classAct="active" /> </ul> </div> diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html index 3467ebe8e..da7953eae 100644 --- a/skins/larry/templates/contactedit.html +++ b/skins/larry/templates/contactedit.html @@ -6,17 +6,15 @@ </head> <body class="iframe"> -<h1 class="boxtitle"> - <roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" /> - <roundcube:else /><roundcube:label name="editcontact" /> -<roundcube:endif /></h1> +<h1 class="boxtitle"><roundcube:object name="steptitle" /></h1> <roundcube:form name="editform" method="post" id="contact-details" class="boxcontent"> <roundcube:if condition="strlen(env:sourcename)" /> <div id="sourcename"><roundcube:label name="addressbook" />: <roundcube:var name="env:sourcename" condition="env:action!='add'" /><roundcube:object name="sourceselector" id="sourceselect" condition="env:action=='add'" /></div> <roundcube:endif /> - <div id="contactphoto"> + <fieldset id="contactphoto"> + <legend class="voice"><roundcube:label name="contactphoto" /></legend> <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" /> <roundcube:if condition="env:photocol" /> <roundcube:object name="fileDropArea" id="contactpic" /> @@ -25,7 +23,7 @@ <roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" /> </div> <roundcube:endif /> - </div> + </fieldset> <roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" /> <br style="clear:both" /> diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index 56396bf1d..c707d3396 100644 --- a/skins/larry/templates/folders.html +++ b/skins/larry/templates/folders.html @@ -4,27 +4,53 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body class="noscroll"> +<roundcube:if condition="env:extwin" /><body class="noscroll extwin"><roundcube:else /><body class="noscroll"><roundcube:endif /> <roundcube:include file="/includes/header.html" /> <div id="mainscreen" class="offset"> +<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="folders" /></h1> + <roundcube:include file="/includes/settingstabs.html" /> -<div id="settings-right"> +<div id="settings-right" role="main"> <div id="folderslist" class="uibox listbox"> -<h2 id="folderslist-header" class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2> +<h2 id="folderslist-header" class="boxtitle"> + <roundcube:label name="folders" /> + <a href="#folders" class="iconbutton search" title="<roundcube:label name='findfolders' />" tabindex="0"><roundcube:label name='findfolders' /></a> +</h2> +<div class="listsearchbox"> + <roundcube:object name="folderfilter" id="folderlist-filter" /> + <div class="searchbox" role="search" aria-labelledby="aria-label-foldersearchform"> + <h3 id="aria-label-foldersearchform" class="voice"><roundcube:label name="arialabelfoldersearchform" /></h3> + <label for="foldersearch" class="voice"><roundcube:label name="arialabelsearchterms" /></label> + <input type="text" name="q" id="foldersearch" placeholder="<roundcube:label name='findfolders' />" /> + <a class="iconbutton searchicon"></a> + <roundcube:button command="reset-foldersearch" id="folderlistsearch-reset" class="iconbutton reset" title="resetsearch" label="resetsearch" /> + </div> +</div> <div id="folderslist-content" class="scroller withfooter"> -<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="listing" noheader="true" /> + <roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="treelist listing folderlist" /> </div> <div id="folderslist-footer" class="boxfooter"> - <roundcube:button command="create-folder" type="link" title="createfolder" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="⚙" /> + <roundcube:button command="create-folder" type="link" title="createfolder" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="createfolder" /><roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="return UI.toggle_popup('mailboxmenu',event)" innerClass="inner" content="⚙" aria-haspopup="true" aria-expanded="false" aria-owns="mailboxoptionsmenu" /> <roundcube:if condition="env:quota" /> + <span class="voice"><roundcube:label name="quota"></span> <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" /> <roundcube:endif /> </div> + +<div id="mailboxmenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-mailboxmenu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3> + <ul class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu"> + <roundcube:button command="delete-folder" type="link-menuitem" label="delete" classAct="active" /> + <roundcube:button command="purge" type="link-menuitem" label="empty" classAct="active" /> + <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" /> + </ul> +</div> + </div> <div id="folder-details" class="uibox contentbox"> @@ -37,14 +63,6 @@ </div> -<div id="mailboxmenu" class="popupmenu"> - <ul class="toolbarmenu" id="mailboxoptionsmenu"> - <li><roundcube:button command="delete-folder" label="delete" classAct="active" /></li> - <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> - <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" /> - </ul> -</div> - <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index e3d2cc842..163469d16 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -4,29 +4,30 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body class="noscroll"> +<roundcube:if condition="env:extwin" /><body class="noscroll extwin"><roundcube:else /><body class="noscroll"><roundcube:endif /> <roundcube:include file="/includes/header.html" /> <div id="mainscreen" class="offset"> +<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1> + <roundcube:include file="/includes/settingstabs.html" /> -<div id="settings-right"> - +<div id="settings-right" role="main" aria-labelledby="aria-label-identitieslist"> <div id="identitieslist" class="uibox listbox"> -<h2 class="boxtitle"><roundcube:label name="identities" /></h2> +<h2 class="boxtitle" id="aria-label-identitieslist"><roundcube:label name="identities" /></h2> <div class="scroller withfooter"> -<roundcube:object name="identitiesList" id="identities-table" class="listing" cellspacing="0" summary="Identities list" noheader="true" editIcon="" /> +<roundcube:object name="identitiesList" id="identities-table" class="listing" noheader="true" editIcon="" role="listbox" /> </div> <div class="boxfooter"> -<roundcube:button command="add" type="link" title="newidentity" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" condition="config:identities_level:0<2" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" condition="config:identities_level:0<2" /> +<roundcube:button command="add" type="link" title="newidentity" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="addidentity" condition="config:identities_level:0<2" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" label="delete" condition="config:identities_level:0<2" /> </div> </div> <div id="identity-details" class="uibox contentbox"> <div class="iframebox"> - <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabelidentityeditfrom" /> </div> </div> diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html index a670d0354..f18338cc0 100644 --- a/skins/larry/templates/importcontacts.html +++ b/skins/larry/templates/importcontacts.html @@ -4,26 +4,29 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body> +<roundcube:if condition="env:extwin" /><body class="extwin"><roundcube:else /><body><roundcube:endif /> <roundcube:include file="/includes/header.html" /> <div id="mainscreen"> -<div id="addressbooktoolbar" class="toolbar"> +<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="importcontacts" /></h1> + +<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> +<div id="addressbooktoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar"> <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> </div> -<div id="pluginbody" class="offset uibox contentbox"> -<h2 class="boxtitle"><roundcube:label name="importcontacts" /></h2> +<div id="mainscreencontent" class="uibox contentbox"> + <h2 class="boxtitle"><roundcube:label name="importcontacts" /></h2> -<div id="import-box" class="boxcontent"> -<roundcube:object name="importstep" class="propform" /> -<br/> -<p class="formbuttons"> - <roundcube:object name="importnav" class="button" /> -</p> -</div> + <div id="import-box" class="boxcontent"> + <roundcube:object name="importstep" class="propform" /> + <br/> + <p class="formbuttons"> + <roundcube:object name="importnav" class="button" /> + </p> + </div> </div> </div> diff --git a/skins/larry/templates/login.html b/skins/larry/templates/login.html index 64ff6be92..557b029ee 100644 --- a/skins/larry/templates/login.html +++ b/skins/larry/templates/login.html @@ -7,8 +7,10 @@ </head> <body> +<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1> + <div id="login-form"> -<div class="box-inner"> +<div class="box-inner" role="main"> <roundcube:object name="logo" src="/images/roundcube_logo.png" id="logo" /> <roundcube:form name="form" method="post"> @@ -17,15 +19,15 @@ </div> -<div class="box-bottom"> +<div class="box-bottom" role="complementary"> <roundcube:object name="message" id="message" /> <noscript> <p class="noscriptwarning"><roundcube:label name="noscriptwarning" /></p> </noscript> </div> -<div id="bottomline"> - <roundcube:var name="config:product_name"> <roundcube:object name="version" condition="config:display_version" /> +<div id="bottomline" role="contentinfo"> + <roundcube:object name="productname" /> <roundcube:object name="version" condition="config:display_version" /> <roundcube:if condition="config:support_url" /> ● <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a> <roundcube:endif /> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index 1e4a3ce8c..2c4e0f2c5 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -17,8 +17,11 @@ <div id="mainscreen"> +<h1 class="voice"><roundcube:label name="mail" /></h1> + <!-- toolbar --> -<div id="messagetoolbar" class="toolbar"> +<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> +<div id="messagetoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar"> <roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" /> <roundcube:include file="/includes/mailtoolbar.html" /> </div> @@ -27,14 +30,35 @@ <!-- search filter --> <div id="searchfilter"> - <roundcube:object name="searchfilter" class="searchfilter decorated" /> + <label for="messagessearchfilter" class="voice"><roundcube:label name="arialabelmessagessearchfilter" /></label> + <roundcube:object name="searchfilter" class="searchfilter decorated" id="messagessearchfilter" aria-controls="messagelist" /> </div> <!-- search box --> -<div id="quicksearchbar" class="searchbox"> +<div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform"> +<h2 id="aria-label-searchform" class="voice"><roundcube:label name="arialabelmailsearchform" /></h2> +<label for="quicksearchbox" class="voice"><roundcube:label name="arialabelmailquicksearchbox" /></label> +<roundcube:button command="menu-open" prop="searchmenu" id="searchmenulink" class="iconbutton searchoptions" title="searchmod" label="options" aria-haspopup="true" aria-expanded="false" aria-owns="searchmenu-menu" /> <roundcube:object name="searchform" id="quicksearchbox" /> -<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=" " /> +<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" label="resetsearch" /> + +<div id="searchmenu" class="popupmenu" data-editable="true"> + <h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3> + <ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu"> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li> + <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li> + <li role="separator" class="separator"><label><roundcube:label name="searchscope" /></label></li> + <li role="menuitem"><label><input type="radio" name="s_scope" value="base" id="s_scope_base" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="currentfolder" /></span></label></li> + <li role="menuitem"><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li> + <li role="menuitem"><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li> + </ul> +</div> + </div> </div> @@ -43,13 +67,15 @@ <div id="mailview-left"> <!-- folders list --> -<div id="mailboxcontainer" class="uibox listbox"> +<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist"> +<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2> <div id="folderlist-content" class="scroller withfooter"> -<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> + <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing folderlist" folder_filter="mail" unreadwrap="%s" /> </div> <div id="folderlist-footer" class="boxfooter"> - <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="⚙" /> + <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.toggle_popup('mailboxmenu',event);return false" innerClass="inner" content="⚙" aria-haspopup="true" aria-expanded="false" aria-owns="mailboxoptionsmenu" /> <roundcube:if condition="env:quota" /> + <span class="voice"><roundcube:label name="quota"></span> <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" /> <roundcube:endif /> </div> @@ -57,7 +83,7 @@ </div> -<div id="mailview-right"> +<div id="mailview-right" role="main"> <roundcube:if condition="config:preview_pane == true" /> <div id="mailview-top" class="uibox"> @@ -67,10 +93,20 @@ <!-- messagelist --> <div id="messagelistcontainer" class="boxlistcontent"> +<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2> <roundcube:object name="messages" id="messagelist" class="records-table messagelist sortheader fixedheader" - optionsmenuIcon="true" /> + optionsmenuIcon="true" + aria-labelledby="aria-label-messagelist" /> +</div> + +<div class="voice" role="note"> +<h3><roundcube:label name="helplistnavigation" /></h3> +<pre> +<roundcube:label name="helplistkeyboardnavigation" /> +<roundcube:label name="helplistkeyboardnavmessages" /> +</pre> </div> <!-- list footer --> @@ -81,33 +117,34 @@ </div> <div id="listselectors"> - <a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.show_popup('listselectmenu');return false"><span class="handle"><roundcube:label name="select" /></span></a> + <a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.toggle_popup('listselectmenu', event);return false" aria-haspopup="true" aria-expanded="false" aria-owns="listselectmenu-menu"><span class="handle"><roundcube:label name="select" /></span></a> <roundcube:if condition="env:threads" /> - <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.show_popup('threadselectmenu');return false"><span class="handle"><roundcube:label name="threads" /></span></a> + <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.toggle_popup('threadselectmenu', event);return false" aria-haspopup="true" aria-expanded="false" aria-owns="threadselectmenu-menu"><span class="handle"><roundcube:label name="threads" /></span></a> <roundcube:endif /> </div> <div id="countcontrols" class="pagenav dark"> - <roundcube:object name="messageCountDisplay" class="countdisplay" /> + <roundcube:object name="messageCountDisplay" class="countdisplay" aria-live="polite" aria-relevant="text" /> <span class="pagenavbuttons"> - <roundcube:button command="firstpage" type="link" class="button firstpage disabled" classAct="button firstpage" classSel="button firstpage pressed" innerClass="inner" title="firstpage" content="|&lt;" /> - <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;|" /> + <roundcube:button command="firstpage" type="link" class="button firstpage disabled" classAct="button firstpage" classSel="button firstpage pressed" innerClass="inner" title="firstpage" label="first" /> + <roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" label="previous" /> + <roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" label="next" /> + <roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" label="last" /> </span> </div> <roundcube:container name="listcontrols" id="listcontrols" /> - <a href="#preview" id="mailpreviewtoggle" title="<roundcube:label name='previewpane' />"></a> + <a href="#preview" id="mailpreviewtoggle" class="iconbutton" title="<roundcube:label name='previewpane' />" role="button" tabindex="0"><roundcube:label name="previewpane" /></a> </div> </div><!-- end mailview-top --> <div id="mailview-bottom" class="uibox"> -<div id="mailpreviewframe" class="iframebox"> -<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> +<div id="mailpreviewframe" class="iframebox" role="complementary" aria-labelledby="aria-label-mailpreviewframe"> +<h2 id="aria-label-mailpreviewframe" class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h2> +<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabelmailpreviewframe" /> </div> </div><!-- end mailview-bottom --> @@ -118,59 +155,47 @@ </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)" /> <span><roundcube:label name="subject" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li> - <li><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li> - <li class="separator"><label><roundcube:label name="searchscope" /></label></li> - <li><label><input type="radio" name="s_scope" value="base" id="s_scope_base" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="currentfolder" /></span></label></li> - <li><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li> - <li><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li> - </ul> -</div> - -<div id="dragmessagemenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li> - <li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li> +<div id="dragmessagemenu" class="popupmenu" aria-hidden="true"> + <ul class="toolbarmenu" role="menu"> + <roundcube:button command="move" type="link-menuitem" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /> + <roundcube:button command="copy" type="link-menuitem" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /> </ul> </div> -<div id="mailboxmenu" class="popupmenu"> - <ul class="toolbarmenu" id="mailboxoptionsmenu"> - <li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li> - <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> - <li><roundcube:button command="import-messages" name="messageimport" type="link" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /></li> - <li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li> +<div id="mailboxmenu" class="popupmenu" aria-hidden="true"> + <h3 id="aria-label-mailboxmenu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3> + <ul class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu"> + <roundcube:button command="expunge" type="link-menuitem" label="compact" classAct="active" /> + <roundcube:button command="purge" type="link-menuitem" label="empty" classAct="active" /> + <roundcube:button command="import-messages" type="link-menuitem" name="messageimport" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /> + <roundcube:button command="folders" task="settings" type="link-menuitem" label="managefolders" classAct="active" /> <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" /> </ul> </div> -<div id="listselectmenu" class="popupmenu dropdown"> - <ul class="toolbarmenu iconized"> - <li><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li> - <li><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li> - <li><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li> - <li><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li> - <li><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li> - <li><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li> +<div id="listselectmenu" class="popupmenu dropdown" aria-hidden="true"> + <h3 id="aria-label-listselectmenu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3> + <ul id="listselectmenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-listselectmenu"> + <roundcube:button command="select-all" type="link-menuitem" label="all" class="icon" classAct="icon active" innerclass="icon mail" /> + <roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /> + <roundcube:button command="select-all" type="link-menuitem" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /> + <roundcube:button command="select-all" type="link-menuitem" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /> + <roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /> + <roundcube:button command="select-none" type="link-menuitem" label="none" class="icon" classAct="icon active" innerclass="icon cross" /> </ul> </div> -<div id="threadselectmenu" class="popupmenu dropdown"> - <ul class="toolbarmenu"> - <li><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li> - <li><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li> - <li><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li> +<div id="threadselectmenu" class="popupmenu dropdown" aria-hidden="true"> + <h3 id="aria-label-threadselectmenu" class="voice"><roundcube:label name="arialabelthreadselectmenu" /></h3> + <ul id="threadselectmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-threadselectmenu"> + <roundcube:button command="expand-all" type="link-menuitem" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /> + <roundcube:button command="expand-unread" type="link-menuitem" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /> + <roundcube:button command="collapse-all" type="link-menuitem" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /> </ul> </div> -<div id="listoptions" class="propform popupdialog"> +<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions" aria-hidden="true"> +<h2 id="aria-label-listoptions" class="voice"><roundcube:label name="arialabelmessagelistoptions" /></h2> <roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" /> <fieldset class="floating"> <legend><roundcube:label name="listcolumns" /></legend> @@ -219,11 +244,12 @@ <br style="clear:both" /> <div class="formbuttons"> <roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" /> - <roundcube:button command="menu-open" id="listmenucancel" type="input" class="button" label="cancel" /> + <roundcube:button command="menu-close" prop="messagelistmenu" id="listmenucancel" type="input" class="button" label="cancel" /> </div> </div> -<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />"> +<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />" aria-hidden="true"> + <h2 id="aria-label-uploaddialog" class="voice"><roundcube:label name="arialabelmailimportdialog" /></h2> <roundcube:object name="messageimportform" id="uploadform" buttons="no" /> <div class="formbuttons"> <roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" /> diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index a661f5720..dde15acfb 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -10,8 +10,11 @@ <div id="mainscreen"> +<h1 class="voice"><roundcube:object name="messageHeaders" valueOf="subject" /></h1> + <!-- toolbar --> -<div id="messagetoolbar" class="toolbar fullwidth"> +<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> <roundcube:if condition="!env:extwin" /> <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> <roundcube:endif /> @@ -25,35 +28,31 @@ <div id="mailview-left"> <!-- folders list --> -<div id="mailboxcontainer" class="uibox listbox"> +<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist"> +<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2> <div class="scroller"> -<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> +<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing folderlist" folder_filter="mail" unreadwrap="%s" /> </div> </div> </div> -<div id="mailview-right" class="uibox"> +<div id="mailview-right" class="uibox" role="main"> <roundcube:else /> <roundcube:object name="mailboxlist" folder_filter="mail" type="js" /> -<div id="mailview-right" class="offset fullwidth uibox"> +<div id="mailview-right" class="offset fullwidth uibox" role="main"> <roundcube:endif /> <div id="messageheader"> <span class="moreheaderstoggle"></span> -<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2> -<div class="message-headers"> -<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" /> -</div> -<roundcube:object name="messageFullHeaders" id="full-headers" /> - <!-- record navigation --> -<div id="countcontrols" class="pagenav"> +<div id="countcontrols" class="pagenav" role="navigation" aria-labelledby="aria-label-countcontrols"> + <h2 id="aria-label-countcontrols" class="voice"><roundcube:label name="arialabelmessagenav" /></h2> <roundcube:object name="messageCountDisplay" class="countdisplay" /> - <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="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" label="previous" /> + <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" label="next" /> </div> <roundcube:if condition="env:optional_format=='text'" /> @@ -70,15 +69,22 @@ </div> <roundcube:endif /> +<h2 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><roundcube:object name="messageHeaders" valueOf="subject" /></h2> +<div class="message-headers"> +<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" /> +</div> +<roundcube:object name="messageFullHeaders" id="full-headers" /> <div id="contactphoto"><roundcube:object name="contactphoto" /></div> </div> <div id="messagecontent"> -<div class="rightcol"> +<div class="rightcol" role="region" aria-labelledby="aria-label-messageattachments"> +<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2> <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" /> </div> -<div class="leftcol"> +<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody"> +<h2 id="aria-label-messagebody" class="voice"><roundcube:label name="arialabelmessagebody" /></h2> <roundcube:object name="messageObjects" id="message-objects" /> <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" /> </div> @@ -92,11 +98,11 @@ </div><!-- end mainscreen --> -<div id="attachmentmenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li> - <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li> - <roundcube:container name="attachmentmenu" id="attachmentmenu" /> +<div id="attachmentmenu" class="popupmenu" aria-hidden="true"> + <ul class="toolbarmenu" id="attachmentoptionsmenu" role="menu"> + <roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /> + <roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="icon" classAct="icon active" innerclass="icon download" /> + <roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" /> </ul> </div> diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index d509ce804..c5c95214c 100644 --- a/skins/larry/templates/messageerror.html +++ b/skins/larry/templates/messageerror.html @@ -16,11 +16,12 @@ <div id="mainscreen"> +<h1 class="voice"><roundcube:label name="messageopenerror" /></h1> + <!-- 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> +<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> + <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> </div> <div id="mainscreencontent"> @@ -28,7 +29,8 @@ <div id="mailview-left"> <!-- folders list --> -<div id="mailboxcontainer" class="uibox listbox"> +<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist"> +<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2> <div class="scroller"> <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> </div> @@ -36,7 +38,7 @@ </div> -<div id="mailview-right" class="offset uibox"> +<div id="mailview-right" class="uibox"> <div id="messagecontent" class="watermark"></div> diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html index 3b878c9d7..acc4d0ca8 100644 --- a/skins/larry/templates/messagepart.html +++ b/skins/larry/templates/messagepart.html @@ -10,24 +10,28 @@ <div id="mainscreen"> -<div id="messagetoolbar" class="toolbar fullwidth"> - <roundcube:button command="download" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" /> - <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" /> +<h1 class="voice"><roundcube:label name="attachment" />: <roundcube:var name="env:filename" /></h1> + +<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> + <roundcube:button command="download" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" title="download" /> + <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" title="print" /> <roundcube:container name="toolbar" id="messagetoolbar" /> </div> <div id="mainscreencontent"> -<div id="messagepartheader" class="uibox listbox"> - <h2 class="boxtitle"><roundcube:label name="properties" /></h2> +<div id="messagepartheader" class="uibox listbox" role="contentinfo" aria-labelledby="aria-label-contentinfo"> + <h2 class="boxtitle" id="aria-label-contentinfo"><roundcube:label name="properties" /></h2> <div class="scroller"> <roundcube:object name="messagePartControls" class="listing" /> </div> </div> -<div id="messagepartcontainer" class="uibox"> +<div id="messagepartcontainer" class="uibox" role="main" aria-labelledby="aria-label-messagepart"> + <h2 id="aria-label-messagepart" class="voice"><roundcube:label name="arialabelattachmentpreview" /></h2> <div class="iframebox"> - <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" /> + <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" title="arialabelattachmentpreview" /> </div> </div> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index 4a6d76ead..2e3b5efd1 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -7,9 +7,33 @@ <body class="iframe fullheight"> <div id="messageheader" class="previewheader"> -<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3> -<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a> +<!-- record navigation --> +<div id="countcontrols" role="toolbar" aria-labelledby="aria-label-messagetoolbar"> +<h2 id="aria-label-messagetoolbar" class="voice"><roundcube:label name="arialabelmessageactions" /></h2> +<roundcube:if condition="env:optional_format=='text'" /> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="icon" title="changeformattext" content="Text" /> + </span> + +<roundcube:elseif condition="env:optional_format=='html'" /> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="icon" title="changeformattext" content="Text" /> + </span> + +<roundcube:endif /> +<roundcube:if condition="env:mailbox != config:drafts_mbox"> + <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" label="replytomessage" /> + <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" label="replytoallmessage" /> + <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" label="forwardmessage" /> + +<roundcube:endif /> + <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" label="openinextwin" /> +</div> + +<h3 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><roundcube:object name="messageHeaders" valueOf="subject" /></h3> + +<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle" aria-expanded="false"><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> @@ -28,45 +52,25 @@ <roundcube:object name="messageFullHeaders" id="full-headers" /> -<!-- record navigation --> -<div id="countcontrols"> -<roundcube:if condition="env:optional_format=='text'" /> - <span class="buttongroup"> - <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="icon" title="changeformattext" content="Text" /> - </span> - -<roundcube:elseif condition="env:optional_format=='html'" /> - <span class="buttongroup"> - <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="icon" title="changeformattext" content="Text" /> - </span> - -<roundcube:endif /> -<roundcube:if condition="env:mailbox != config:drafts_mbox"> - <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" content="<-" /> - <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" content="<<-" /> - <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="->" /> - -<roundcube:endif /> - <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" /> -</div> - </div> -<div id="messagepreview"> -<div class="rightcol"> +<div id="messagepreview" role="main"> +<div class="rightcol" role="region" aria-labelledby="aria-label-messageattachments"> +<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2> <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" /> </div> -<div class="leftcol"> +<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody"> +<h2 id="aria-label-messagebody" class="voice"><roundcube:label name="arialabelmessagebody" /></h2> <roundcube:object name="messageObjects" id="message-objects" /> <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" /> </div> </div> -<div id="attachmentmenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li> - <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li> - <roundcube:container name="attachmentmenu" id="attachmentmenu" /> +<div id="attachmentmenu" class="popupmenu" aria-hidden="true"> + <ul class="toolbarmenu" id="attachmentoptionsmenu" role="menu"> + <roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /> + <roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="icon" classAct="icon active" innerclass="icon download" /> + <roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" /> </ul> </div> diff --git a/skins/larry/templates/responses.html b/skins/larry/templates/responses.html index 8e6884539..8f91a8f65 100644 --- a/skins/larry/templates/responses.html +++ b/skins/larry/templates/responses.html @@ -4,29 +4,31 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body class="noscroll"> +<roundcube:if condition="env:extwin" /><body class="noscroll extwin"><roundcube:else /><body class="noscroll"><roundcube:endif /> <roundcube:include file="/includes/header.html" /> <div id="mainscreen" class="offset"> +<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1> + <roundcube:include file="/includes/settingstabs.html" /> -<div id="settings-right"> +<div id="settings-right" role="main" aria-labelledby="aria-label-responseslist"> <div id="identitieslist" class="uibox listbox"> -<h2 class="boxtitle"><roundcube:label name="responses" /></h2> +<h2 class="boxtitle" id="aria-label-responseslist"><roundcube:label name="responses" /></h2> <div class="scroller withfooter"> -<roundcube:object name="responsesList" id="identities-table" class="listing" cellspacing="0" summary="Responses list" noheader="true" /> +<roundcube:object name="responsesList" id="identities-table" class="listing" cellspacing="0" noheader="true" role="listbox" /> </div> <div class="boxfooter"> -<roundcube:button command="add" type="link" title="savenewresponse" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" /> +<roundcube:button command="add" type="link" title="newresponse" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="addresponse" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" label="delete" /> </div> </div> <div id="identity-details" class="uibox contentbox"> <div class="iframebox"> - <roundcube:object name="responseframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + <roundcube:object name="responseframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabelresonseeditfrom" /> </div> </div> diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 08df7686e..34c3440cc 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -4,25 +4,28 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body class="noscroll"> +<roundcube:if condition="env:extwin" /><body class="noscroll extwin"><roundcube:else /><body class="noscroll"><roundcube:endif /> <roundcube:include file="/includes/header.html" /> <div id="mainscreen" class="offset"> +<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="preferences" /></h1> + <roundcube:include file="/includes/settingstabs.html" /> <div id="settings-right"> -<div id="sectionslist" class="uibox listbox"> +<div id="sectionslist" class="uibox listbox" role="navigation" aria-labelledby="aria-label-pefsection"> +<h2 id="aria-label-pefsection" class="boxtitle"><roundcube:label name="section" /></h2> <div class="scroller"> - <roundcube:object name="sectionslist" id="sections-table" class="listing" /> + <roundcube:object name="sectionslist" id="sections-table" class="listing iconized" noheader="true" /> </div> </div> -<div id="preferences-box" class="uibox contentbox"> +<div id="preferences-box" class="uibox contentbox" role="main"> <div class="iframebox"> - <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabelpreferencesform" /> </div> </div> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 0e8afc652..153abdc21 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -20,13 +20,10 @@ function rcube_mail_ui() searchmenu: { editable:1, callback:searchmenu }, attachmentmenu: { }, listoptions: { editable:1 }, - dragmenu: { sticky:1 }, groupmenu: { above:1 }, mailboxmenu: { above:1 }, spellmenu: { callback: spellmenu }, - // toggle: #1486823, #1486930 - 'attachment-form': { editable:1, above:1, toggle:!bw.ie&&!bw.linux }, - 'upload-form': { editable:1, toggle:!bw.ie&&!bw.linux } + 'folder-selector': { iconized:1 } }; var me = this; @@ -40,6 +37,7 @@ function rcube_mail_ui() this.init_tabs = init_tabs; this.show_about = show_about; this.show_popup = show_popup; + this.toggle_popup = toggle_popup; this.add_popup = add_popup; this.set_searchmod = set_searchmod; this.set_searchscope = set_searchscope; @@ -49,6 +47,7 @@ function rcube_mail_ui() this.update_quota = update_quota; this.get_pref = get_pref; this.save_pref = save_pref; + this.folder_search_init = folder_search_init; // set minimal mode on small screens (don't wait for document.ready) @@ -78,7 +77,7 @@ function rcube_mail_ui() function get_pref(key) { if (!prefs) { - prefs = window.localStorage ? rcmail.local_storage_get_item('prefs.larry', {}) : {}; + prefs = rcmail.local_storage_get_item('prefs.larry', {}); } // fall-back to cookies @@ -87,9 +86,8 @@ function rcube_mail_ui() if (cookie != null) { prefs[key] = cookie; - // copy value to local storage and remove cookie - if (window.localStorage) { - rcmail.local_storage_set_item('prefs.larry', prefs); + // copy value to local storage and remove cookie (if localStorage is supported) + if (rcmail.local_storage_set_item('prefs.larry', prefs)) { rcmail.set_cookie(key, cookie, new Date()); // expire cookie } } @@ -105,11 +103,8 @@ function rcube_mail_ui() { prefs[key] = val; - // write prefs to local storage - if (window.localStorage) { - rcmail.local_storage_set_item('prefs.larry', prefs); - } - else { + // write prefs to local storage (if supported) + if (!rcmail.local_storage_set_item('prefs.larry', prefs)) { // store value in cookie var exp = new Date(); exp.setYear(exp.getFullYear() + 1); @@ -138,8 +133,9 @@ function rcube_mail_ui() /*** mail task ***/ if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', menu_open) - .addEventListener('menu-save', menu_save) + rcmail.addEventListener('menu-open', menu_toggle) + .addEventListener('menu-close', menu_toggle) + .addEventListener('menu-save', save_listoptions) .addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) }) .addEventListener('responseaftersearch', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) }); @@ -157,7 +153,14 @@ function rcube_mail_ui() // add menu link for each attachment $('#attachment-list > li').each(function() { - $(this).append($('<a class="drop"></a>').click(function() { attachmentmenu(this); })); + $(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>') + .bind('click keypress', function(e) { + if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) { + attachmentmenu(this, e); + return false; + } + }) + ); }); if (get_pref('previewheaders') == '1') { @@ -184,11 +187,13 @@ function rcube_mail_ui() } } - $('#composeoptionstoggle').click(function(){ - $('#composeoptionstoggle').toggleClass('remove'); - $('#composeoptions').toggle(); + $('#composeoptionstoggle').click(function(e){ + var expanded = $('#composeoptions').toggle().is(':visible'); + $('#composeoptionstoggle').toggleClass('remove').attr('aria-expanded', expanded ? 'true' : 'false'); layout_composeview(); - save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0'); + save_pref('composeoptions', expanded ? '1' : '0'); + if (!rcube_event.is_keyboard(e)) + this.blur(); return false; }).css('cursor', 'pointer'); @@ -206,13 +211,15 @@ function rcube_mail_ui() $('#composeoptionstoggle').click(); new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right', - orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init(); + orientation:'v', relative:true, start:206, min:170, size:12, render:layout_composeview }).init(); } else if (rcmail.env.action == 'list' || !rcmail.env.action) { var previewframe = $('#mailpreviewframe').is(':visible'); - $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false }); - $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false }); - $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false }); + + $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false') + .click(function(e) { toggle_preview_pane(e); return false; }); + $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e) { switch_view_mode('list'); return false; }); + $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e) { switch_view_mode('thread'); return false; }); mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom', orientation:'h', relative:true, start:310, min:150, size:12, offset:4 }); @@ -230,7 +237,7 @@ function rcube_mail_ui() if ($('#mailview-left').length) { new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right', - orientation:'v', relative:true, start:226, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init(); + orientation:'v', relative:true, start:206, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init(); } } /*** settings task ***/ @@ -248,9 +255,9 @@ function rcube_mail_ui() new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details', orientation:'v', relative:true, start:266, min:180, size:12 }).init(); - new rcube_scroller('#folderslist-content', '#folderslist-header', '#folderslist-footer'); - rcmail.addEventListener('setquota', update_quota); + + folder_search_init($('#folderslist')); } else if (rcmail.env.action == 'identities') { new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details', @@ -265,7 +272,9 @@ function rcube_mail_ui() orientation:'v', relative:true, start:266, min:180, size:12 }).init(); } else if (rcmail.env.action == 'edit-prefs') { - $('<a href="#toggle">▼</a>') + $('<a href="#toggle"></a>') + .text(env.toggleoptions) + .attr('title', env.toggleoptions) .addClass('advanced-toggle') .appendTo('#preferences-details fieldset.advanced legend'); @@ -286,9 +295,9 @@ function rcube_mail_ui() if (rcmail.env.action == '') { new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right', - orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init(); + orientation:'v', relative:true, start:206, min:150, size:12, render:resize_leftcol }).init(); new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box', - orientation:'v', relative:true, start:286, min:270, size:12 }).init(); + orientation:'v', relative:true, start:266, min:260, size:12 }).init(); } var dragmenu = $('#dragcontactmenu'); @@ -317,7 +326,7 @@ function rcube_mail_ui() if ($('option:selected', this).val() != '') title = $('option:selected', this).text(); - var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>') + var overlay = $('<a class="menuselector" tabindex="-1"><span class="handle">' + title + '</span></a>') .css('position', 'absolute') .offset(select.position()) .insertAfter(select); @@ -329,10 +338,14 @@ function rcube_mail_ui() // re-set original select width to fix click action and options width in some browsers select.width(overlay.width()) - .change(function() { + .on(bw.mz ? 'change keyup' : 'change', function() { var val = $('option:selected', this).text(); $(this).next().children().text(val); }); + + select + .on('focus', function(e){ overlay.addClass('focus'); }) + .on('blur', function(e){ overlay.removeClass('focus'); }); }); // set min-width to show all toolbar buttons @@ -341,63 +354,12 @@ function rcube_mail_ui() screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30); } - $(document.body) - .bind('mouseup', body_mouseup) - .bind('keyup', function(e){ - if (e.keyCode == 27) { - for (var id in popups) { - if (popups[id].is(':visible')) - show_popup(id, false); - } - } - }); - - $('iframe').load(function(e){ - // this = iframe - try { - var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null; - $(doc).mouseup(body_mouseup); - } - catch (e) { - // catch possible "Permission denied" error in IE - }; - }) - .contents().mouseup(body_mouseup); - // don't use $(window).resize() due to some unwanted side-effects window.onresize = resize; resize(); } /** - * Handler for mouse-up events on the document body. - * This will close all open popup menus - */ - function body_mouseup(e) - { - var config, obj, target = e.target; - - if (target.className == 'inner') - target = e.target.parentNode; - - for (var id in popups) { - obj = popups[id]; - config = popupconfig[id]; - if (obj.is(':visible') - && target.id != id+'link' - && target != obj.get(0) // check if scroll bar was clicked (#1489832) - && !config.toggle - && (!config.editable || !target_overlaps(target, obj.get(0))) - && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0))) - && !$(target).is('.folder-selector-link') - ) { - var myid = id+''; - window.setTimeout(function() { show_popupmenu(myid, false); }, 10); - } - } - } - - /** * Update UI on window resize */ function resize(e) @@ -475,7 +437,10 @@ function rcube_mail_ui() minHeight: 90 }).show(); - me.message_timer = window.setTimeout(dialog_close, p.timeout); + me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog'); + + if (p.timeout > 0) + me.message_timer = window.setTimeout(dialog_close, p.timeout); } } @@ -489,7 +454,7 @@ function rcube_mail_ui() $('#message-objects div a').addClass('button'); if (!$('#attachment-list li').length) { - $('div.rightcol').hide(); + $('div.rightcol').hide().attr('aria-hidden', 'true'); $('div.leftcol').css('margin-right', '0'); } } @@ -525,19 +490,19 @@ function rcube_mail_ui() w, h, bh, ovflw, btns = 0, minheight = 300, - bh = (form.height() - bottom.position().top); + bh = form.height() - bottom.position().top; ovflw = minheight - bh; btns = ovflw > -100 ? 0 : 40; - bottom.css('height', Math.max(minheight, bh) + 'px'); + bottom.height(Math.max(minheight, bh)); form.css('overflow', ovflw > 0 ? 'auto' : 'hidden'); w = body.parent().width() - 5; - h = body.parent().height() - 16; + h = body.parent().height() - 8; body.width(w).height(h); - $('#composebody_tbl').width((w+8)+'px').height('').css('margin-top', '1px'); - $('#composebody_ifr').width((w+8)+'px').height((h-40)+'px'); - $('#googie_edit_layer').height(h+'px'); + $('#composebodycontainer > div').width(w+8); + $('#composebody_ifr').height(h + 4 - $('div.mce-toolbar').height()); + $('#googie_edit_layer').height(h - 8); // $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons'); // $('#composeformbuttons')[(btns ? 'show' : 'hide')](); @@ -548,16 +513,59 @@ function rcube_mail_ui() function update_quota(p) { - var step = 24, step_count = 20, + var element = $('#quotadisplay'), menu = $('#quotamenu'), + step = 24, step_count = 20, y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0; // never show full-circle if quota is close to 100% but below. if (p.total && y == step * step_count && p.percent < 100) y -= step; - $('#quotadisplay').css('background-position', '0 -'+y+'px'); + element.css('background-position', '0 -' + y + 'px'); + + if (p.table) { + if (!menu.length) + menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body')); + + menu.html(p.table); + element.css('cursor', 'pointer').off('click').on('click', function(e) { + return rcmail.command('menu-open', 'quotamenu', e.target, e); + }); + } } + function folder_search_init(container) + { + // animation to unfold list search box + $('.boxtitle a.search', container).click(function(e) { + var title = $('.boxtitle', container), + box = $('.listsearchbox', container), + dir = box.is(':visible') ? -1 : 1, + height = 34 + ($('select', box).length ? 22 : 0); + + box.slideToggle({ + duration: 160, + progress: function(animation, progress) { + if (dir < 0) progress = 1 - progress; + $('.scroller', container).css('top', (title.outerHeight() + height * progress) + 'px'); + }, + complete: function() { + box.toggleClass('expanded'); + if (box.is(':visible')) { + box.find('input[type=text]').focus(); + height = 34 + ($('select', box).length ? $('select', box).outerHeight() + 4 : 0); + $('.scroller', container).css('top', (title.outerHeight() + height) + 'px'); + } + else { + $('a.reset', box).click(); + } + // TODO: save state in localStorage + } + }); + + return false; + }); + } function enable_command(p) { @@ -586,75 +594,35 @@ function rcube_mail_ui() /** * Trigger for popup menus */ - function show_popup(popup, show, config) + function toggle_popup(popup, e, config) { // auto-register menu object if (config || !popupconfig[popup]) add_popup(popup, config); - var visible = show_popupmenu(popup, show), - config = popupconfig[popup]; - if (typeof config.callback == 'function') - config.callback(visible); + return rcmail.command('menu-open', popup, e.target, e); } /** - * Show/hide a specific popup menu + * (Deprecated) trigger for popup menus */ - function show_popupmenu(popup, show) + function show_popup(popup, show, config) { - var obj = popups[popup], - config = popupconfig[popup], - ref = $(config.link ? config.link : '#'+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.length) { - var parent = ref.parent(), - win = $(window), - pos; - - if (parent.hasClass('dropbutton')) - ref = parent; + // auto-register menu object + if (config || !popupconfig[popup]) + add_popup(popup, config); + config = popupconfig[popup] || {}; + var ref = $(config.link ? config.link : '#'+popup+'link'), 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'](); - - return show; - } - - /** - * - */ - function target_overlaps(target, elem) - { - while (target.parentNode) { - if (target.parentNode == elem) - return true; - target = target.parentNode; - } - return false; + if (ref.has('.inner')) + ref = ref.children('.inner'); + + // fire command with simulated mouse click event + return rcmail.command('menu-open', + { menu:popup, show:show }, + ref.get(0), + $.Event('click', { target:ref.get(0), pageX:pos.left, pageY:pos.top, clientX:pos.left, clientY:pos.top })); } @@ -670,7 +638,7 @@ function rcube_mail_ui() topstyles, bottomstyles, uid; frame.toggle(); - button.removeClass().addClass(visible ? 'enabled' : 'closed'); + button.toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false'); if (visible) { $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); @@ -720,9 +688,9 @@ function rcube_mail_ui() // add toggle button to full headers table if (full.is(':visible')) - button.attr('href', '#hide').removeClass('add').addClass('remove') + button.attr('href', '#hide').removeClass('add').addClass('remove').attr('aria-expanded', 'true'); else - button.attr('href', '#details').removeClass('remove').addClass('add') + button.attr('href', '#details').removeClass('remove').addClass('add').attr('aria-expanded', 'false'); save_pref('previewheaders', full.is(':visible') ? '1' : '0'); } @@ -734,25 +702,57 @@ function rcube_mail_ui() function switch_view_mode(mode, force) { if (force || !$('#mail'+mode+'mode').hasClass('disabled')) { - $('#maillistmode, #mailthreadmode').removeClass('selected'); - $('#mail'+mode+'mode').addClass('selected'); + $('#maillistmode, #mailthreadmode').removeClass('selected').attr('tabindex', '0').attr('aria-disabled', 'false'); + $('#mail'+mode+'mode').addClass('selected').attr('tabindex', '-1').attr('aria-disabled', 'true'); } } - /**** popup callbacks ****/ + /**** popup menu callbacks ****/ - function menu_open(p) + /** + * Handler for menu-open and menu-close events + */ + function menu_toggle(p) { - if (p && p.props && p.props.menu == 'attachmentmenu') - show_popupmenu('attachmentmenu'); - else - show_listoptions(); - } + if (p && p.name == 'messagelistmenu') { + show_listoptions(p); + } + else if (p) { + // adjust menu position according to config + var config = popupconfig[p.name] || {}, + ref = $(config.link || '#'+p.name+'link'), + visible = p.obj && p.obj.is(':visible'), + above = config.above; + + // fix position according to config + if (p.obj && visible && ref.length) { + var parent = ref.parent(), + win = $(window), pos; + + if (parent.hasClass('dropbutton')) + ref = parent; + + if (config.above || ref.hasClass('dropbutton')) { + pos = ref.offset(); + p.obj.css({ left:pos.left+'px', top:(pos.top + (config.above ? -p.obj.height() : ref.outerHeight()))+'px' }); + } + } - function menu_save(prop) - { - save_listoptions(); + // add the right classes + if (p.obj && config.iconized) { + p.obj.children('ul').addClass('iconized'); + } + + // apply some data-attributes from menu config + if (p.obj && config.editable) + p.obj.attr('data-editable', 'true'); + + // trigger callback function + if (typeof config.callback == 'function') { + config.callback(visible, p); + } + } } function searchmenu(show) @@ -789,7 +789,7 @@ function rcube_mail_ui() } } - function attachmentmenu(elem) + function attachmentmenu(elem, event) { var id = elem.parentNode.id.replace(/^attach/, ''); @@ -802,41 +802,44 @@ function rcube_mail_ui() }); popupconfig.attachmentmenu.link = elem; - rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}); + rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event); } - function spellmenu(show) + function spellmenu(show, p) { - var link, li, + var k, link, li, lang = rcmail.spellcheck_lang(), - menu = popups.spellmenu, - ul = $('ul', menu); + ul = $('ul', p.obj); if (!ul.length) { - ul = $('<ul class="toolbarmenu selectable">'); - - for (i in rcmail.env.spell_langs) { - li = $('<li>'); - link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i]) - .addClass('active').data('lang', i) - .click(function() { - rcmail.spellcheck_lang_set($(this).data('lang')); + ul = $('<ul class="toolbarmenu selectable" role="menu">'); + + for (k in rcmail.env.spell_langs) { + li = $('<li role="menuitem">'); + link = $('<a href="#'+k+'" tabindex="0"></a>').text(rcmail.env.spell_langs[k]) + .addClass('active').data('lang', k) + .bind('click keypress', function(e) { + if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) { + rcmail.spellcheck_lang_set($(this).data('lang')); + rcmail.hide_menu('spellmenu', e); + return false; + } }); link.appendTo(li); li.appendTo(ul); } - ul.appendTo(menu); + ul.appendTo(p.obj); } // select current language $('li', ul).each(function() { var el = $('a', this); if (el.data('lang') == lang) - el.addClass('selected'); + el.addClass('selected').attr('aria-selected', 'true'); else if (el.hasClass('selected')) - el.removeClass('selected'); + el.removeClass('selected').removeAttr('aria-selected'); }); } @@ -844,13 +847,13 @@ function rcube_mail_ui() /** * */ - function show_listoptions() + function show_listoptions(p) { var $dialog = $('#listoptions'); // close the dialog if ($dialog.is(':visible')) { - $dialog.dialog('close'); + $dialog.dialog('close', p.originalEvent); return; } @@ -869,8 +872,13 @@ function rcube_mail_ui() resizable: false, closeOnEscape: true, title: null, - close: function() { + open: function(e) { + setTimeout(function(){ $dialog.find('a, input:not(:disabled)').not('[aria-disabled=true]').first().focus(); }, 100); + }, + close: function(e) { $dialog.dialog('destroy').hide(); + if (e.originalEvent && rcube_event.is_keyboard(e.originalEvent)) + $('#listmenulink').focus(); }, minWidth: 500, width: $dialog.width()+25 @@ -881,10 +889,13 @@ function rcube_mail_ui() /** * */ - function save_listoptions() + function save_listoptions(p) { $('#listoptions').dialog('close'); + if (rcube_event.is_keyboard(p.originalEvent)) + $('#listmenulink').focus(); + var sort = $('input[name="sort_col"]:checked').val(), ord = $('input[name="sort_ord"]:checked').val(), cols = $('input[name="list_col[]"]:checked') @@ -982,7 +993,7 @@ function rcube_mail_ui() }); } - function show_uploadform() + function show_uploadform(e) { var $dialog = $('#upload-dialog'); @@ -1008,6 +1019,10 @@ function rcube_mail_ui() resizable: false, closeOnEscape: true, title: $dialog.attr('title'), + open: function(e) { + if (!document.all) + $('input[type=file]', $dialog).first().click(); + }, close: function() { try { $('#upload-dialog form').get(0).reset(); } catch(e){ } // ignore errors @@ -1017,9 +1032,6 @@ function rcube_mail_ui() }, width: 480 }).show(); - - if (!document.all) - $('input[type=file]', $dialog).first().click(); } function add_uploadfile(e) @@ -1048,7 +1060,10 @@ function rcube_mail_ui() row.show(); $('#' + which + '-link').hide(); + layout_composeview(); + $('input,textarea', row).focus(); + return false; } @@ -1086,47 +1101,35 @@ function rcube_mail_ui() content.attr('id', id); } - // first hide not selected tabs - current = current || 0; - fs.each(function(idx) { if (idx != current) $(this).hide(); }); - // create tabs container - var tabs = $('<div>').addClass('tabsbar').prependTo(content); + var tabs = $('<ul>').addClass('tabsbar').prependTo(content); // convert fildsets into tabs fs.each(function(idx) { - var tab, a, elm = $(this), legend = elm.children('legend'); + var tab, a, elm = $(this), + legend = elm.children('legend'), + tid = id + '-t' + idx; // create a tab - a = $('<a>').text(legend.text()).attr('href', '#'); - tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'}) - .click(function() { show_tab(id, idx); return false }) + a = $('<a>').text(legend.text()).attr('href', '#' + tid); + tab = $('<li>').addClass('tablink'); // remove legend legend.remove(); - // style fieldset - elm.addClass('tab'); - // style selected tab - if (idx == current) - tab.addClass('selected'); + + // link fieldset with tab item + elm.attr('id', tid); // add the tab to container tab.append(a).appendTo(tabs); }); - } - - function show_tab(id, index) - { - var fs = $('#'+id).children('fieldset'); - fs.each(function(idx) { - // Show/hide fieldset (tab content) - $(this)[index==idx ? 'show' : 'hide'](); - // Select/unselect tab - $('#tab'+idx).toggleClass('selected', idx==index); + // use jquery UI tabs widget to do the interaction and styling + content.tabs({ + active: current || 0, + heightStyle: 'content', + activate: function(e, ui) {resize(); } }); - - resize(); } /** @@ -1163,6 +1166,8 @@ function rcube_mail_ui() /** * Roundcube Scroller class + * + * @deprecated Use treelist widget */ function rcube_scroller(list, top, bottom) { @@ -1237,6 +1242,7 @@ function rcube_splitter(p) this.handle = $('<div>') .attr('id', this.id) .attr('unselectable', 'on') + .attr('role', 'presentation') .addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v')) .appendTo(this.parent) .bind('mousedown', onDragStart); @@ -1454,4 +1460,4 @@ rcube_splitter.get_instance = function(id) return rcube_splitter._instances[id]; }; -// @license-end
\ No newline at end of file +// @license-end |
