From 542f4737998a3f5f16a8d582c9ede412f9cf99ec Mon Sep 17 00:00:00 2001 From: Jan-Hendrik Willms Date: Thu, 17 Nov 2022 08:30:02 +0000 Subject: 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 +++++++++++++++++++++ .../assets/javascripts/bootstrap/application.js | 3 --- resources/assets/javascripts/bootstrap/files.js | 2 +- resources/assets/javascripts/bootstrap/members.js | 2 +- .../assets/javascripts/bootstrap/statusgroups.js | 2 +- .../assets/javascripts/bootstrap/subcourses.js | 2 +- resources/assets/javascripts/lib/admission.js | 2 +- resources/assets/javascripts/lib/course_wizard.js | 6 +++--- resources/assets/javascripts/lib/fullcalendar.js | 2 +- resources/assets/javascripts/lib/resources.js | 2 +- resources/assets/javascripts/lib/smiley_picker.js | 2 +- resources/assets/javascripts/mvv_course_wizard.js | 6 +++--- resources/assets/stylesheets/scss/admin.scss | 2 +- resources/assets/stylesheets/scss/ajax.scss | 4 ++-- resources/assets/stylesheets/scss/globalsearch.scss | 2 +- resources/assets/stylesheets/scss/installer.scss | 2 +- .../assets/stylesheets/scss/progress_indicator.scss | 4 ++-- resources/assets/stylesheets/scss/search.scss | 2 +- resources/assets/stylesheets/scss/smileys.scss | 2 +- .../assets/stylesheets/scss/studip-overlay.scss | 8 ++------ resources/vue/components/BlubberGlobalstream.vue | 4 ++-- resources/vue/components/BlubberThread.vue | 4 ++-- resources/vue/components/BlubberThreadWidget.vue | 2 +- .../vue/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 6ece394..6e39e0d 100644 --- a/app/views/messages/overview.php +++ b/app/views/messages/overview.php @@ -81,7 +81,7 @@ - + diff --git a/public/assets/images/loading-indicator.svg b/public/assets/images/loading-indicator.svg new file mode 100644 index 0000000..94113e0 --- /dev/null +++ b/public/assets/images/loading-indicator.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js index 5dd746f..633062c 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 2f0c172..72a2a6e 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 = $('
').html( $('') - .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 b6a5191..ff689bc 100644 --- a/resources/assets/javascripts/bootstrap/members.js +++ b/resources/assets/javascripts/bootstrap/members.js @@ -9,7 +9,7 @@ STUDIP.domReady(() => { $('').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 c79bb32..3ec865b 100644 --- a/resources/assets/javascripts/bootstrap/statusgroups.js +++ b/resources/assets/javascripts/bootstrap/statusgroups.js @@ -12,7 +12,7 @@ STUDIP.ready(function() { $('').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 cf777da..dd4e1f7 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) { $('
') .html( $('') - .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 dd46422..307fb15 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(); $('', { - 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 87e6570..be01ee1 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( $('
  • ').html( $('') - .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( $('') - .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 = $('') - .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 1a1945a..c511847 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( $('
    ').html( - $('').attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg') + $('').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 36fb3d7..ac182a9 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( $('
    ').html( - $('').attr('src', STUDIP.ASSETS_URL + 'images/ajax-indicator-black.svg') + $('').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 8fd85ca..21d8bc2 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 63822f5..d182f34 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( $('
  • ').html( $('') - .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( $('') - .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 = $('') - .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 bd147e5..26f1369 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 19adf7d..053395f 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 5fc1d53..61aa9d9 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 9268b9c..9a72993 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 0f78c4c..3346d66 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 8d6b370..8ba202a 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 1621b47..e6bc47c 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 a48bc72..d7dbb92 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 548e1fd..2236e1f 100644 --- a/resources/vue/components/BlubberGlobalstream.vue +++ b/resources/vue/components/BlubberGlobalstream.vue @@ -4,7 +4,7 @@
    1. - +
    3. - +
    • diff --git a/resources/vue/components/BlubberThread.vue b/resources/vue/components/BlubberThread.vue index a3a5d70..b5d287d 100644 --- a/resources/vue/components/BlubberThread.vue +++ b/resources/vue/components/BlubberThread.vue @@ -34,7 +34,7 @@
    1. - +
    3. - +
    diff --git a/resources/vue/components/BlubberThreadWidget.vue b/resources/vue/components/BlubberThreadWidget.vue index 0606eb8..cfa6cb1 100644 --- a/resources/vue/components/BlubberThreadWidget.vue +++ b/resources/vue/components/BlubberThreadWidget.vue @@ -21,7 +21,7 @@
  • - +
    • diff --git a/resources/vue/components/StudipProgressIndicator.vue b/resources/vue/components/StudipProgressIndicator.vue index 8266ca2..b6f7ee2 100644 --- a/resources/vue/components/StudipProgressIndicator.vue +++ b/resources/vue/components/StudipProgressIndicator.vue @@ -1,7 +1,7 @@