diff --git a/program/steps/mail/compose.inc b/program/steps/mail/compose.inc index 99a4ec840..123bfda7f 100644 --- a/program/steps/mail/compose.inc +++ b/program/steps/mail/compose.inc @@ -1227,6 +1227,7 @@ function rcmail_compose_attachment_list($attrib) 'href' => "#load", 'class' => 'filename', 'onclick' => sprintf("return %s.command('load-attachment','rcmfile%s', this, event)", rcmail_output::JS_OBJECT_NAME, $id), + 'tabindex' => $attrib['tabindex'] ?: '0', ), $link_content); $delete_link = html::a(array( @@ -1239,8 +1240,8 @@ function rcmail_compose_attachment_list($attrib) ), $button); $out .= html::tag('li', array( - 'id' => 'rcmfile'.$id, - 'class' => rcube_utils::file2class($a_prop['mimetype'], $a_prop['name']), + 'id' => 'rcmfile' . $id, + 'class' => rcube_utils::file2class($a_prop['mimetype'], $a_prop['name']), ), $COMPOSE['icon_pos'] == 'left' ? $delete_link.$content_link : $content_link.$delete_link ); diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index 119e72954..e0051839a 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -827,6 +827,7 @@ html.touch { &:extend(.font-icon-class); .font-icon-regular(@fa-var-file); height: @attachmentslist-item-height; + margin: 0; } &.txt:before, @@ -943,6 +944,7 @@ html.touch { a.filename { display: flex; overflow: hidden; + padding: 0 .2em; } .attachment-name { @@ -952,7 +954,7 @@ html.touch { .attachment-size { color: @color-list-secondary; - padding: 0 .25em; + padding-left: .25em; } } } diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index f6f51b12c..50db96f2c 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -2855,20 +2855,27 @@ function rcube_elastic_ui() { item = $(item); - if (!item.is('.no-menu') && !item.children('.drop').length) { - var label = rcmail.gettext('options'); - var button = $('') - .attr({ + if (!item.is('.no-menu') && !item.children('.dropdown').length) { + var label = rcmail.gettext('options'), + fname = item.find('a.filename'); + + var button = $('').attr({ href: '#', - tabindex: 0, + tabindex: fname.attr('tabindex') || 0, title: label, 'class': 'button icon dropdown skip-content' }) .on('click', function(e) { return attachmentmenu($('#attachmentmenu'), button, e); }) - .append($('').attr('class', 'inner').text(label)) - .appendTo(item); + .append($('').attr('class', 'inner').text(label)); + + if (fname.length) { + button.insertAfter(fname); + } + else { + button.appendTo(item); + } } }; diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 270aeb051..182a13673 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -907,17 +907,26 @@ function rcube_mail_ui() { item = $(item); - if (!item.children('.drop').length) - var label = rcmail.gettext('options'); - item.append($('') - .attr({'class': 'drop skip-content', tabindex: 0, 'aria-haspopup': true, title: label}) + if (!item.children('.drop').length) { + var label = rcmail.gettext('options'), + fname = item.find('a.filename'), + tabindex = fname.attr('tabindex') || 0; + + var button = $('') + .attr({'class': 'drop skip-content', tabindex: tabindex, 'aria-haspopup': true, title: label}) .text(label) .on('click keypress', function(e) { if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) { attachmentmenu(this, e); return false; } - })); + }); + + if (fname.length) + button.insertAfter(fname); + else + button.appendTo(item); + } } /**