scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-30 20:23:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2972 from aignatov-bio/ai-sci-5229-replce-loading-spinner-with-new

Browse source 
Replace loading spinner [SCI-5229]
This commit is contained in:
aignatov-bio 2020-11-23 16:32:49 +01:00 committed by GitHub
commit 966bb7c9ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 115 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/application.js.erb
View file

@ -102,27 +102,11 @@ function animateLoading(start){
* Shows spinner if start is true or not given, hides it if false.
* Optional parameter options for spin.js options.
*/
function animateSpinner(el, start, options) {
function animateSpinner(el, start) {
// If overlaying the whole page, put the spinner in the middle of the page
var overlayPage = false;
if (_.isUndefined(el) || el === null) {
overlayPage = true;
if ($(document.body).has('.loading-overlay-center').length === 0) {
$(document.body).append('<div class="loading-overlay-center" />');
}
el = $(document.body).find('.loading-overlay-center');
}
var overlayPage = _.isUndefined(el) || el === null;
if (_.isUndefined(start)) {
start = true;
}
if (start && options) {
$(el).spin(options);
}
else {
$(el).spin(start);
}
if (_.isUndefined(start)) start = true;
if (start) {
if (overlayPage) {

2
app/assets/stylesheets/shared/assets.scss
View file

@ -25,7 +25,7 @@
width: 100%;
&.processing {
background-image: url("/images/medium/processing.gif");
background-image: url("/images/medium/loading.svg");
background-position: center;
background-repeat: no-repeat;
}

3
app/assets/stylesheets/shared/file_preview.scss
View file

@ -31,9 +31,10 @@
width: 100%;
&.processing {
background-image: url("/images/medium/processing.gif");
background-image: url("/images/medium/loading_white.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 64px;
}
.wopi-file-preview {

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

@ -1256,20 +1256,34 @@ ul.content-activities {
/* Overlay to disable interaction while loading ajax */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000000000;
cursor: wait;
}
.loading-overlay-center {
position: fixed;
left:50%;
top:50%;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1000000000;
&::before {
background: $color-white;
content: "";
display: block;
height: 100%;
opacity: .5;
width: 100%;
}
&::after {
background-image: url("/images/medium/loading.svg");
background-position: center;
background-repeat: no-repeat;
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
}
.turbolinks-progress-bar::before {

42
public/images/medium/loading.svg Normal file
View file

@ -0,0 +1,42 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="bottom_left" fill-rule="evenodd" clip-rule="evenodd" d="M16 32L2.09393 32C0.937155 32 3.51904e-07 31.1293 4.4579e-07 30.0554L1.67455e-06 16L16 32Z" fill="#104DA9"/>
<path id="bottom_right" fill-rule="evenodd" clip-rule="evenodd" d="M32 16L32 29.9061C32 31.0628 31.1294 32 30.0554 32L16 32L32 16Z" fill="#104DA9"/>
<path id="top_right" fill-rule="evenodd" clip-rule="evenodd" d="M16 0H29.9061C31.0628 0 32 0.870649 32 1.94458V16L16 0Z" fill="#104DA9"/>
<path id="top_left" fill-rule="evenodd" clip-rule="evenodd" d="M0 16L-6.07854e-07 2.09393C-6.58418e-07 0.937155 0.870648 2.37732e-07 1.94458 1.90789e-07L16 -4.23593e-07L0 16Z" fill="#104DA9"/>
<animate
xlink:href="#top_left"
attributeName="opacity"
from="1" to="0" dur="0.8s"
values="1; 1; 0; 0; 0; 0; 0; 0; 1"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="tlfade"
/>
<animate
xlink:href="#top_right"
attributeName="opacity"
from="0" to="1" dur="0.8s"
values="0; 0; 1; 1; 0; 0; 0; 0; 0"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="trfade"
/>
<animate
xlink:href="#bottom_right"
attributeName="opacity"
from="0" to="1" dur="0.8s"
values="0; 0; 0; 0; 1; 1; 0; 0; 0"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="brfade"
/>
<animate
xlink:href="#bottom_left"
attributeName="opacity"
from="0" to="1" dur="0.8s"
values="0; 0; 0; 0; 0; 0; 1; 1; 0"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="blfade"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

42
public/images/medium/loading_white.svg Normal file
View file

@ -0,0 +1,42 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="bottom_left" fill-rule="evenodd" clip-rule="evenodd" d="M16 32L2.09393 32C0.937155 32 3.51904e-07 31.1293 4.4579e-07 30.0554L1.67455e-06 16L16 32Z" fill="#ffffff"/>
<path id="bottom_right" fill-rule="evenodd" clip-rule="evenodd" d="M32 16L32 29.9061C32 31.0628 31.1294 32 30.0554 32L16 32L32 16Z" fill="#ffffff"/>
<path id="top_right" fill-rule="evenodd" clip-rule="evenodd" d="M16 0H29.9061C31.0628 0 32 0.870649 32 1.94458V16L16 0Z" fill="#ffffff"/>
<path id="top_left" fill-rule="evenodd" clip-rule="evenodd" d="M0 16L-6.07854e-07 2.09393C-6.58418e-07 0.937155 0.870648 2.37732e-07 1.94458 1.90789e-07L16 -4.23593e-07L0 16Z" fill="#ffffff"/>
<animate
xlink:href="#top_left"
attributeName="opacity"
from="1" to="0" dur="0.8s"
values="1; 1; 0; 0; 0; 0; 0; 0; 1"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="tlfade"
/>
<animate
xlink:href="#top_right"
attributeName="opacity"
from="0" to="1" dur="0.8s"
values="0; 0; 1; 1; 0; 0; 0; 0; 0"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="trfade"
/>
<animate
xlink:href="#bottom_right"
attributeName="opacity"
from="0" to="1" dur="0.8s"
values="0; 0; 0; 0; 1; 1; 0; 0; 0"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="brfade"
/>
<animate
xlink:href="#bottom_left"
attributeName="opacity"
from="0" to="1" dur="0.8s"
values="0; 0; 0; 0; 0; 0; 1; 1; 0"
keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
repeatCount="indefinite"
id="blfade"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB