Defect #42966 » 0001-Replace-loading-and-hourglass-icons-with-SVG-version.patch
app/assets/images/icons.svg | ||
---|---|---|
228 | 228 |
<path d="M12 8l0 4l2 2"/> |
229 | 229 |
<path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"/> |
230 | 230 |
</symbol> |
231 |
<symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--hourglass"> |
|
232 |
<path d="M6.5 7h11"/> |
|
233 |
<path d="M6.5 17h11"/> |
|
234 |
<path d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"/> |
|
235 |
<path d="M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z"/> |
|
236 |
</symbol> |
|
231 | 237 |
<symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--image-gif"> |
232 | 238 |
<path d="M14 3v4a1 1 0 0 0 1 1h4"/> |
233 | 239 |
<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 | 307 |
<path d="M5 12l0 .01"/> |
302 | 308 |
<path d="M5 18l0 .01"/> |
303 | 309 |
</symbol> |
310 |
<symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--loader"> |
|
311 |
<path d="M12 3a9 9 0 1 0 9 9"/> |
|
312 |
</symbol> |
|
304 | 313 |
<symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--lock"> |
305 | 314 |
<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"/> |
306 | 315 |
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/> |
app/assets/javascripts/attachments.js | ||
---|---|---|
45 | 45 |
addFile.nextAttachmentId = 1; |
46 | 46 | |
47 | 47 |
function ajaxUpload(file, attachmentId, fileSpan, inputEl) { |
48 |
let attachmentIcon = $(fileSpan).find('svg.svg-attachment'); |
|
48 | 49 | |
49 | 50 |
function onLoadstart(e) { |
50 | 51 |
fileSpan.removeClass('ajax-waiting'); |
51 | 52 |
fileSpan.addClass('ajax-loading'); |
53 |
attachmentIcon.addClass('svg-loader'); |
|
54 |
updateSVGIcon(attachmentIcon[0], 'loader') |
|
52 | 55 |
$('input:submit', $(this).parents('form')).attr('disabled', 'disabled'); |
53 | 56 |
} |
54 | 57 | |
... | ... | |
76 | 79 |
}).always(function() { |
77 | 80 |
ajaxUpload.uploading--; |
78 | 81 |
fileSpan.removeClass('ajax-loading'); |
82 |
attachmentIcon.removeClass('svg-loader'); |
|
83 |
updateSVGIcon(attachmentIcon[0], 'attachment'); |
|
79 | 84 |
var form = fileSpan.parents('form'); |
80 | 85 |
if (form.queue('upload').length == 0 && ajaxUpload.uploading == 0) { |
81 | 86 |
$('input:submit', form).removeAttr('disabled'); |
... | ... | |
87 | 92 |
var progressSpan = $('<div>').insertAfter(fileSpan.find('input.filename')); |
88 | 93 |
progressSpan.progressbar(); |
89 | 94 |
fileSpan.addClass('ajax-waiting'); |
95 |
updateSVGIcon(attachmentIcon[0], 'hourglass'); |
|
90 | 96 | |
91 | 97 |
var maxSyncUpload = $(inputEl).data('max-concurrent-uploads'); |
92 | 98 |
app/assets/stylesheets/application.css | ||
---|---|---|
1166 | 1166 |
padding-left: 3px; |
1167 | 1167 |
padding-right: 0; |
1168 | 1168 |
} |
1169 |
.attachments_fields .ajax-waiting { |
|
1170 |
padding-left: 16px; |
|
1171 |
background:url(/hourglass-empty.svg) no-repeat 0px 50%; |
|
1172 |
} |
|
1173 |
.attachments_fields .ajax-waiting .svg-attachment { |
|
1174 |
display: none; |
|
1175 |
} |
|
1176 |
.attachments_fields .ajax-loading { |
|
1177 |
padding-left: 16px; |
|
1178 |
background: url(/loading.gif) no-repeat 0px 50%; |
|
1179 |
} |
|
1180 |
.attachments_fields .ajax-loading .svg-attachment { |
|
1181 |
display: none; |
|
1182 |
} |
|
1183 | 1169 | |
1184 | 1170 |
a.remove-upload:hover {text-decoration:none !important;} |
1185 | 1171 |
.existing-attachment.deleted .filename {text-decoration:line-through; color:#999 !important;} |
... | ... | |
2109 | 2095 | |
2110 | 2096 |
.sort-handle.ajax-loading { background-image: url(/loading.gif); } |
2111 | 2097 |
tr.ui-sortable-helper { border:1px solid #e4e4e4; } |
2098 |
svg.svg-loader { |
|
2099 |
animation: spin 1s linear infinite; |
|
2100 |
transform-origin: center; |
|
2101 |
} |
|
2102 | ||
2103 |
@keyframes spin { |
|
2104 |
0% { |
|
2105 |
transform: rotate(0deg); |
|
2106 |
} |
|
2107 |
100% { |
|
2108 |
transform: rotate(360deg); |
|
2109 |
} |
|
2110 |
} |
|
2112 | 2111 | |
2113 | 2112 |
.contextual>*:not(:first-child), .buttons>.icon:not(:first-child), .contextual .journal-actions>*:not(:first-child) { margin-left: 5px; } |
2114 | 2113 |
app/views/attachments/_form.html.erb | ||
---|---|---|
10 | 10 |
<span class="attachments_icons hidden"> |
11 | 11 |
<%= sprite_icon('del', icon_only: true, css_class: 'svg-del') %> |
12 | 12 |
<%= sprite_icon('attachment', icon_only: true, size: 16, css_class: 'svg-attachment') %> |
13 |
<%= sprite_icon('loader', icon_only: true, size: 16, css_class: 'svg-loader') %> |
|
14 |
<%= sprite_icon('hourglass', icon_only: true, size: 16, css_class: 'svg-hourglass') %> |
|
13 | 15 |
</span> |
14 | 16 |
<span class="attachments_fields"> |
15 | 17 |
<% if saved_attachments.present? %> |
config/icon_source.yml | ||
---|---|---|
235 | 235 |
svg: message-report |
236 | 236 |
- name: quote-filled |
237 | 237 |
svg: quote |
238 |
style: filled |
|
238 |
style: filled |
|
239 |
- name: loader |
|
240 |
svg: loader-2 |
|
241 |
- name: hourglass |
|
242 |
svg: hourglass |