Rethink modal handling

client/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{'no-scroll': showModal}">
-    <modal v-if="showModal"></modal>
+    <new-content-block v-if="showModal"></new-content-block>
     <component :is="layout"></component>
   </div>
 </template>
@@ -9,6 +9,7 @@
   import DefaultLayout from '@/layouts/DefaultLayout';
   import SimpleLayout from '@/layouts/SimpleLayout';
   import Modal from '@/components/Modal';
+  import NewContentBlock from '@/components/NewContentBlock';
 
   export default {
     name: 'App',
@@ -16,7 +17,8 @@
     components: {
       DefaultLayout,
       SimpleLayout,
-      Modal
+      Modal,
+      NewContentBlock
     },
 
     computed: {

client/src/components/AddContentElement.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Add Block</h1>
+  </div>
+</template>

client/src/components/Modal.vue

@@ -2,29 +2,23 @@
   <div class="modal__backdrop">
     <div class="modal">
       <div class="modal__header">
-        <content-block-title-input></content-block-title-input>
+        <slot name="header"></slot>
       </div>
       <div class="modal__body">
-        <content-block-chooser-widget></content-block-chooser-widget>
+        <slot></slot>
       </div>
       <div class="modal__footer">
-        <a class="button button--active">Speichern</a>
-        <a class="button" v-on:click="hideModal">Abbrechen</a>
+        <slot name="footer">
+          <a class="button button--active">Speichern</a>
+          <a class="button" v-on:click="hideModal">Abbrechen</a>
+        </slot>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import ContentBlockChooserWidget from '@/components/ContentBlockChooserWidget';
-  import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
-
   export default {
-    components: {
-      ContentBlockChooserWidget,
-      ContentBlockTitleInput
-    },
-
     methods: {
       hideModal() {
         this.$store.dispatch('hideModal');
@@ -47,6 +41,7 @@
     border: 1px solid $color-lightgrey;
     display: grid;
     grid-template-rows: auto 1fr 65px;
+    grid-template-areas: "header" "body" "footer";
 
     &__backdrop {
       display: grid;
@@ -60,15 +55,18 @@
     }
 
     &__header {
+      grid-area: header;
       padding: 10px 30px;
       border-bottom: 1px solid $color-lightgrey;
     }
 
     &__body {
+      grid-area: body;
       padding: 10px 34px;
     }
 
     &__footer {
+      grid-area: footer;
       border-top: 1px solid $color-lightgrey;
       padding: 16px 30px;
     }

client/src/components/NewContentBlock.vue

@@ -0,0 +1,34 @@
+<template>
+  <modal>
+    <content-block-title-input slot="header"></content-block-title-input>
+    <add-content-element></add-content-element>
+    <content-block-chooser-widget></content-block-chooser-widget>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import ContentBlockChooserWidget from '@/components/ContentBlockChooserWidget';
+  import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
+  import AddContentElement from '@/components/AddContentElement';
+
+  export default {
+    components: {
+      Modal,
+      ContentBlockChooserWidget,
+      ContentBlockTitleInput,
+      AddContentElement
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .new-content-block {
+    &__title {
+      padding: 10px 30px;
+      border-bottom: 1px solid $color-lightgrey;
+    }
+  }
+</style>