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

Add component class to content component

This commit is contained in:
Ramon Wenger 2020-10-07 21:49:56 +02:00
parent 7fb61d9f05
commit 69e19591b3
1 changed files with 86 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/components/content-blocks/ContentComponent.vue
View File

@ -1,8 +1,8 @@
<template>
<div
:class="{'content-component--bookmarked': bookmarked}"
:class="componentClass"
:data-scrollto="component.id"
class="content-component">
>
<bookmark-actions
:bookmarked="bookmarked"
:note="note"
@ -19,31 +19,31 @@
</template>
<script>
import {mapGetters} from 'vuex';
import {mapGetters} from 'vuex';
import TextBlock from '@/components/content-blocks/TextBlock';
import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
import ImageBlock from '@/components/content-blocks/ImageBlock';
import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
import VideoBlock from '@/components/content-blocks/VideoBlock';
import LinkBlock from '@/components/content-blocks/LinkBlock';
import DocumentBlock from '@/components/content-blocks/DocumentBlock';
import InfogramBlock from '@/components/content-blocks/InfogramBlock';
import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
import ContentListBlock from '@/components/content-blocks/ContentListBlock';
import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug';
import Assignment from '@/components/content-blocks/assignment/Assignment';
import Survey from '@/components/content-blocks/SurveyBlock';
import Solution from '@/components/content-blocks/Solution';
import Instruction from '@/components/content-blocks/Instruction';
import BookmarkActions from '@/components/notes/BookmarkActions';
import TextBlock from '@/components/content-blocks/TextBlock';
import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
import ImageBlock from '@/components/content-blocks/ImageBlock';
import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
import VideoBlock from '@/components/content-blocks/VideoBlock';
import LinkBlock from '@/components/content-blocks/LinkBlock';
import DocumentBlock from '@/components/content-blocks/DocumentBlock';
import InfogramBlock from '@/components/content-blocks/InfogramBlock';
import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
import ContentListBlock from '@/components/content-blocks/ContentListBlock';
import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug';
import Assignment from '@/components/content-blocks/assignment/Assignment';
import Survey from '@/components/content-blocks/SurveyBlock';
import Solution from '@/components/content-blocks/Solution';
import Instruction from '@/components/content-blocks/Instruction';
import BookmarkActions from '@/components/notes/BookmarkActions';
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
export default {
export default {
props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
components: {
@ -80,6 +80,13 @@
},
showBookmarkActions() {
return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
},
componentClass() {
let classes = ['content-component', `content-component--${this.component.type}`];
if (this.bookmarked) {
classes.push('content-component--bookmarked');
}
return classes;
}
},
@ -98,17 +105,17 @@
this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
}
}
};
};
</script>
<style lang="scss" scoped>
@import "@/styles/_variables.scss";
@import "@/styles/_variables.scss";
.content-component {
.content-component {
position: relative;
&--bookmarked {
}
}
}
</style>