Defect #42966 » 0004-Replace-sort-handle-loading-icon-with-SVG.patch
| app/assets/javascripts/application-legacy.js | ||
|---|---|---|
| 963 | 963 |
firstPosition: 1 |
| 964 | 964 |
}, options ); |
| 965 | 965 | |
| 966 |
function showReorderLoadingIcon(handle) {
|
|
| 967 |
const svg = handle.querySelector('svg');
|
|
| 968 |
if (!svg) return; |
|
| 969 | ||
| 970 |
updateSVGIcon(svg, 'loader'); |
|
| 971 |
svg.classList.add('svg-loader');
|
|
| 972 |
handle.classList.add('ajax-loading');
|
|
| 973 |
} |
|
| 974 | ||
| 975 |
function restoreReorderIcon(handle) {
|
|
| 976 |
const svg = handle.querySelector('svg.svg-loader');
|
|
| 977 |
if (!svg) return; |
|
| 978 | ||
| 979 |
updateSVGIcon(svg, 'reorder'); |
|
| 980 |
svg.classList.remove('svg-loader');
|
|
| 981 |
handle.classList.remove('ajax-loading');
|
|
| 982 |
} |
|
| 983 | ||
| 966 | 984 |
return this.sortable($.extend({
|
| 967 | 985 |
axis: 'y', |
| 968 | 986 |
handle: ".sort-handle", |
| ... | ... | |
| 974 | 992 |
}, |
| 975 | 993 |
update: function(event, ui) {
|
| 976 | 994 |
var sortable = $(this); |
| 977 |
var handle = ui.item.find(".sort-handle").addClass("ajax-loading");
|
|
| 995 |
var handle = ui.item.find(".sort-handle")
|
|
| 978 | 996 |
var url = handle.data("reorder-url");
|
| 979 | 997 |
var param = handle.data("reorder-param");
|
| 980 | 998 |
var data = {};
|
| 999 | ||
| 1000 |
showReorderLoadingIcon(handle[0]); |
|
| 981 | 1001 |
data[param] = {position: ui.item.index() + settings['firstPosition']};
|
| 982 | 1002 |
$.ajax({
|
| 983 | 1003 |
url: url, |
| ... | ... | |
| 989 | 1009 |
sortable.sortable("cancel");
|
| 990 | 1010 |
}, |
| 991 | 1011 |
complete: function(jqXHR, textStatus, errorThrown){
|
| 992 |
handle.removeClass("ajax-loading");
|
|
| 1012 |
restoreReorderIcon(handle[0]);
|
|
| 993 | 1013 |
} |
| 994 | 1014 |
}); |
| 995 | 1015 |
}, |
| app/assets/stylesheets/application.css | ||
|---|---|---|
| 2079 | 2079 |
.icon-file.application-gzip:not(:has(svg)) { background-image: url(/files/zip.png); }
|
| 2080 | 2080 |
.icon-copy-link:not(:has(svg)) { background-image: url(/copy_link.png); }
|
| 2081 | 2081 | |
| 2082 |
.sort-handle.ajax-loading { background-image: url(/loading.gif); }
|
|
| 2083 | 2082 |
tr.ui-sortable-helper { border:1px solid #e4e4e4; }
|
| 2084 | 2083 |
svg.svg-loader {
|
| 2085 | 2084 |
animation: spin 1s linear infinite; |
