From deab0f87c8dc30dc9f19ac9cb19042f9f45748ee Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Tue, 1 Feb 2022 08:33:20 +0000
Subject: [PATCH] fix #560
---
.../assets/stylesheets/scss/courseware.scss | 4 +++
.../stylesheets/scss/progress_indicator.scss | 29 +++++++++++++++
resources/assets/stylesheets/studip.scss | 1 +
.../components/StudipProgressIndicator.vue | 35 +++++++++++++++++++
.../vue/components/courseware/IndexApp.vue | 8 ++++-
5 files changed, 76 insertions(+), 1 deletion(-)
create mode 100644 resources/assets/stylesheets/scss/progress_indicator.scss
create mode 100644 resources/vue/components/StudipProgressIndicator.vue
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 524636c71af..fdfa011ecd6 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -119,6 +119,10 @@ c o n t e n t s
}
}
+.cw-loading-indicator-content {
+ margin-top: 76px;
+}
+
/* * * * * * * * * * *
c o n t e n t s e n d
* * * * * * * * * * */
diff --git a/resources/assets/stylesheets/scss/progress_indicator.scss b/resources/assets/stylesheets/scss/progress_indicator.scss
new file mode 100644
index 00000000000..0f78c4c2931
--- /dev/null
+++ b/resources/assets/stylesheets/scss/progress_indicator.scss
@@ -0,0 +1,29 @@
+.progress-indicator-wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .progress-indicator {
+ width: 100%;
+ background-image: url("#{$image-path}/ajax-indicator-black.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+ .progress-indicator-description,
+ .progress-indicator-description-default {
+ color: $dark-gray-color-45;
+ text-align: center;
+ margin-top: 10px;
+ }
+ .progress-indicator-description-default {
+ display: none;
+ }
+ @media (prefers-reduced-motion) {
+ .progress-indicator {
+ @include background-icon(refresh, info, 32);
+ }
+ .progress-indicator-description-default {
+ display: block;
+ }
+ }
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 4a157b2456f..2f46b79b9a1 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -19,6 +19,7 @@
@import "scss/dates";
@import "scss/files";
@import "scss/fullscreen";
+@import "scss/progress_indicator.scss";
@import "scss/my_courses";
@import "scss/oer";
@import "scss/report";
diff --git a/resources/vue/components/StudipProgressIndicator.vue b/resources/vue/components/StudipProgressIndicator.vue
new file mode 100644
index 00000000000..8266ca2ae03
--- /dev/null
+++ b/resources/vue/components/StudipProgressIndicator.vue
@@ -0,0 +1,35 @@
+<template>
+ <div class="progress-indicator-wrapper">
+ <div class="progress-indicator" :style="indicatorStyle"></div>
+ <p v-if="description !== ''" class="progress-indicator-description">
+ {{ description }}
+ </p>
+ <p v-else class="progress-indicator-description-default">
+ <translate>Lade...</translate>
+ </p>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'studip-progress-indicator',
+ props: {
+ description: {
+ type: String,
+ required: false
+ },
+ width: {
+ type: Number,
+ default: 32
+ }
+ },
+ computed: {
+ indicatorStyle() {
+ let style = 'background-size: ' + this.width + 'px;';
+ style += 'height: ' + this.width + 'px;';
+
+ return style;
+ }
+ }
+}
+</script>
\ No newline at end of file
diff --git a/resources/vue/components/courseware/IndexApp.vue b/resources/vue/components/courseware/IndexApp.vue
index 76fbc4b7150..7209dedffad 100755
--- a/resources/vue/components/courseware/IndexApp.vue
+++ b/resources/vue/components/courseware/IndexApp.vue
@@ -13,13 +13,18 @@
<courseware-view-widget></courseware-view-widget>
</MountingPortal>
</div>
- <div v-else><translate>Inhalte werden geladen</translate>...</div>
+ <studip-progress-indicator
+ v-else
+ class="cw-loading-indicator-content"
+ :description="$gettext('Lade Lernmaterial...')"
+ />
</template>
<script>
import CoursewareStructuralElement from './CoursewareStructuralElement.vue';
import CoursewareViewWidget from './CoursewareViewWidget.vue';
import CoursewareActionWidget from './CoursewareActionWidget.vue';
+import StudipProgressIndicator from '../StudipProgressIndicator.vue';
import { mapActions, mapGetters } from 'vuex';
export default {
@@ -27,6 +32,7 @@ export default {
CoursewareStructuralElement,
CoursewareViewWidget,
CoursewareActionWidget,
+ StudipProgressIndicator,
},
data: () => ({
canVisit: null,
--
GitLab