Add video form and other components
This commit is contained in:
Ramon Wenger
parent
596364b6a4
commit
bc49de49a8
|
|
@ -1,26 +1,26 @@
|
|||
<template>
|
||||
<div class="content-block-chooser-widget" v-on:click="$emit('change-type', index)">
|
||||
<div class="content-block-chooser-widget__link">
|
||||
<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">
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'video')">
|
||||
<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">
|
||||
<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">
|
||||
<div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'text')">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
grid-area: body;
|
||||
padding: 10px $modal-lateral-padding;
|
||||
overflow: auto;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
<modal>
|
||||
<content-block-title-input slot="header"></content-block-title-input>
|
||||
<div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
|
||||
<component :is="type(element)"
|
||||
:class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
|
||||
:element="element" :index="index"
|
||||
v-on:change-type="changeType"
|
||||
<component
|
||||
class="new-content-block-wizard__element-component"
|
||||
:is="type(element)"
|
||||
:class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
|
||||
:element="element" :index="index"
|
||||
v-on:change-type="changeType"
|
||||
></component>
|
||||
<a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
|
||||
<trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
|
||||
|
|
@ -26,6 +28,11 @@
|
|||
import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
|
||||
import AddContentElement from '@/components/AddContentElement';
|
||||
import LinkForm from '@/components/content-forms/LinkForm';
|
||||
import VideoForm from '@/components/content-forms/VideoForm';
|
||||
import ImageForm from '@/components/content-forms/ImageForm';
|
||||
import DocumentForm from '@/components/content-forms/DocumentForm';
|
||||
import ExerciseForm from '@/components/content-forms/ExerciseForm';
|
||||
import TextForm from '@/components/content-forms/TextForm';
|
||||
import TrashIcon from '@/components/icons/TrashIcon';
|
||||
|
||||
export default {
|
||||
|
|
@ -35,6 +42,11 @@
|
|||
ContentBlockTitleInput,
|
||||
AddContentElement,
|
||||
LinkForm,
|
||||
VideoForm,
|
||||
ImageForm,
|
||||
DocumentForm,
|
||||
ExerciseForm,
|
||||
TextForm,
|
||||
TrashIcon
|
||||
},
|
||||
|
||||
|
|
@ -42,7 +54,17 @@
|
|||
type(element) {
|
||||
switch (element.type) {
|
||||
case 'link':
|
||||
return 'link-form'
|
||||
return 'link-form';
|
||||
case 'video':
|
||||
return 'video-form';
|
||||
case 'image':
|
||||
return 'image-form';
|
||||
case 'text':
|
||||
return 'text-form';
|
||||
case 'exercise':
|
||||
return 'exercise-form';
|
||||
case 'document':
|
||||
return 'document-form';
|
||||
}
|
||||
return 'content-block-chooser-widget'
|
||||
},
|
||||
|
|
@ -52,8 +74,8 @@
|
|||
addElement(index) {
|
||||
this.elements.splice(index + 1, 0, {})
|
||||
},
|
||||
changeType(index) {
|
||||
this.elements.splice(index, 1, {type: 'link'});
|
||||
changeType(index, type) {
|
||||
this.elements.splice(index, 1, {type: type});
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -61,16 +83,24 @@
|
|||
return {
|
||||
elements: [
|
||||
{
|
||||
id: 1,
|
||||
type: 'link'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'link'
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
id: 3
|
||||
}
|
||||
type: 'video'
|
||||
},
|
||||
{
|
||||
type: 'document'
|
||||
},
|
||||
{
|
||||
type: 'exercise'
|
||||
},
|
||||
{
|
||||
type: 'image'
|
||||
},
|
||||
{}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -87,7 +117,11 @@
|
|||
display: grid;
|
||||
grid-template-columns: 1fr 50px;
|
||||
grid-auto-rows: auto;
|
||||
width: 97%; // reserve space for scrollbar
|
||||
/*width: 95%; // reserve space for scrollbar*/
|
||||
}
|
||||
|
||||
&__element-component {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&__remove {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="document-form">
|
||||
<h1>Document Form</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.document-form {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="exercise-form">
|
||||
<h1>Exercise Form</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.exercise-form {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="image-form">
|
||||
<h1>Image Form</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.image-form {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,13 +10,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TrashIcon from '@/components/icons/TrashIcon';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TrashIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="text-form">
|
||||
<h1>Text Form</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.text-form {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="video-form">
|
||||
|
||||
<info-icon class="video-form__help-icon"></info-icon>
|
||||
<p class="video-form__help-description">
|
||||
Sie können Videos auf <a class="video-form__platform-link" href="https://youtube.com/" target="_blank">Youtube</a>
|
||||
oder <a class="video-form__platform-link" href="https://vimeo.com/" target="_blank">Vimeo</a>
|
||||
hochladen und anschliessen einen Link hier einfügen.
|
||||
</p>
|
||||
|
||||
<input class="video-form__video-link skillbox-input" placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InfoIcon from '@/components/icons/InfoIcon';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InfoIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.video-form {
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
grid-template-columns: 40px 1fr;
|
||||
grid-column-gap: 16px;
|
||||
grid-row-gap: 20px;
|
||||
align-items: center;
|
||||
|
||||
&__help-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
fill: $color-brand;
|
||||
}
|
||||
|
||||
&__help-description {
|
||||
font-family: $sans-serif-font-family;
|
||||
font-size: toRem(17px);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__platform-link {
|
||||
font-family: $sans-serif-font-family;
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
font-size: toRem(17px);
|
||||
}
|
||||
|
||||
&__video-link {
|
||||
grid-column: 1 / span 2;
|
||||
width: $modal-input-width
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<path
|
||||
d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
|
||||
<path d="M50,46.17a2.45,2.45,0,0,0-2.45,2.45V72.49a2.45,2.45,0,1,0,4.9,0V48.62A2.45,2.45,0,0,0,50,46.17Z"/>
|
||||
<circle cx="50" cy="30.56" r="3.5"/>
|
||||
</svg>
|
||||
</template>
|
||||
Loading…
Reference in New Issue