Refactor code
This commit is contained in:
Ramon Wenger
parent
4010b21cce
commit
395434620b
|
|
@ -5,7 +5,7 @@
|
|||
<component
|
||||
class="new-content-block-wizard__element-component"
|
||||
:is="type(element)"
|
||||
:class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
|
||||
:class="{'new-content-block-wizard__chooser': type(element) === 'content-block-element-chooser-widget'}"
|
||||
:element="element" v-bind="element" :index="index"
|
||||
v-on:change-type="changeType"
|
||||
v-on:link-change-url="changeLinkUrl"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
v-on:video-change-url="changeVideoUrl">
|
||||
</component>
|
||||
<a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
|
||||
<trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
|
||||
<trash-icon v-if="type(element) !== 'content-block-element-chooser-widget'"
|
||||
class="new-content-block-wizard__trash-icon"></trash-icon>
|
||||
</a>
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<script>
|
||||
import Modal from '@/components/Modal';
|
||||
import ContentBlockChooserWidget from '@/components/content-forms/ContentBlockChooserWidget';
|
||||
import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
|
||||
import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
|
||||
import AddContentElement from '@/components/AddContentElement';
|
||||
import LinkForm from '@/components/content-forms/LinkForm';
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
ContentBlockChooserWidget,
|
||||
ContentBlockElementChooserWidget,
|
||||
ContentBlockTitleInput,
|
||||
AddContentElement,
|
||||
LinkForm,
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
case 'document':
|
||||
return 'document-form';
|
||||
}
|
||||
return 'content-block-chooser-widget'
|
||||
return 'content-block-element-chooser-widget'
|
||||
},
|
||||
_updateProperty(value, index, key) {
|
||||
this.elements.splice(index, 1, {
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
<template>
|
||||
<div class="content-block-chooser-widget">
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'link')">
|
||||
<link-icon class="content-block-chooser-widget__link-icon"></link-icon>
|
||||
<div class="content-block-chooser-widget__link-title">Link</div>
|
||||
</div>
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'video_block')">
|
||||
<video-icon class="content-block-chooser-widget__link-icon"></video-icon>
|
||||
<div class="content-block-chooser-widget__link-title">Video</div>
|
||||
</div>
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'image')">
|
||||
<image-icon class="content-block-chooser-widget__link-icon"></image-icon>
|
||||
<div class="content-block-chooser-widget__link-title">Bild</div>
|
||||
</div>
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'text_block')">
|
||||
<text-icon class="content-block-chooser-widget__link-icon"></text-icon>
|
||||
<div class="content-block-chooser-widget__link-title">Text</div>
|
||||
</div>
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'exercise')">
|
||||
<speech-bubble-icon class="content-block-chooser-widget__link-icon"></speech-bubble-icon>
|
||||
<div class="content-block-chooser-widget__link-title">Aufgabe & Ergebnis</div>
|
||||
</div>
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'document')">
|
||||
<document-icon class="content-block-chooser-widget__link-icon"></document-icon>
|
||||
<div class="content-block-chooser-widget__link-title">Dokument</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkIcon from '@/components/icons/LinkIcon';
|
||||
import VideoIcon from '@/components/icons/VideoIcon';
|
||||
import ImageIcon from '@/components/icons/ImageIcon';
|
||||
import TextIcon from '@/components/icons/TextIcon';
|
||||
import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
|
||||
import DocumentIcon from '@/components/icons/DocumentIcon';
|
||||
|
||||
export default {
|
||||
props: ['element', 'index'],
|
||||
|
||||
components: {
|
||||
LinkIcon,
|
||||
VideoIcon,
|
||||
ImageIcon,
|
||||
TextIcon,
|
||||
SpeechBubbleIcon,
|
||||
DocumentIcon
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeType() {
|
||||
console.log('changeType');
|
||||
this.element.type = 'link';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.content-block-chooser-widget {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
font-family: $sans-serif-font-family;
|
||||
text-align: center;
|
||||
border: 2px solid $color-grey;
|
||||
padding: 30px 5px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $color-grey;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
background-color: white;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&__link {
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__link-icon {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&__link-text {
|
||||
font-size: toRem(13px);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div class="content-block-element-chooser-widget">
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'link')">
|
||||
<link-icon class="content-block-element-chooser-widget__link-icon"></link-icon>
|
||||
<div class="content-block-element-chooser-widget__link-title">Link</div>
|
||||
</div>
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'video_block')">
|
||||
<video-icon class="content-block-element-chooser-widget__link-icon"></video-icon>
|
||||
<div class="content-block-element-chooser-widget__link-title">Video</div>
|
||||
</div>
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'image')">
|
||||
<image-icon class="content-block-element-chooser-widget__link-icon"></image-icon>
|
||||
<div class="content-block-element-chooser-widget__link-title">Bild</div>
|
||||
</div>
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'text_block')">
|
||||
<text-icon class="content-block-element-chooser-widget__link-icon"></text-icon>
|
||||
<div class="content-block-element-chooser-widget__link-title">Text</div>
|
||||
</div>
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'exercise')">
|
||||
<speech-bubble-icon class="content-block-element-chooser-widget__link-icon"></speech-bubble-icon>
|
||||
<div class="content-block-element-chooser-widget__link-title">Aufgabe & Ergebnis</div>
|
||||
</div>
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'document')">
|
||||
<document-icon class="content-block-element-chooser-widget__link-icon"></document-icon>
|
||||
<div class="content-block-element-chooser-widget__link-title">Dokument</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkIcon from '@/components/icons/LinkIcon';
|
||||
import VideoIcon from '@/components/icons/VideoIcon';
|
||||
import ImageIcon from '@/components/icons/ImageIcon';
|
||||
import TextIcon from '@/components/icons/TextIcon';
|
||||
import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
|
||||
import DocumentIcon from '@/components/icons/DocumentIcon';
|
||||
|
||||
export default {
|
||||
props: ['element', 'index'],
|
||||
|
||||
components: {
|
||||
LinkIcon,
|
||||
VideoIcon,
|
||||
ImageIcon,
|
||||
TextIcon,
|
||||
SpeechBubbleIcon,
|
||||
DocumentIcon
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeType() {
|
||||
console.log('changeType');
|
||||
this.element.type = 'link';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.content-block-element-chooser-widget {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
font-family: $sans-serif-font-family;
|
||||
text-align: center;
|
||||
border: 2px solid $color-grey;
|
||||
padding: 30px 5px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $color-grey;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
background-color: white;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&__link {
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__link-icon {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&__link-text {
|
||||
font-size: toRem(13px);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -81,8 +81,5 @@
|
|||
grid-column: 1 / span 2;
|
||||
width: $modal-input-width
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue