summaryrefslogtreecommitdiff
path: root/skins/larry
diff options
context:
space:
mode:
Diffstat (limited to 'skins/larry')
-rw-r--r--skins/larry/addressbook.css108
-rw-r--r--skins/larry/editor_content.css31
-rw-r--r--skins/larry/images/buttons.pngbin39455 -> 16644 bytes
-rw-r--r--skins/larry/images/listicons.pngbin29530 -> 29198 bytes
-rw-r--r--skins/larry/includes/footer.html1
-rw-r--r--skins/larry/includes/header.html18
-rw-r--r--skins/larry/includes/links.html1
-rw-r--r--skins/larry/includes/mailtoolbar.html58
-rw-r--r--skins/larry/includes/settingstabs.html8
-rw-r--r--skins/larry/mail.css469
-rw-r--r--skins/larry/print.css11
-rw-r--r--skins/larry/settings.css149
-rw-r--r--skins/larry/styles.css679
-rw-r--r--skins/larry/templates/about.html2
-rw-r--r--skins/larry/templates/addressbook.html122
-rw-r--r--skins/larry/templates/compose.html132
-rw-r--r--skins/larry/templates/contactedit.html10
-rw-r--r--skins/larry/templates/folders.html44
-rw-r--r--skins/larry/templates/identities.html15
-rw-r--r--skins/larry/templates/importcontacts.html25
-rw-r--r--skins/larry/templates/login.html10
-rw-r--r--skins/larry/templates/mail.html150
-rw-r--r--skins/larry/templates/message.html48
-rw-r--r--skins/larry/templates/messageerror.html14
-rw-r--r--skins/larry/templates/messagepart.html18
-rw-r--r--skins/larry/templates/messagepreview.html68
-rw-r--r--skins/larry/templates/responses.html14
-rw-r--r--skins/larry/templates/settings.html13
-rw-r--r--skins/larry/ui.js440
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
index df4b3afd5..21298ab59 100644
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
Binary files differ
diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index 551639876..6a5edfdb1 100644
--- a/skins/larry/images/listicons.png
+++ b/skins/larry/images/listicons.png
Binary files differ
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 &amp;&amp; !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 &copy; 2005-2013, The Roundcube Dev Team</p>
+<p class="copyright">Copyright &copy; 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="&#9881;" />
+ <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="|&amp;lt;" />
- <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&amp;lt;" />
- <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&amp;gt;" />
- <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&amp;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="|&amp;lt;" />
- <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&amp;lt;" />
- <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&amp;gt;" />
- <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&amp;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="&#9881;" />
+ <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="&#9881;" 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" />
&nbsp;&#9679;&nbsp; <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="&#9881;" />
+ <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.toggle_popup('mailboxmenu',event);return false" innerClass="inner" content="&#9881;" 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" />
- &nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.show_popup('threadselectmenu');return false"><span class="handle"><roundcube:label name="threads" /></span></a>
+ &nbsp; <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="|&amp;lt;" />
- <roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" content="&amp;lt;" />
- <roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" content="&amp;gt;" />
- <roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" content="&amp;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="&amp;lt;" />
- <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;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>
+ &nbsp;
+<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>
+ &nbsp;
+<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" />
+ &nbsp;
+<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>
- &nbsp;
-<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>
- &nbsp;
-<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="&lt;-" />
- <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" content="&lt;&lt;-" />
- <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="-&gt;" />
- &nbsp;
-<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">&#9660;</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