diff --git a/app/views/messages/overview.php b/app/views/messages/overview.php
index 6ece39466b780d5c61bb10cd73c1612003f22d7a..6e39e0d9a202da1b0d20d9c75255181ccca4c5e8 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 0000000000000000000000000000000000000000..94113e09b520ee9b73b492b7875d0d51b138f2d8
--- /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 5dd746fdf8f3b05e5838a63c7cb9216e8afd6c0b..633062c40d8a139750fab8109803deaad0f983bf 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 2f0c172667d61e9f05c29726c2dda1faab2b6d63..72a2a6e63e08e504e7ab2a22665a6cb761869836 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 b6a519146c3f3c9d62d2d1255a3fdea253a8cff4..ff689bcd2bf4826ed33edccf6dc50badf9e752d5 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 c79bb324e3a3c86e4beb8432cd461d754276a65c..3ec865b6f72450a79468d38097903ff147e3d1fe 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 cf777da12ab969dab95293da8f208ce5801faa54..dd4e1f71b04f65cdc0e93a2269f77ddd98933964 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 dd4642239d518eefe3826a67079faf1e46dbdcec..307fb15473458f8c48d9365cc8f8229a1bcca378 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 87e65707e5a16b757af62e9a8706612f1d1343c1..be01ee1369228c453f9c2e23d1afbf98abb471d9 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 1a1945a0ecd31d249f7fad7045ee61c4b11f2be9..c511847b6b4f0a8a5bdaef7d91e1f6159b67e48c 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 36fb3d7f6ae5098a65b5ae968bf2ed63030fce87..ac182a9f9e1fad72aec41e5dab066416387f5b17 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 8fd85ca6a2298383b7413f11bf73166b5a1111c2..21d8bc23ba7d73815e51e52221fb76401457a8fc 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 63822f562cd04a0818fcd3359df58d745dc24d75..d182f34dc1783a564898df1bbe17c5aad2e65424 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 bd147e580b9d535bc4c114c121793544d46bf6c6..26f1369a2d8b2d1559857a0a19fa61291800c0c2 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 19adf7db70d66d7fac7306d253b185c3baf8a1ae..053395fa01ae4168fae6adac7c0982e6d423557b 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 5fc1d53239f9b93fcda30245dac5487ff30e29fa..61aa9d9722eecbc6e9a50d864e40a26823d99270 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 9268b9c9cfffc113f02fb3da34ebeb68835bde61..9a72993b7cbee1b9b209f1a4ca918b6d76ee995b 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 0f78c4c2931c1892d3462cf650facf33ed2eb462..3346d661aaf138ff809236eb502c4f5f2bddbc67 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 8d6b37046de05f62308c38cc7a8891bdca82a797..8ba202a08fe835eaaa4ca1f743334a6493002170 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 1621b47e5d1b29b43c13cf20130052961117ca4d..e6bc47c39849770c3125c0a1faa1e0654f678d08 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 a48bc72a571cf5c8a37ab5e35795ee48c342d7ca..d7dbb928da2a944c387da73c7524ae2e386df86d 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 548e1fd57ba95e6d2cf17895265c72568cf4296c..2236e1fba966c84d8e084763642bb54cf1d7181c 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 a3a5d7027a4af9d8563802935ceb60007b168724..b5d287d4aaf83342a8d63d7be9743b233a6acfd4 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 0606eb88972099f442b2475729521248bb18ce10..cfa6cb18b7cc3c15bcf474e18d95f9b520fe48fe 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 8266ca2ae03deeb0bfdb97e39d1b8b74ef6a9515..b6f7ee23537f6553d2cc30751dd64f3800c44838 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>