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

Add link form and remove button

This commit is contained in:
Ramon Wenger 2018-09-06 13:39:36 +02:00
parent 300a7b8b08
commit c07ec49d14
7 changed files with 132 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/AddContentElement.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="add-content-element">
<div class="add-content-element" v-on:click="$emit('add-element')">
<add-icon class="add-content-element__icon"></add-icon>
</div>
</template>

11
client/src/components/ContentBlockChooserWidget.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="content-block-chooser-widget">
<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>
@ -36,6 +36,8 @@
import DocumentIcon from '@/components/icons/DocumentIcon';
export default {
props: ['element', 'index'],
components: {
LinkIcon,
VideoIcon,
@ -43,6 +45,13 @@
TextIcon,
SpeechBubbleIcon,
DocumentIcon
},
methods: {
changeType() {
console.log('changeType');
this.element.type = 'link';
}
}
}
</script>

1
client/src/components/Modal.vue
View File

@ -65,6 +65,7 @@
grid-area: body;
padding: 10px $modal-lateral-padding;
overflow: auto;
width: 90%;
}
&__footer {

85
client/src/components/NewContentBlockWizard.vue
View File

@ -2,9 +2,17 @@
<modal>
<content-block-title-input slot="header"></content-block-title-input>
<div v-for="element in elements" :key="element.id">
<component :is="type(element)"></component>
<add-content-element></add-content-element>
<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>
<a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
<trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
class="new-content-block-wizard__trash-icon"></trash-icon>
</a>
<add-content-element class="new-content-block-wizard__add" v-on:add-element="addElement"></add-content-element>
</div>
</modal>
</template>
@ -14,27 +22,54 @@
import ContentBlockChooserWidget from '@/components/ContentBlockChooserWidget';
import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
import AddContentElement from '@/components/AddContentElement';
import LinkForm from '@/components/content-forms/LinkForm';
import TrashIcon from '@/components/icons/TrashIcon';
export default {
components: {
Modal,
ContentBlockChooserWidget,
ContentBlockTitleInput,
AddContentElement
AddContentElement,
LinkForm,
TrashIcon
},
methods: {
type(element) {
switch (element.type) {
case 'link':
return 'link-form'
}
return 'content-block-chooser-widget'
},
removeElement(index) {
this.elements.splice(index, 1);
},
addElement() {
this.elements.push({
id: 5
})
},
changeType(index) {
this.elements.splice(index, 1, {type: 'link'});
}
},
data() {
return {
elements: [
{id: 1},
{id: 2},
{id: 3}
{
id: 1,
type: 'link'
},
{
id: 2,
type: 'link'
},
{
id: 3
}
]
}
}
@ -44,10 +79,38 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.new-content-block {
&__title {
padding: 10px 30px;
border-bottom: 1px solid $color-lightgrey;
.new-content-block-wizard {
/* top level does not exist, because of the modal */
&__element {
display: grid;
grid-template-columns: 1fr 50px;
grid-auto-rows: auto;
width: 97%; // reserve space for scrollbar
}
&__remove {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
&__trash-icon {
width: 25px;
height: 25px;
fill: $color-grey;
cursor: pointer;
justify-self: center;
}
&__chooser {
grid-column: 1 / span 2;
}
&__add {
grid-column: 1 / span 2;
}
}
</style>

36
client/src/components/content-forms/LinkForm.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div class="link-form">
<div class="link-form__property">
<input placeholder="Name erfassen..." class="link-form__input skillbox-input">
</div>
<div class="link-form__property">
<input placeholder="URL einfügen..." class="link-form__input skillbox-input">
</div>
</div>
</template>
<script>
import TrashIcon from '@/components/icons/TrashIcon';
export default {
components: {
TrashIcon
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.link-form {
&__property {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 11px;
}
&__input {
width: $modal-input-width;
}
}
</style>

9
client/src/components/icons/TrashIcon.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path
d="M78,81.62A8.37,8.37,0,0,1,69.64,90H30.36A8.37,8.37,0,0,1,22,81.62V23H78V81.62ZM36.2,14.92A4.91,4.91,0,0,1,41.1,10H58.9a4.91,4.91,0,0,1,4.9,4.9V18H36.2ZM87.5,18H68.79V14.92A9.9,9.9,0,0,0,58.9,5H41.1a9.9,9.9,0,0,0-9.89,9.89V18H12.5a2.5,2.5,0,1,0,0,5H17V81.62A13.37,13.37,0,0,0,30.36,95H69.64A13.37,13.37,0,0,0,83,81.62V23H87.5a2.5,2.5,0,0,0,0-5Z"/>
<path d="M50,81a2.49,2.49,0,0,0,2.5-2.5V34.41a2.5,2.5,0,0,0-5,0V78.52A2.5,2.5,0,0,0,50,81Z"/>
<path d="M33.71,78.28a2.49,2.49,0,0,0,2.5-2.5V37.15a2.5,2.5,0,0,0-5,0V75.78A2.5,2.5,0,0,0,33.71,78.28Z"/>
<path d="M66.29,78.28a2.49,2.49,0,0,0,2.5-2.5V37.15a2.5,2.5,0,0,0-5,0V75.78A2.49,2.49,0,0,0,66.29,78.28Z"/>
</svg>
</template>

2
client/src/styles/_variables.scss
View File

@ -48,4 +48,4 @@ $brown: #EB9E77;
//modal stuff
$modal-lateral-padding: 34px;
$modal-input-width: 500px;
$modal-input-width: 560px;