107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<template>
|
|
<div class="content-block-chooser-widget" v-on:click="$emit('change-type', index)">
|
|
<div class="content-block-chooser-widget__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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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>
|