From ea0866a1adc9239b8b115ab2490e1dd88f3c64ec Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 7 May 2014 20:04:13 +0200 Subject: Improve keyboard navigation on compose screen: define tabindex groups + enable keyboard controls of contacts list widget --- skins/larry/addressbook.css | 17 --------- skins/larry/mail.css | 29 +++++++++++++-- skins/larry/styles.css | 30 ++++++++++++++++ skins/larry/templates/addressbook.html | 2 +- skins/larry/templates/compose.html | 66 +++++++++++++++++----------------- skins/larry/ui.js | 13 ++++--- 6 files changed, 98 insertions(+), 59 deletions(-) (limited to 'skins/larry') diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index bfdd68127..75dc0d8c3 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -138,23 +138,6 @@ 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; } diff --git a/skins/larry/mail.css b/skins/larry/mail.css index ff590c45d..c5919ffe3 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -1358,13 +1358,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; @@ -1386,6 +1392,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; } @@ -1394,20 +1401,36 @@ div.message-partheaders .headers-table td.header { background-position: 6px -1555px; } +#contacts-table.focus tr.focused td.contactgroup { + background-position: 4px -1555px; +} + #contacts-table tr.unfocused td.contactgroup, #contacts-table tr.selected td.contactgroup { background-position: 6px -1579px; } +#contacts-table.focus tr.selected.focused td.contactgroup { + background-position: 4px -1579px; +} + #contacts-table td.contact { background-position: 6px -1603px; } +#contacts-table.focus tr.focused td.contact { + background-position: 4px -1603px; +} + #contacts-table tr.unfocused td.contact, #contacts-table tr.selected td.contact { background-position: 6px -1627px; } +#contacts-table.focus tr.selected.focused td.contact { + background-position: 4px -1627px; +} + #compose-content { position: absolute; top: 0; diff --git a/skins/larry/styles.css b/skins/larry/styles.css index cbff87bec..e1dbeeaa9 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -1190,6 +1190,36 @@ a.iconlink.upload { 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: 0; + padding-left: 6px; +} + +.listing.iconized thead tr td:first-child, +.listing.iconized tbody tr td:first-child { + 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 */ +.listing.focus tbody tr.focused > td:first-child { + border-left: 2px solid #b0ccd7; + padding-left: 4px; +} + +.listing.iconized.focus tbody tr.focused > td:first-child { + padding-left: 34px; +} + +.listing.focus tbody tr.selected.focused > td:first-child { + border-left-color: #9ec2d0; +} + +.listing.inconized.focus tr.focused td:first-child { + padding-left: 34px; +} + .listbox .listitem.selected, .listbox .tablink.selected, .listbox .listitem.selected > a, diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index 97efdc6f3..0b1009f7e 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -54,7 +54,7 @@
- +
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html index 07d935795..5eedca204 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -18,21 +18,21 @@

Application toolbar

@@ -52,9 +52,9 @@
- -
- + +
+
@@ -89,42 +89,42 @@ - + - x + x - + - x + x - + - x + x - + - x + x - + - - - - + + + + - + @@ -139,24 +139,24 @@ + + - + - + - + @@ -167,12 +167,12 @@
- +

- +
diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 922bb2119..1d38ceae1 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -195,11 +195,13 @@ function rcube_mail_ui() } } - $('#composeoptionstoggle').click(function(){ + $('#composeoptionstoggle').click(function(e){ $('#composeoptionstoggle').toggleClass('remove'); $('#composeoptions').toggle(); layout_composeview(); save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0'); + if (!rcube_event.is_keyboard(e)) + this.blur(); return false; }).css('cursor', 'pointer'); @@ -1071,7 +1073,7 @@ function rcube_mail_ui() }); } - function show_uploadform() + function show_uploadform(e) { var $dialog = $('#upload-dialog'); @@ -1097,6 +1099,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 @@ -1106,9 +1112,6 @@ function rcube_mail_ui() }, width: 480 }).show(); - - if (!document.all) - $('input[type=file]', $dialog).first().click(); } function add_uploadfile(e) -- cgit v1.2.3