Patch #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 |
|