From 52d6d2019402164ce38929391d33670d5d7e2904 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 5 Sep 2018 16:02:57 +0200
Subject: [PATCH] Add content add widget in modal

---
 .../src/components/AddContentBlockWidget.vue  | 96 +++++++++++++++++++
 client/src/components/Modal.vue               | 12 ++-
 client/src/components/images/DocumentIcon.vue | 11 +++
 client/src/components/images/ImageIcon.vue    |  8 ++
 client/src/components/images/LinkIcon.vue     |  8 ++
 .../components/images/SpeechBubbleIcon.vue    |  7 ++
 client/src/components/images/TextIcon.vue     |  8 ++
 client/src/components/images/VideoIcon.vue    |  6 ++
 8 files changed, 154 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/AddContentBlockWidget.vue
 create mode 100644 client/src/components/images/DocumentIcon.vue
 create mode 100644 client/src/components/images/ImageIcon.vue
 create mode 100644 client/src/components/images/LinkIcon.vue
 create mode 100644 client/src/components/images/SpeechBubbleIcon.vue
 create mode 100644 client/src/components/images/TextIcon.vue
 create mode 100644 client/src/components/images/VideoIcon.vue

diff --git a/client/src/components/AddContentBlockWidget.vue b/client/src/components/AddContentBlockWidget.vue
new file mode 100644
index 00000000..203cacf1
--- /dev/null
+++ b/client/src/components/AddContentBlockWidget.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="add-content-block-widget">
+    <div class="add-content-block-widget__link">
+      <link-icon class="add-content-block-widget__link-icon"></link-icon>
+      <div class="add-content-block-widget__link-title">Link</div>
+    </div>
+    <div class="add-content-block-widget__link">
+      <video-icon class="add-content-block-widget__link-icon"></video-icon>
+      <div class="add-content-block-widget__link-title">Video</div>
+    </div>
+    <div class="add-content-block-widget__link">
+      <image-icon class="add-content-block-widget__link-icon"></image-icon>
+      <div class="add-content-block-widget__link-title">Bild</div>
+    </div>
+    <div class="add-content-block-widget__link">
+      <text-icon class="add-content-block-widget__link-icon"></text-icon>
+      <div class="add-content-block-widget__link-title">Text</div>
+    </div>
+    <div class="add-content-block-widget__link">
+      <speech-bubble-icon class="add-content-block-widget__link-icon"></speech-bubble-icon>
+      <div class="add-content-block-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
+    </div>
+    <div class="add-content-block-widget__link">
+      <document-icon class="add-content-block-widget__link-icon"></document-icon>
+      <div class="add-content-block-widget__link-title">Dokument</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LinkIcon from '@/components/images/LinkIcon';
+  import VideoIcon from '@/components/images/VideoIcon';
+  import ImageIcon from '@/components/images/ImageIcon';
+  import TextIcon from '@/components/images/TextIcon';
+  import SpeechBubbleIcon from '@/components/images/SpeechBubbleIcon';
+  import DocumentIcon from '@/components/images/DocumentIcon';
+
+  export default {
+    components: {
+      LinkIcon,
+      VideoIcon,
+      ImageIcon,
+      TextIcon,
+      SpeechBubbleIcon,
+      DocumentIcon,
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .add-content-block-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;
+
+    &::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>
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 29597d4e..8667fea6 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="modal__backdrop">
     <div class="modal">
-      <div class="modal__body"></div>
+      <div class="modal__body">
+        <add-content-block-widget></add-content-block-widget>
+      </div>
       <div class="modal__footer">
         <a class="button button--active">Speichern</a>
         <a class="button" v-on:click="hideModal">Abbrechen</a>
@@ -11,7 +13,13 @@
 </template>
 
 <script>
+  import AddContentBlockWidget from '@/components/AddContentBlockWidget';
+
   export default {
+    components: {
+      AddContentBlockWidget
+    },
+
     methods: {
       hideModal() {
         this.$store.dispatch('hideModal');
@@ -46,7 +54,7 @@
       z-index: 90;
     }
 
-    &__content {
+    &__body {
       padding: 10px 34px;
     }
 
diff --git a/client/src/components/images/DocumentIcon.vue b/client/src/components/images/DocumentIcon.vue
new file mode 100644
index 00000000..8298d050
--- /dev/null
+++ b/client/src/components/images/DocumentIcon.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <title>document</title>
+    <path
+      d="M22.64,5.3a8.38,8.38,0,0,0-8.37,8.37V86.33a8.38,8.38,0,0,0,8.37,8.37H77.36a8.38,8.38,0,0,0,8.37-8.37v-57L61.39,5.3ZM79.17,88.08a2.74,2.74,0,0,1-2.11.94H22.34a3,3,0,0,1-3-3V13.37a3,3,0,0,1,3-3H54V28.32a7.78,7.78,0,0,0,7.77,7.77H79.75V85.73A2.85,2.85,0,0,1,79.17,88.08ZM62.11,31a2.34,2.34,0,0,1-2.39-2.39V11.15L79.58,31Z"/>
+    <path
+      d="M61.81,36.1A7.78,7.78,0,0,1,54,28.32V10.38H22.34a3,3,0,0,0-3,3V86a3,3,0,0,0,3,3H77.06a2.74,2.74,0,0,0,2.11-.94,2.85,2.85,0,0,0,.59-2.35V36.1Z"
+      style="fill:#fff"/>
+    <path d="M59.72,28.62A2.34,2.34,0,0,0,62.11,31H79.58L59.72,11.15Z" style="fill:#fff"/>
+  </svg>
+</template>
diff --git a/client/src/components/images/ImageIcon.vue b/client/src/components/images/ImageIcon.vue
new file mode 100644
index 00000000..7867dbdb
--- /dev/null
+++ b/client/src/components/images/ImageIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>image</title>
+    <path
+      d="M93,14.2H7a2,2,0,0,0-2,2v67.5a2,2,0,0,0,2,2H93a2,2,0,0,0,2-2V16.25A2,2,0,0,0,93,14.2ZM42.27,54.37,57.73,69.83a2.09,2.09,0,0,0,2.89,0,2,2,0,0,0,0-2.89l-7-7L67,45.24,90,68.38a2,2,0,0,0,.87.46V81.7H12.18ZM65.36,41,50.7,57l-6.9-6.9A2.05,2.05,0,0,0,41,50L9.09,79V18.3H90.91V63.47L68.26,40.82a2,2,0,0,0-1.47-.53A2.06,2.06,0,0,0,65.36,41Z"/>
+    <path
+      d="M30.06,31.08a9.05,9.05,0,1,0,9.05,9.06A9.06,9.06,0,0,0,30.06,31.08Zm5,9.05a5,5,0,1,1-5-5A5,5,0,0,1,35,40.13Z"/>
+  </svg>
+</template>
diff --git a/client/src/components/images/LinkIcon.vue b/client/src/components/images/LinkIcon.vue
new file mode 100644
index 00000000..512278a5
--- /dev/null
+++ b/client/src/components/images/LinkIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>link</title>
+    <path
+      d="M85.13,14.88a19.12,19.12,0,0,0-27,0l-9.61,9.61a2.68,2.68,0,0,0,3.79,3.8l9.61-9.61A13.73,13.73,0,0,1,81.33,38.08L63.4,56A13.75,13.75,0,0,1,44,56a2.68,2.68,0,0,0-3.79,3.8,19.12,19.12,0,0,0,27,0L85.13,41.88a19.14,19.14,0,0,0,0-27Z"/>
+    <path
+      d="M46.61,72.81l-8.53,8.53A13.73,13.73,0,0,1,18.67,61.92L35.55,45A13.78,13.78,0,0,1,55,45a2.75,2.75,0,0,0,3.79,0,2.68,2.68,0,0,0,0-3.79,19.12,19.12,0,0,0-27,0L14.87,58.13a19.09,19.09,0,0,0,27,27L50.4,76.6a2.68,2.68,0,0,0-3.79-3.79Z"/>
+  </svg>
+</template>
diff --git a/client/src/components/images/SpeechBubbleIcon.vue b/client/src/components/images/SpeechBubbleIcon.vue
new file mode 100644
index 00000000..cd46beeb
--- /dev/null
+++ b/client/src/components/images/SpeechBubbleIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>q-a</title>
+    <path
+      d="M88.09,10h-38A12,12,0,0,0,38,21.88V33.11H12a12.07,12.07,0,0,0-12,12v22.4A12,12,0,0,0,12,79.39H47l10.87,10a2.5,2.5,0,0,0,1.67.67,2.38,2.38,0,0,0,1-.2A2.44,2.44,0,0,0,62,87.58V56.25H88.09a11.92,11.92,0,0,0,11.91-12V21.88A11.87,11.87,0,0,0,88.09,10ZM57,82l-7.41-6.83a2.49,2.49,0,0,0-1.65-.7H12A7,7,0,0,1,5,67.51V45.11a7.1,7.1,0,0,1,7.09-7H38V64.35a2.54,2.54,0,0,0,4.23,1.83l9.1-8.29L52,57.3c.49-.45,1-.92,1.21-1.05s.71,0,1.16,0H57ZM95,44.28a7,7,0,0,1-6.95,7H54.47c-3-.06-3.55.27-5.83,2.37-.19.17-.45.37-.68.58l-5,4.5V21.88a7.06,7.06,0,0,1,7.13-7h38a6.91,6.91,0,0,1,6.95,7Z"
+      style="fill-rule:evenodd"/>
+  </svg>
+</template>
diff --git a/client/src/components/images/TextIcon.vue b/client/src/components/images/TextIcon.vue
new file mode 100644
index 00000000..1e7f53d4
--- /dev/null
+++ b/client/src/components/images/TextIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>text</title>
+    <path
+      d="M94.86,40.16a2.5,2.5,0,0,0-2.5,2.5v6.6a19.35,19.35,0,0,0-16.08-9.1c-11,0-19.92,9.95-19.92,22.17S65.29,84.5,76.28,84.5a19.35,19.35,0,0,0,16.08-9.1V82a2.5,2.5,0,0,0,5,0V42.66A2.5,2.5,0,0,0,94.86,40.16ZM76.28,79.5c-8.23,0-14.92-7.7-14.92-17.17s6.69-17.17,14.92-17.17S91.2,52.86,91.2,62.33,84.51,79.5,76.28,79.5Z"/>
+    <path
+      d="M30.6,17.15a2.5,2.5,0,0,0-4.7,0l-23.11,64a2.5,2.5,0,1,0,4.7,1.7l7.79-21.58H41.21L49,82.85a2.5,2.5,0,0,0,4.7-1.7ZM17.09,56.27,28.25,25.36,39.41,56.27Z"/>
+  </svg>
+</template>
diff --git a/client/src/components/images/VideoIcon.vue b/client/src/components/images/VideoIcon.vue
new file mode 100644
index 00000000..8b362d65
--- /dev/null
+++ b/client/src/components/images/VideoIcon.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>video</title>
+    <path
+      d="M70.79,83.87H29.21C7.12,83.87,2.8,74.31,2.8,57.79V42.21c0-8.62,0-14.84,3.63-19.45s10.31-6.63,22.78-6.63H70.79c12.18,0,18.67,1.8,22.39,6.22h0c3.74,4.45,4,10.75,4,19.86V57.79c0,10.54-1.76,16.72-5.89,20.67S81.35,83.87,70.79,83.87ZM29.21,20.53c-10.81,0-16.59,1.48-19.33,4.95s-2.68,9-2.68,16.73V57.79c0,15,3.18,21.68,22,21.68H70.79c9.31,0,14.37-1.21,17.48-4.19S92.8,67,92.8,57.79V42.21c0-8.14-.21-13.72-3-17s-8.43-4.65-19-4.65Zm13.34,44a5.1,5.1,0,0,1-5.1-5.1V39.77a5.1,5.1,0,0,1,7.45-4.53L63.79,45a5.1,5.1,0,0,1,0,9.05L44.92,64A5.13,5.13,0,0,1,42.55,64.55Zm0-25.48a.7.7,0,0,0-.7.7V59.45a.7.7,0,0,0,1,.62L61.76,50.2a.7.7,0,0,0,0-1.25L42.88,39.15A.7.7,0,0,0,42.55,39.07Z"/>
+  </svg>
+</template>