From 542f4737998a3f5f16a8d582c9ede412f9cf99ec Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Thu, 17 Nov 2022 08:30:02 +0000
Subject: [PATCH] Unify loading animations across the system, fixes #930
Closes #930
Merge request studip/studip!546
---
app/views/messages/overview.php | 2 +-
public/assets/images/loading-indicator.svg | 21 +++++++++++++++++++
.../javascripts/bootstrap/application.js | 3 ---
.../assets/javascripts/bootstrap/files.js | 2 +-
.../assets/javascripts/bootstrap/members.js | 2 +-
.../javascripts/bootstrap/statusgroups.js | 2 +-
.../javascripts/bootstrap/subcourses.js | 2 +-
resources/assets/javascripts/lib/admission.js | 2 +-
.../assets/javascripts/lib/course_wizard.js | 6 +++---
.../assets/javascripts/lib/fullcalendar.js | 2 +-
resources/assets/javascripts/lib/resources.js | 2 +-
.../assets/javascripts/lib/smiley_picker.js | 2 +-
.../assets/javascripts/mvv_course_wizard.js | 6 +++---
resources/assets/stylesheets/scss/admin.scss | 2 +-
resources/assets/stylesheets/scss/ajax.scss | 4 ++--
.../assets/stylesheets/scss/globalsearch.scss | 2 +-
.../assets/stylesheets/scss/installer.scss | 2 +-
.../stylesheets/scss/progress_indicator.scss | 4 ++--
resources/assets/stylesheets/scss/search.scss | 2 +-
.../assets/stylesheets/scss/smileys.scss | 2 +-
.../stylesheets/scss/studip-overlay.scss | 8 ++-----
.../vue/components/BlubberGlobalstream.vue | 4 ++--
resources/vue/components/BlubberThread.vue | 4 ++--
.../vue/components/BlubberThreadWidget.vue | 2 +-
.../components/StudipProgressIndicator.vue | 17 ++++++++-------
25 files changed, 62 insertions(+), 45 deletions(-)
create mode 100644 public/assets/images/loading-indicator.svg
diff --git a/app/views/messages/overview.php b/app/views/messages/overview.php
index 6ece39466b7..6e39e0d9a20 100644
--- a/app/views/messages/overview.php
+++ b/app/views/messages/overview.php
@@ -81,7 +81,7 @@
</tr>
<? endif ?>
<tr id="reloader" class="more">
- <td colspan="7"><?= Assets::img("ajax_indicator_small.gif") ?></td>
+ <td colspan="7"></td>
</tr>
</tbody>
</table>
diff --git a/public/assets/images/loading-indicator.svg b/public/assets/images/loading-indicator.svg
new file mode 100644
index 00000000000..94113e09b52
--- /dev/null
+++ b/public/assets/images/loading-indicator.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:none;}
+ .st1{fill:#28497C;}
+ .st2{fill:#EBEBEC; display: none;}
+</style>
+<rect y="0" class="st0" width="64" height="64"/>
+ <path class="st1" d="M32,4C16.5,4,4,16.5,4,32h8.3c0-10.9,8.8-19.7,19.7-19.6c10.9,0,19.7,8.8,19.6,19.7c0,10.9-8.8,19.6-19.7,19.6
+ V60c15.5,0,28-12.5,28-28S47.5,4,32,4z">
+ <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="5s" repeatCount="indefinite" />
+ </path>
+ <path class="st1" d="M42.5,32c0-5.8-4.7-10.5-10.5-10.5c-5.8,0-10.5,4.7-10.5,10.5c0,5.8,4.7,10.5,10.5,10.5
+ C37.8,42.6,42.5,37.8,42.5,32C42.5,32,42.5,32,42.5,32z"/>
+ <path class="st2" d="M42.5,32L42.5,32c0,5.8-4.7,10.5-10.5,10.5c-5.8,0-10.5-4.7-10.5-10.5c0-5.8,4.7-10.5,10.5-10.5c0,0,0,0,0,0
+ v-9.2h0c-10.9,0-19.7,8.8-19.7,19.7S21.1,51.7,32,51.7c10.9,0,19.7-8.8,19.7-19.7H42.5z">
+ <animateTransform attributeName="transform" type="rotate" from="360 32 32" to="0 32 32" dur="4s" repeatCount="indefinite" />
+ </path>
+</svg>
diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js
index 5dd746fdf8f..633062c40d8 100644
--- a/resources/assets/javascripts/bootstrap/application.js
+++ b/resources/assets/javascripts/bootstrap/application.js
@@ -74,9 +74,6 @@ STUDIP.ready(function() {
* application wide setup
* ------------------------------------------------------------------------ */
STUDIP.domReady(function () {
- // AJAX Indicator
- STUDIP.ajax_indicator = true;
-
STUDIP.study_area_selection.initialize();
if (document.createElement('textarea').style.resize === undefined) {
diff --git a/resources/assets/javascripts/bootstrap/files.js b/resources/assets/javascripts/bootstrap/files.js
index 2f0c172667d..72a2a6e63e0 100644
--- a/resources/assets/javascripts/bootstrap/files.js
+++ b/resources/assets/javascripts/bootstrap/files.js
@@ -2,7 +2,7 @@ function searchMoreFiles (button) {
var table = $(button).closest('table');
var loading = $('<div class="loading" style="padding: 10px">').html(
$('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css('width', '24')
.css('height', '24')
);
diff --git a/resources/assets/javascripts/bootstrap/members.js b/resources/assets/javascripts/bootstrap/members.js
index b6a519146c3..ff689bcd2bf 100644
--- a/resources/assets/javascripts/bootstrap/members.js
+++ b/resources/assets/javascripts/bootstrap/members.js
@@ -9,7 +9,7 @@ STUDIP.domReady(() => {
$('<img>').attr({
width: 32,
height: 32,
- src: STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg'
+ src: STUDIP.ASSETS_URL + 'images/loading-indicator.svg'
})
);
diff --git a/resources/assets/javascripts/bootstrap/statusgroups.js b/resources/assets/javascripts/bootstrap/statusgroups.js
index c79bb324e3a..3ec865b6f72 100644
--- a/resources/assets/javascripts/bootstrap/statusgroups.js
+++ b/resources/assets/javascripts/bootstrap/statusgroups.js
@@ -12,7 +12,7 @@ STUDIP.ready(function() {
$('<img>').attr({
width: 32,
height: 32,
- src: STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg'
+ src: STUDIP.ASSETS_URL + 'images/loading-indicator.svg'
})
);
diff --git a/resources/assets/javascripts/bootstrap/subcourses.js b/resources/assets/javascripts/bootstrap/subcourses.js
index cf777da12ab..dd4e1f71b04 100644
--- a/resources/assets/javascripts/bootstrap/subcourses.js
+++ b/resources/assets/javascripts/bootstrap/subcourses.js
@@ -38,7 +38,7 @@ $(document).on('click', '.toggle-subcourses', function(event) {
$('<div class="loading" style="padding: 10px">')
.html(
$('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css('width', '24')
.css('height', '24')
)
diff --git a/resources/assets/javascripts/lib/admission.js b/resources/assets/javascripts/lib/admission.js
index dd4642239d5..307fb154734 100644
--- a/resources/assets/javascripts/lib/admission.js
+++ b/resources/assets/javascripts/lib/admission.js
@@ -23,7 +23,7 @@ const Admission = {
var loading = $gettext('Wird geladen');
$('#instcourses').empty();
$('<img/>', {
- src: STUDIP.ASSETS_URL + 'images/ajax_indicator_small.gif'
+ src: STUDIP.ASSETS_URL + 'images/loading-indicator.svg'
}).appendTo('#instcourses');
$('#instcourses').append(loading);
$('#instcourses').load(targetUrl, data);
diff --git a/resources/assets/javascripts/lib/course_wizard.js b/resources/assets/javascripts/lib/course_wizard.js
index 87e65707e5a..be01ee13692 100644
--- a/resources/assets/javascripts/lib/course_wizard.js
+++ b/resources/assets/javascripts/lib/course_wizard.js
@@ -188,7 +188,7 @@ const CourseWizard = {
target.children('ul').append(
$('<li class="tree-loading">').html(
$('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css('width', '16')
.css('height', '16')
)
@@ -237,7 +237,7 @@ const CourseWizard = {
.parent()
.append(
$('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.attr('id', 'sem-tree-search-loading')
.css('width', '16')
.css('height', '16')
@@ -542,7 +542,7 @@ const CourseWizard = {
left: pos.left
});
var loading = $('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css({
width: 32,
height: 32,
diff --git a/resources/assets/javascripts/lib/fullcalendar.js b/resources/assets/javascripts/lib/fullcalendar.js
index 1a1945a0ecd..c511847b6b4 100644
--- a/resources/assets/javascripts/lib/fullcalendar.js
+++ b/resources/assets/javascripts/lib/fullcalendar.js
@@ -521,7 +521,7 @@ class Fullcalendar
if (!$('#loading-spinner').length) {
jQuery('#layout_content').append(
$('<div id="loading-spinner" style="position: absolute; top: calc(50% - 55px); left: calc(50% + 135px); z-index: 9001;">').html(
- $('<img>').attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ $('<img>').attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css({
width: 64,
height: 64
diff --git a/resources/assets/javascripts/lib/resources.js b/resources/assets/javascripts/lib/resources.js
index 36fb3d7f6ae..ac182a9f9e1 100644
--- a/resources/assets/javascripts/lib/resources.js
+++ b/resources/assets/javascripts/lib/resources.js
@@ -737,7 +737,7 @@ class Resources
if (!$('#loading-spinner').length) {
jQuery('#layout_content').append(
$('<div id="loading-spinner" style="position: absolute; top: calc(50% - 55px); left: calc(50% + 135px); z-index: 9001;">').html(
- $('<img>').attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ $('<img>').attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css({
width: 64,
height: 64
diff --git a/resources/assets/javascripts/lib/smiley_picker.js b/resources/assets/javascripts/lib/smiley_picker.js
index 8fd85ca6a22..21d8bc23ba7 100644
--- a/resources/assets/javascripts/lib/smiley_picker.js
+++ b/resources/assets/javascripts/lib/smiley_picker.js
@@ -37,7 +37,7 @@ function loadURL(url, callback) {
var that = this,
src = this.src,
image = new Image();
- this.src = STUDIP.ASSETS_URL + 'images/ajax_indicator_small.gif';
+ this.src = STUDIP.ASSETS_URL + 'images/loading-indicator.gif';
image.onload = image.onerror = function() {
that.src = src;
diff --git a/resources/assets/javascripts/mvv_course_wizard.js b/resources/assets/javascripts/mvv_course_wizard.js
index 63822f562cd..d182f34dc17 100644
--- a/resources/assets/javascripts/mvv_course_wizard.js
+++ b/resources/assets/javascripts/mvv_course_wizard.js
@@ -24,7 +24,7 @@ STUDIP.MVV.CourseWizard = {
target.children('ul').append(
$('<li class="tree-loading">').html(
$('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css('width', '16')
.css('height', '16')
)
@@ -83,7 +83,7 @@ STUDIP.MVV.CourseWizard = {
.parent()
.append(
$('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.attr('id', 'lvgroup-tree-search-loading')
.css('width', '16')
.css('height', '16')
@@ -260,7 +260,7 @@ STUDIP.MVV.CourseWizard = {
left: pos.left
});
var loading = $('<img>')
- .attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg')
+ .attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
.css({
width: 32,
height: 32,
diff --git a/resources/assets/stylesheets/scss/admin.scss b/resources/assets/stylesheets/scss/admin.scss
index bd147e580b9..26f1369a2d8 100644
--- a/resources/assets/stylesheets/scss/admin.scss
+++ b/resources/assets/stylesheets/scss/admin.scss
@@ -148,7 +148,7 @@ fieldset.attribute_table {
}
&.ajaxing {
- background-image: url("#{$image-path}/ajax_indicator_small.gif");
+ background-image: url("#{$image-path}/loading-indicator.svg");
}
}
}
diff --git a/resources/assets/stylesheets/scss/ajax.scss b/resources/assets/stylesheets/scss/ajax.scss
index 19adf7db70d..053395fa01a 100644
--- a/resources/assets/stylesheets/scss/ajax.scss
+++ b/resources/assets/stylesheets/scss/ajax.scss
@@ -20,7 +20,7 @@
position: relative;
.notification {
- background: rgba(255, 255, 255, 0.5) url("#{$image-path}/ajax_indicator_small.gif") center center no-repeat;
+ background: rgba(255, 255, 255, 0.5) url("#{$image-path}/loading-indicator.svg") center center no-repeat;
border: 1px solid #ccc;
border-radius: 8px;
display: inline-block;
@@ -33,7 +33,7 @@
}
.ajaxing {
- background: url("#{$image-path}/ajax_indicator_small.gif") center no-repeat;
+ background: url("#{$image-path}/loading-indicator.svg") center no-repeat;
display: inline-block;
@include size(16px, 16px);
@include hide-text();
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 5fc1d53239f..61aa9d9722e 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -122,7 +122,7 @@
display: none;
text-align: center;
- background-image: url("#{$image-path}/ajax-indicator-black.svg");
+ background-image: url("#{$image-path}/loading-indicator.svg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: $icon-size;
diff --git a/resources/assets/stylesheets/scss/installer.scss b/resources/assets/stylesheets/scss/installer.scss
index 9268b9c9cff..9a72993b7cb 100644
--- a/resources/assets/stylesheets/scss/installer.scss
+++ b/resources/assets/stylesheets/scss/installer.scss
@@ -135,7 +135,7 @@
background-size: 16px;
}
dt.requesting {
- background: url('#{$image-path}/ajax-indicator-black.svg') no-repeat top 3px right;
+ background: url('#{$image-path}/loading-indicator.svg') no-repeat top 3px right;
background-size: 16px;
}
diff --git a/resources/assets/stylesheets/scss/progress_indicator.scss b/resources/assets/stylesheets/scss/progress_indicator.scss
index 0f78c4c2931..3346d661aaf 100644
--- a/resources/assets/stylesheets/scss/progress_indicator.scss
+++ b/resources/assets/stylesheets/scss/progress_indicator.scss
@@ -5,7 +5,7 @@
.progress-indicator {
width: 100%;
- background-image: url("#{$image-path}/ajax-indicator-black.svg");
+ background-image: url("#{$image-path}/loading-indicator.svg");
background-repeat: no-repeat;
background-position: center;
}
@@ -26,4 +26,4 @@
display: block;
}
}
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss
index 8d6b37046de..8ba202a08fe 100644
--- a/resources/assets/stylesheets/scss/search.scss
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -10,7 +10,7 @@ label.inactive-settings-category {
display: none;
text-align: center;
- background-image: url("#{$image-path}/ajax-indicator-black.svg");
+ background-image: url("#{$image-path}/loading-indicator.svg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: $icon-size;
diff --git a/resources/assets/stylesheets/scss/smileys.scss b/resources/assets/stylesheets/scss/smileys.scss
index 1621b47e5d1..e6bc47c3984 100644
--- a/resources/assets/stylesheets/scss/smileys.scss
+++ b/resources/assets/stylesheets/scss/smileys.scss
@@ -88,7 +88,7 @@
}
&.ajax {
- background-image: url("#{$image-path}/ajax_indicator_small.gif");
+ background-image: url("#{$image-path}/loading-indicator.svg");
}
}
diff --git a/resources/assets/stylesheets/scss/studip-overlay.scss b/resources/assets/stylesheets/scss/studip-overlay.scss
index a48bc72a571..d7dbb928da2 100644
--- a/resources/assets/stylesheets/scss/studip-overlay.scss
+++ b/resources/assets/stylesheets/scss/studip-overlay.scss
@@ -26,14 +26,10 @@
// browsers (except for some old android versions that we can neglect).
// Thus said, if the loading animation looks ugly - update your
// browser ffs!
- background-image: url("#{$image-path}/ajax_indicator_small.gif");
- background-image: none, url("#{$image-path}/ajax-indicator-white.svg");
+ background-image: url("#{$image-path}/loading-indicator.svg");
background-position: center;
background-repeat: no-repeat;
- }
-
- &-ajax.modal-overlay-dark {
- background-image: none, url("#{$image-path}/ajax-indicator-black.svg");
+ background-size: 32px;
}
// Progress
diff --git a/resources/vue/components/BlubberGlobalstream.vue b/resources/vue/components/BlubberGlobalstream.vue
index 548e1fd57ba..2236e1fba96 100644
--- a/resources/vue/components/BlubberGlobalstream.vue
+++ b/resources/vue/components/BlubberGlobalstream.vue
@@ -4,7 +4,7 @@
<blubber-public-composer></blubber-public-composer>
<ol class="postings" aria-live="polite">
<li class="more" v-if="streamData.more_up">
- <studip-asset-img file="ajax-indicator-black.svg" width="20"></studip-asset-img>
+ <studip-asset-img file="loading-indicator.svg" width="20"></studip-asset-img>
</li>
<li :class="blubber.class"
@@ -25,7 +25,7 @@
</li>
<li class="more" v-if="more_down">
- <studip-asset-img file="ajax-indicator-black.svg" width="20"></studip-asset-img>
+ <studip-asset-img file="loading-indicator.svg" width="20"></studip-asset-img>
</li>
</ol>
</div>
diff --git a/resources/vue/components/BlubberThread.vue b/resources/vue/components/BlubberThread.vue
index a3a5d7027a4..b5d287d4aaf 100644
--- a/resources/vue/components/BlubberThread.vue
+++ b/resources/vue/components/BlubberThread.vue
@@ -34,7 +34,7 @@
<ol class="comments" aria-live="polite">
<li class="more" v-if="threadData.more_up">
- <studip-asset-img file="ajax-indicator-black.svg" width="20"></studip-asset-img>
+ <studip-asset-img file="loading-indicator.svg" width="20"></studip-asset-img>
</li>
<li :class="comment.class"
@@ -62,7 +62,7 @@
</li>
<li class="more" v-if="threadData.more_down">
- <studip-asset-img file="ajax-indicator-black.svg" width="20"></studip-asset-img>
+ <studip-asset-img file="loading-indicator.svg" width="20"></studip-asset-img>
</li>
</ol>
diff --git a/resources/vue/components/BlubberThreadWidget.vue b/resources/vue/components/BlubberThreadWidget.vue
index 0606eb88972..cfa6cb18b7c 100644
--- a/resources/vue/components/BlubberThreadWidget.vue
+++ b/resources/vue/components/BlubberThreadWidget.vue
@@ -21,7 +21,7 @@
</a>
</li>
<li class="more" v-if="display_more_down" key="more">
- <studip-asset-img file="ajax-indicator-black.svg" width="20"></studip-asset-img>
+ <studip-asset-img file="loading-indicator.svg" width="20"></studip-asset-img>
</li>
</transition-group>
</div>
diff --git a/resources/vue/components/StudipProgressIndicator.vue b/resources/vue/components/StudipProgressIndicator.vue
index 8266ca2ae03..b6f7ee23537 100644
--- a/resources/vue/components/StudipProgressIndicator.vue
+++ b/resources/vue/components/StudipProgressIndicator.vue
@@ -1,7 +1,7 @@
<template>
<div class="progress-indicator-wrapper">
<div class="progress-indicator" :style="indicatorStyle"></div>
- <p v-if="description !== ''" class="progress-indicator-description">
+ <p v-if="hasDescription" class="progress-indicator-description">
{{ description }}
</p>
<p v-else class="progress-indicator-description-default">
@@ -18,18 +18,21 @@ export default {
type: String,
required: false
},
- width: {
+ size: {
type: Number,
default: 32
}
},
computed: {
indicatorStyle() {
- let style = 'background-size: ' + this.width + 'px;';
- style += 'height: ' + this.width + 'px;';
-
- return style;
+ return {
+ backgroundSize: `${this.size}px`,
+ height: `${this.size}px`
+ };
+ },
+ hasDescription () {
+ return this.description.trim().length > 0;
}
}
}
-</script>
\ No newline at end of file
+</script>
--
GitLab