Replace loading and hourglass icons with SVG versions rendered in HTML on attachment upload (#34709).

Patch by Mizuki ISHIKAWA (user:ishikawa999).

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

app/assets/images/icons.svg

@@ -228,6 +228,12 @@
       <path d="M12 8l0 4l2 2"/>
       <path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"/>
     </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--hourglass">
+      <path d="M6.5 7h11"/>
+      <path d="M6.5 17h11"/>
+      <path d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"/>
+      <path d="M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z"/>
+    </symbol>
     <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--image-gif">
       <path d="M14 3v4a1 1 0 0 0 1 1h4"/>
       <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/>
@@ -301,6 +307,9 @@
       <path d="M5 12l0 .01"/>
       <path d="M5 18l0 .01"/>
     </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--loader">
+      <path d="M12 3a9 9 0 1 0 9 9"/>
+    </symbol>
     <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--lock">
       <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"/>
       <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>

app/assets/javascripts/attachments.js

@@ -45,10 +45,13 @@ function addFile(inputEl, file, eagerUpload) {
 addFile.nextAttachmentId = 1;
 
 function ajaxUpload(file, attachmentId, fileSpan, inputEl) {
+  let attachmentIcon = $(fileSpan).find('svg.svg-attachment');
 
   function onLoadstart(e) {
     fileSpan.removeClass('ajax-waiting');
     fileSpan.addClass('ajax-loading');
+    attachmentIcon.addClass('svg-loader');
+    updateSVGIcon(attachmentIcon[0], 'loader')
     $('input:submit', $(this).parents('form')).attr('disabled', 'disabled');
   }
 
@@ -76,6 +79,8 @@ function ajaxUpload(file, attachmentId, fileSpan, inputEl) {
       }).always(function() {
         ajaxUpload.uploading--;
         fileSpan.removeClass('ajax-loading');
+        attachmentIcon.removeClass('svg-loader');
+        updateSVGIcon(attachmentIcon[0], 'attachment');
         var form = fileSpan.parents('form');
         if (form.queue('upload').length == 0 && ajaxUpload.uploading == 0) {
           $('input:submit', form).removeAttr('disabled');
@@ -87,6 +92,7 @@ function ajaxUpload(file, attachmentId, fileSpan, inputEl) {
   var progressSpan = $('<div>').insertAfter(fileSpan.find('input.filename'));
   progressSpan.progressbar();
   fileSpan.addClass('ajax-waiting');
+  updateSVGIcon(attachmentIcon[0], 'hourglass');
 
   var maxSyncUpload = $(inputEl).data('max-concurrent-uploads');
 

app/assets/stylesheets/application.css

@@ -1161,20 +1161,6 @@ span.required {color: #bb0000;}
   padding-left: 3px;
   padding-right: 0;
 }
-.attachments_fields .ajax-waiting {
-  padding-left: 16px;
-  background:url(/hourglass-empty.svg) no-repeat 0px 50%;
-}
-.attachments_fields .ajax-waiting .svg-attachment {
-  display: none;
-}
-.attachments_fields .ajax-loading {
-  padding-left: 16px;
-  background: url(/loading.gif) no-repeat 0px 50%;
-}
-.attachments_fields .ajax-loading .svg-attachment {
-  display: none;
-}
 
 a.remove-upload:hover {text-decoration:none !important;}
 .existing-attachment.deleted .filename {text-decoration:line-through; color:#999 !important;}
@@ -2178,6 +2164,19 @@ span.icon-label {
 
 .sort-handle.ajax-loading { background-image: url(/loading.gif); }
 tr.ui-sortable-helper { border:1px solid #e4e4e4; }
+svg.svg-loader {
+  animation: spin 1s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 .contextual>*:not(:first-child), .buttons>.icon:not(:first-child), .contextual .journal-actions>*:not(:first-child) { margin-left: 5px; }
 

app/views/attachments/_form.html.erb

@@ -10,6 +10,8 @@
   <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') %>
+    <%= sprite_icon('loader', icon_only: true, size: 16, css_class: 'svg-loader') %>
+    <%= sprite_icon('hourglass', icon_only: true, size: 16, css_class: 'svg-hourglass') %>
   </span>
   <span class="attachments_fields">
   <% if saved_attachments.present? %>

config/icon_source.yml

@@ -238,3 +238,7 @@
 - name: quote-filled
   svg: quote
   style: filled
+- name: loader
+  svg: loader-2
+- name: hourglass
+  svg: hourglass