Refactor content block element chooser to be more dynamic
This commit is contained in:
parent
69dac2cf7f
commit
926b31d1f5
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div
|
||||
:class="['chooser-element', subclass]"
|
||||
:data-cy="cy"
|
||||
@click="$emit('select')"
|
||||
>
|
||||
<component
|
||||
class="chooser-element__icon"
|
||||
:is="icon"
|
||||
/>
|
||||
<div class="chooser-element__title">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formElementIcons from '@/components/ui/form-element-icons';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default() {
|
||||
return `${this.type}-icon`;
|
||||
},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default() {
|
||||
return this.type.replace(/^\w/, c => c.toUpperCase());
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
...formElementIcons,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
subclass: `chooser-element--${this.type}`,
|
||||
cy: `choose-${this.type}-widget`,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
|
||||
.chooser-element {
|
||||
cursor: pointer;
|
||||
border: 1px solid $color-silver;
|
||||
border-radius: 4px;
|
||||
height: 105px;
|
||||
width: 105px;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 45px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -28,77 +28,14 @@
|
|||
:class="{'content-block-element-chooser-widget--no-assignment': hideAssignment}"
|
||||
class="content-block-element-chooser-widget"
|
||||
>
|
||||
<div
|
||||
class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--subtitle"
|
||||
data-cy="choose-subtitle-widget"
|
||||
@click="changeType('subtitle')"
|
||||
>
|
||||
<title-icon class="content-block-element-chooser-widget__link-icon" />
|
||||
<div class="content-block-element-chooser-widget__link-title">
|
||||
Untertitel
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--link"
|
||||
data-cy="choose-link-widget"
|
||||
@click="changeType('link_block')"
|
||||
>
|
||||
<link-icon class="content-block-element-chooser-widget__link-icon" />
|
||||
<div class="content-block-element-chooser-widget__link-title">
|
||||
Link
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--video"
|
||||
data-cy="choose-video-widget"
|
||||
@click="changeType('video_block')"
|
||||
>
|
||||
<video-icon class="content-block-element-chooser-widget__link-icon" />
|
||||
<div class="content-block-element-chooser-widget__link-title">
|
||||
Video
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--image"
|
||||
data-cy="choose-image-widget"
|
||||
@click="changeType('image_url_block')"
|
||||
>
|
||||
<image-icon class="content-block-element-chooser-widget__link-icon" />
|
||||
<div class="content-block-element-chooser-widget__link-title">
|
||||
Bild
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--text"
|
||||
data-cy="choose-text-widget"
|
||||
@click="changeType('text_block')"
|
||||
>
|
||||
<text-icon class="content-block-element-chooser-widget__link-icon" />
|
||||
<div class="content-block-element-chooser-widget__link-title">
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--assignment"
|
||||
data-cy="choose-assignment-widget"
|
||||
v-if="!hideAssignment"
|
||||
@click="changeType('assignment')"
|
||||
>
|
||||
<speech-bubble-icon class="content-block-element-chooser-widget__link-icon" />
|
||||
<div class="content-block-element-chooser-widget__link-title">
|
||||
Aufgabe & Ergebnis
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--document"
|
||||
data-cy="choose-document-widget"
|
||||
@click="changeType('document_block')"
|
||||
>
|
||||
<document-icon class="content-block-element-chooser-widget__link-icon" />
|
||||
<div class="content-block-element-chooser-widget__link-title">
|
||||
Dokument
|
||||
</div>
|
||||
</div>
|
||||
<chooser-element
|
||||
:title="type.title"
|
||||
:type="type.type"
|
||||
:icon="type.icon"
|
||||
v-for="(type, idx) in filteredChooserTypes"
|
||||
:key="idx"
|
||||
@select="changeType(type.block)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -107,8 +44,8 @@
|
|||
import Checkbox from '@/components/ui/Checkbox';
|
||||
|
||||
import formElementIcons from '@/components/ui/form-element-icons';
|
||||
import TitleIcon from '@/components/icons/TitleIcon';
|
||||
import CrossIcon from '@/components/icons/CrossIcon';
|
||||
import ChooserElement from '@/components/content-forms/ChooserElement';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -125,15 +62,63 @@
|
|||
},
|
||||
|
||||
components: {
|
||||
ChooserElement,
|
||||
CrossIcon,
|
||||
TitleIcon,
|
||||
Checkbox,
|
||||
...formElementIcons,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
convertToList: false,
|
||||
}),
|
||||
data() {
|
||||
return {
|
||||
convertToList: false,
|
||||
chooserTypes: [
|
||||
{
|
||||
type: 'subtitle',
|
||||
block: 'subtitle',
|
||||
title: 'Untertitel',
|
||||
icon: 'title-icon',
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
block: 'link_block',
|
||||
title: 'Link',
|
||||
icon: 'link-icon',
|
||||
},
|
||||
{
|
||||
type: 'video',
|
||||
block: 'video_block',
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
block: 'image_url_block',
|
||||
title: 'Bild',
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
block: 'text_block',
|
||||
},
|
||||
{
|
||||
type: 'assignment',
|
||||
block: 'assignment',
|
||||
icon: 'speech-bubble-icon',
|
||||
title: 'Aufgabe & Ergebnis',
|
||||
},
|
||||
{
|
||||
type: 'document',
|
||||
block: 'document_block',
|
||||
title: 'Dokument',
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredChooserTypes() {
|
||||
return this.chooserTypes.filter(type => !("show" in type) || type.show ); // display element if `show` is not set or if `show` evaluates to true
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeType(type) {
|
||||
|
|
@ -144,7 +129,7 @@
|
|||
},
|
||||
remove() {
|
||||
this.$emit('remove');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -222,29 +207,6 @@
|
|||
grid-row: 1;
|
||||
}
|
||||
|
||||
&__link {
|
||||
cursor: pointer;
|
||||
border: 1px solid $color-silver;
|
||||
border-radius: 4px;
|
||||
height: 105px;
|
||||
width: 105px;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 45px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__link-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
&__link-text {
|
||||
font-size: toRem(13px);
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue