scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-12-09 13:46:21 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve file processing indicator [SCI-3938]

Browse source
This commit is contained in:
Oleksii Kriuchykhin 2019-10-01 15:20:46 +02:00
parent 86e9456c73
commit 6a6a43f5ff
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/sitewide/active_storage_previews.js
View file

@ -17,6 +17,8 @@ var ActiveStoragePreviews = (function() {
if (img.retryCount >= RETRY_COUNT) return; if (img.retryCount >= RETRY_COUNT) return;
if (!$(img).parent().hasClass('processing')) $(img).parent().addClass('processing');
setTimeout(() => { setTimeout(() => {
img.src = src; img.src = src;
img.retryCount += 1; img.retryCount += 1;
@ -24,6 +26,7 @@ var ActiveStoragePreviews = (function() {
}, },
showPreview: function(ev) { showPreview: function(ev) {
$(ev.target).css('opacity', 1); $(ev.target).css('opacity', 1);
$(ev.target).parent().removeClass('processing');
} }
}); });
}()); }());

11
app/assets/stylesheets/themes/scinote.scss
View file

@ -1476,7 +1476,7 @@ table.dataTable {
line-height: 160px; line-height: 160px;
} }
&:not(.new) { &.processing {
background-image: url("/images/medium/processing.gif"); background-image: url("/images/medium/processing.gif");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1525,9 +1525,6 @@ table.dataTable {
.file-preview-container { .file-preview-container {
align-items: center; align-items: center;
background-image: url("/images/medium/processing.gif");
background-position: center;
background-repeat: no-repeat;
color: $gray-dark; color: $gray-dark;
display: -moz-flex; display: -moz-flex;
display: -webkit-flex; display: -webkit-flex;
@ -1537,6 +1534,12 @@ table.dataTable {
text-align: center; text-align: center;
width: 60%; width: 60%;
&.processing {
background-image: url("/images/medium/processing.gif");
background-position: center;
background-repeat: no-repeat;
}
.file-name { .file-name {
color: $color-black; color: $color-black;
margin: 30px 0; margin: 30px 0;