ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add loading message to activities and refactor the module and intrument activities

This commit is contained in:
Lorenz Padberg 2023-09-08 10:00:17 +02:00
parent 595332825a
commit bc715a937f
8 changed files with 110 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/profile/ContentBookmark.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="content-bookmark module-activity-entry">
<div class="content-bookmark module-activity-entry" v-if="content">
<!-- eslint-disable vue/no-v-html -->
<div
v-if="content.type === 'text_block'"
@ -30,7 +30,7 @@ export default {
content() {
return this.bookmark.contentBlock
? this.bookmark.contentBlock.contents.find((e) => e.id === this.bookmark.uuid)
: this.bookmark.instrument.contents.find((e) => e.id === this.bookmark.uuid);
: this.bookmark.instrument?.find((e) => e.id === this.bookmark.uuid);
},
text() {
return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';

15
client/src/components/profile/InstrumentActivity.vue
View File

@ -7,7 +7,7 @@
{{ type }}
</h3>
<h2 class="instrument-activity__title">
{{ instrument.title }}
{{ instrument.title }}
</h2>
<div class="instrument-activity__tasks activity-tasks">
<activity-entry
@ -22,11 +22,11 @@
<activity-entry
title="Notiz"
class="instrument-activity__entry"
v-for="note in notes"
:key="note.id"
@link="goTo(note.id)"
v-for="noteBookmark in notes"
:key="noteBookmark.id"
@link="goTo(noteBookmark.note.id)"
>
{{ note.text }}
{{ noteBookmark.note.text }}
</activity-entry>
</div>
</div>
@ -48,10 +48,10 @@ export default {
},
computed: {
empty() {
return !this.instrument.bookmarks.length;
return !(this.bookmarks.length || this.notes.length);
},
notes() {
return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note).map((b) => b.note) : [];
return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note) : [];
},
bookmarks() {
return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
@ -63,6 +63,7 @@ export default {
methods: {
...mapActions(['scrollToAssignmentId']),
goTo(scrollTo) {
// TODO: fix this part, with instruments it does not navigate to the bookmark itself. (added in support case 6.9.2023)
const url = `/instrument/${this.instrument.slug}/`;
this.$apollo.mutate({
mutation: SCROLL_TO_MUTATION,

17
client/src/components/profile/ModuleActivity.vue
View File

@ -23,17 +23,17 @@
class="module-activity__entry"
v-for="answer in answers"
:key="answer.id"
@link="goTo(answer.survey.id)"
@link="goTo('module', this.module.slug)"
>
{{ answer.survey.title }}
</activity-entry>
<activity-entry
title="Lesezeichen ContentBlock"
title="Lesezeichen"
class="module-activity__entry"
:bookmark="bookmark"
v-for="bookmark in contentBookmarks"
:key="bookmark.id"
@link="goTo(bookmark.contentBlock.id)"
@link="goTo('content', bookmark.contentBlock.id)"
>
<content-bookmark :bookmark="bookmark" />
</activity-entry>
@ -42,7 +42,7 @@
class="module-activity__entry"
v-for="bookmark in chapterBookmarks"
:key="bookmark.id"
@link="goTo(bookmark.chapter.id)"
@link="goTo('content', bookmark.chapter.id)"
>
{{ bookmark.chapter.description }}
</activity-entry>
@ -52,7 +52,7 @@
:bookmark="noteBookmark"
v-for="noteBookmark in notes"
:key="noteBookmark.note.id"
@link="goTo(noteBookmark.contentBlock.id)"
@link="goTo('content', noteBookmark.contentBlock ? noteBookmark.contentBlock.id : noteBookmark.chapter.id)"
>
{{ noteBookmark.note.text }}
</activity-entry>
@ -101,13 +101,13 @@ export default {
return this.applyFilter('bookmarks') ? this.module.myContentBookmarks : [];
},
chapterBookmarks() {
return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : [];
return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : []
},
},
methods: {
...mapActions(['scrollToAssignmentId']),
goTo(scrollTo) {
const url = `/module/${this.module.slug}/`;
goTo(contentType, scrollTo) {
const url = `/${contentType}/${scrollTo}/`;
this.$apollo.mutate({
mutation: SCROLL_TO_MUTATION,
variables: {
@ -116,6 +116,7 @@ export default {
});
this.$router.push(url);
},
applyFilter(filterCriteria) {
return !this.filter || this.filter === filterCriteria;
},

33
client/src/components/ui/InfoMessage.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="info-message">
<info-icon class="info-message__icon" />
<span class="info-message__text"><slot></slot> </span>
</div>
</template>
<script setup lang="ts">
import InfoIcon from '@/components/icons/InfoIcon.vue';
</script>
<style scoped lang="scss">
@import 'styles/helpers';
.info-message {
display: flex;
align-items: center;
&__icon {
width: $large-icon-dimension;
height: $large-icon-dimension;
fill: $color-brand;
margin-right: $small-spacing;
}
&__text {
@include regular-text;
color: $color-brand;
margin-right: $medium-spacing;
}
}
</style>

7
client/src/components/ui/loadingMessage.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="loading-message">
<loading-spinner class="loading-message__spinner" />
<loading-spinner class="loading-message__spinner" style="
--spinner-size: 40px; "/>
<span class="loading-message__text"><slot></slot> </span>
</div>
</template>
@ -18,15 +19,13 @@ import LoadingSpinner from "@/components/ui/loadingSpinner.vue";
align-items: center;
&__icon {
width: $large-icon-dimension;
height: $large-icon-dimension;
fill: $color-brand;
margin-right: $large-spacing;
}
&__text {
@include regular-text;
color: $color-brand;
margin-left: $medium-spacing;
margin-right: $medium-spacing;
}
}

84
client/src/components/ui/loadingSpinner.vue
View File

@ -6,26 +6,29 @@
<style scoped lang="scss">
@import 'styles/helpers';
// copied from https://loading.io/css/ updated for scalability
.loading-spinner {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
width: var(--spinner-size, 80px);
height: var(--spinner-size, 80px);
--calculated-dot-size: calc(var(--spinner-size, 80px) * 0.0875); // 7px is 8.75% of 80px
div {
div {
animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
transform-origin: calc(var(--spinner-size, 80px) / 2) calc(var(--spinner-size, 80px) / 2);
}
div:after {
div:after {
content: " ";
display: block;
position: absolute;
width: 7px;
height: 7px;
width: var(--calculated-dot-size);
height: var(--calculated-dot-size);
border-radius: 50%;
background: $color-brand;
margin: -4px 0 0 -4px;
background: var(--spinner-color, $color-brand);
margin: calc(var(--calculated-dot-size) / -2) 0 0 calc(var(--calculated-dot-size) / -2);
}
div:nth-child(1) {
@ -50,54 +53,71 @@
animation-delay: -0.108s;
}
div:nth-child(3):after {
top: 71px;
left: 48px;
}
div:nth-child(4) {
animation-delay: -0.144s;
}
div:nth-child(4):after {
top: 72px;
left: 40px;
}
div:nth-child(5) {
animation-delay: -0.18s;
}
div:nth-child(5):after {
top: 71px;
left: 32px;
}
div:nth-child(6) {
animation-delay: -0.216s;
}
div:nth-child(6):after {
top: 68px;
left: 24px;
}
div:nth-child(7) {
animation-delay: -0.252s;
}
div:nth-child(7):after {
top: 63px;
left: 17px;
}
div:nth-child(8) {
animation-delay: -0.288s;
}
div:nth-child(8):after {
top: 56px;
left: 12px;
div:nth-child(1):after {
top: calc(var(--spinner-size, 80px) * 0.7875);
left: calc(var(--spinner-size, 80px) * 0.7875);
}
div:nth-child(2):after {
top: calc(var(--spinner-size, 80px) * 0.85);
left: calc(var(--spinner-size, 80px) * 0.7);
}
div:nth-child(3):after {
top: calc(var(--spinner-size, 80px) * 0.8875);
left: calc(var(--spinner-size, 80px) * 0.6);
}
div:nth-child(4):after {
top: calc(var(--spinner-size, 80px) * 0.9);
left: calc(var(--spinner-size, 80px) * 0.5);
}
div:nth-child(5):after {
top: calc(var(--spinner-size, 80px) * 0.8875);
left: calc(var(--spinner-size, 80px) * 0.4);
}
div:nth-child(6):after {
top: calc(var(--spinner-size, 80px) * 0.85);
left: calc(var(--spinner-size, 80px) * 0.3);
}
div:nth-child(7):after {
top: calc(var(--spinner-size, 80px) * 0.7875);
left: calc(var(--spinner-size, 80px) * 0.2125);
}
div:nth-child(8):after {
top: calc(var(--spinner-size, 80px) * 0.7);
left: calc(var(--spinner-size, 80px) * 0.15);
}
}
@keyframes loading-spinner {

2
client/src/graphql/gql/queries/myActivity.gql
View File

@ -35,7 +35,9 @@ query MyActivityQuery {
slug
metaTitle
topic {
id
title
slug
}
mySubmissions {
edges {

1
client/src/styles/_variables.scss
View File

@ -87,3 +87,4 @@ $screen-width: 1200px;
$default-icon-dimension: 25px;
$small-icon-dimension: 14px;
$large-icon-dimension: 40px;