Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Attachment: add focus style so that it gets highlighted when tabbing through inputs

Browse source 
- also, usability: use a <label> for “select attachment…” and connect it to the <input type=“file”>
This commit is contained in:
Felix Niklas 2018-07-29 15:20:40 +02:00
parent 23dd56feb1
commit 7d5d2626c2
3 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/app/views/generic/attachment.jst.eco
View file

@ -2,8 +2,11 @@
<div class="article-attachment"> <div class="article-attachment">
<div class="attachmentPlaceholder"> <div class="attachmentPlaceholder">
<span class="attachmentPlaceholder-inputHolder fileUpload"> <span class="attachmentPlaceholder-inputHolder fileUpload">
<%- @T('select attachment...') %> <% uid = _.uniqueId('fileUpload_') %>
<input multiple="multiple" type="file" name="file" style=""> <input multiple="multiple" type="file" name="file" id="<%- uid %>">
<label class="attachmentPlaceholder-label" for="<%- uid %>">
<%- @T('select attachment...') %>
</label>
</span> </span>
</div> </div>
<div class="attachmentUpload hide"> <div class="attachmentUpload hide">

9
app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
View file

@ -69,9 +69,12 @@
<div class="article-attachment"> <div class="article-attachment">
<div class="attachmentPlaceholder"> <div class="attachmentPlaceholder">
<span class="attachmentPlaceholder-hint"><%- @T('Enter Answer or') %></span> <span class="attachmentPlaceholder-hint"><%- @T('Enter Answer or') %></span>
<span class="attachmentPlaceholder-inputHolder"> <span class="attachmentPlaceholder-inputHolder fileUpload">
<%- @T('select attachment...') %> <% uid = _.uniqueId('fileUpload_') %>
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"> <input multiple="multiple" type="file" name="file" id="<%- uid %>">
<label class="attachmentPlaceholder-label" for="<%- uid %>">
<%- @T('select attachment...') %>
</label>
</span> </span>
</div> </div>
<div class="attachmentUpload hide"> <div class="attachmentUpload hide">

7
app/assets/stylesheets/zammad.scss
View file

@ -1358,7 +1358,8 @@ label,
.inline-label, .inline-label,
.label-success, .label-success,
.label-warning, .label-warning,
.label-danger { .label-danger,
.fileUpload label {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
text-align: inherit; text-align: inherit;
@ -7378,6 +7379,10 @@ label + .wizard-buttonList {
padding: 0; padding: 0;
@extend %clickable; @extend %clickable;
opacity: 0; opacity: 0;
&:focus + label {
text-decoration: underline;
}
} }
.imagePreview img { .imagePreview img {