diff options
25 files changed, 62 insertions, 45 deletions
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 @@ </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 0000000..94113e0 --- /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 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 = $('<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 b6a5191..ff689bc 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 c79bb32..3ec865b 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 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) { $('<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 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(); $('<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 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( $('<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 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( $('<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 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( $('<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 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( $('<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 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 @@ <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 a3a5d70..b5d287d 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 0606eb8..cfa6cb1 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 8266ca2..b6f7ee2 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> |
