Replaces legacy del and attachment icons with SVG in attachments form (#42576).

git-svn-id: https://svn.redmine.org/redmine/trunk@23667 e93f8b46-1217-0410-a6f0-8f06a7374b81

3 files changed, 23 insertions, 8 deletions

diff --git a/app/assets/javascripts/attachments.js b/app/assets/javascripts/attachments.js
index df9c7090e..4c74b2d74 100644
--- a/app/assets/javascripts/attachments.js
+++ b/app/assets/javascripts/attachments.js
@@ -5,9 +5,13 @@
  */
 
 function addFile(inputEl, file, eagerUpload) {
-  var attachmentsFields = $(inputEl).closest('.attachments_form').find('.attachments_fields');
-  var addAttachment = $(inputEl).closest('.attachments_form').find('.add_attachment');
+  var attachmentsForm = $(inputEl).closest('.attachments_form')
+  var attachmentsFields = attachmentsForm.find('.attachments_fields');
+  var attachmentsIcons = attachmentsForm.find('.attachments_icons');
+  var addAttachment = attachmentsForm.find('.add_attachment');
   var maxFiles = ($(inputEl).attr('multiple') == 'multiple' ? 10 : 1);
+  var delIcon = attachmentsIcons.find('svg.svg-del').clone();
+  var attachmentIcon = attachmentsIcons.find('svg.svg-attachment').clone();
 
   if (attachmentsFields.children().length < maxFiles) {
     var attachmentId = addFile.nextAttachmentId++;
@@ -16,12 +20,14 @@ function addFile(inputEl, file, eagerUpload) {
     if (!param) {param = 'attachments'};
 
     fileSpan.append(
+        attachmentIcon,
         $('<input>', { type: 'text', 'class': 'icon icon-attachment filename readonly', name: param +'[' + attachmentId + '][filename]', readonly: 'readonly'} ).val(file.name),
         $('<input>', { type: 'text', 'class': 'description', name: param + '[' + attachmentId + '][description]', maxlength: 255, placeholder: $(inputEl).data('description-placeholder') } ).toggle(!eagerUpload),
         $('<input>', { type: 'hidden', 'class': 'token', name: param + '[' + attachmentId + '][token]'} ),
-        $('<a>&nbsp</a>').attr({ href: "#", 'class': 'icon-only icon-del remove-upload' }).click(removeFile).toggle(!eagerUpload)
+        $('<a>', { href: "#", 'class': 'icon-only icon-del remove-upload' }).append(delIcon).click(removeFile).toggle(!eagerUpload)
     ).appendTo(attachmentsFields);
 
+
     if ($(inputEl).data('description') == 0) {
       fileSpan.find('input.description').remove();
     }
@@ -63,7 +69,7 @@ function ajaxUpload(file, attachmentId, fileSpan, inputEl) {
       .done(function(result) {
         addInlineAttachmentMarkup(file);
         progressSpan.progressbar( 'value', 100 ).remove();
-        fileSpan.find('input.description, a').css('display', 'inline-block');
+        fileSpan.find('input.description, a').css('display', 'inline-flex');
       })
       .fail(function(result) {
         progressSpan.text(result.statusText);
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1b77b95b5..3fd467f0d 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1111,10 +1111,10 @@ span.required {color: #bb0000;}
 .attachments_fields input.description, #existing-attachments input.description {margin-left:4px; width:340px;}
 .attachments_fields>span, #existing-attachments>span {display:block; white-space:nowrap;}
 /* ToDo: delete this line when legacy icons are deleted */
-.attachments_fields , #existing-attachments .icon-attachment {background-image: none; padding-left: 0}
+.attachments_fields .icon-attachment, #existing-attachments .icon-attachment {background-image: none; padding-left: 0}
 .attachments_fields input.filename, #existing-attachments .filename {border:0; width:250px; color:#555; background-color:inherit; }
 .tabular input.filename {max-width:75% !important;}
-.attachments_fields input.filename {height:1.8em;}
+.attachments_fields input.filename {height:1.8em;padding-right: 0;}
 .attachments_fields .ajax-waiting input.filename {background:url(/hourglass.png) no-repeat 0px 50%;}
 .attachments_fields .ajax-loading input.filename {background:url(/loading.gif) no-repeat 0px 50%;}
 .attachments_fields div.ui-progressbar { width: 100px; height:14px; margin: 2px 0 -5px 8px; display: inline-block; }
@@ -1856,6 +1856,11 @@ svg.s18 {
   height: 1.125rem;
 }
 
+svg.s16 {
+  width: 1rem;
+  height: 1rem;
+}
+
 svg.s14 {
   width: 0.875rem;
   height: 0.875rem;
diff --git a/app/views/attachments/_form.html.erb b/app/views/attachments/_form.html.erb
index 7bda59c95..c8bb84123 100644
--- a/app/views/attachments/_form.html.erb
+++ b/app/views/attachments/_form.html.erb
@@ -7,17 +7,21 @@
 <% css_class = (defined?(filedrop) && filedrop == false ? '' : (attachment_format_custom_field ? 'custom-field-filedrop' : 'filedrop')) %>
 
 <span class="attachments_form">
+  <span class="attachments_icons hidden">
+    <%= sprite_icon('del', icon_only: true, css_class: 'svg-del') %>
+    <%= sprite_icon('attachment', icon_only: true, size: 16, css_class: 'svg-attachment') %>
+  </span>
   <span class="attachments_fields">
   <% if saved_attachments.present? %>
     <% saved_attachments.each_with_index do |attachment, i| %>
       <span id="attachments_p<%= i %>">
         <%= text_field_tag("#{attachment_param}[p#{i}][filename]", attachment.filename, :class => 'filename') %>
         <% if attachment.container_id.present? %>
-          <%= link_to l(:label_delete), "#", :onclick => "$(this).closest('.attachments_form').find('.add_attachment').show(); $(this).parent().remove(); return false;", :class => 'icon-only icon-del' %>
+          <%= link_to sprite_icon('del', l(:button_delete), icon_only: true), "#", :onclick => "$(this).closest('.attachments_form').find('.add_attachment').show(); $(this).parent().remove(); return false;", :class => 'icon-only icon-del' %>
           <%= hidden_field_tag "#{attachment_param}[p#{i}][id]", attachment.id %>
         <% else %>
           <%= text_field_tag("#{attachment_param}[p#{i}][description]", attachment.description, :maxlength => 255, :placeholder => l(:label_optional_description), :class => 'description') if description %>
-          <%= link_to('&nbsp;'.html_safe, attachment_path(attachment, :attachment_id => "p#{i}", :format => 'js'), :method => 'delete', :remote => true, :class => 'icon-only icon-del remove-upload') %>
+          <%= link_to(sprite_icon('del', l(:button_delete), icon_only: true), attachment_path(attachment, :attachment_id => "p#{i}", :format => 'js'), :method => 'delete', :remote => true, :class => 'icon-only icon-del remove-upload') %>
           <%= hidden_field_tag "#{attachment_param}[p#{i}][token]", attachment.token %>
         <% end %>
       </span>