From 97006dead52fb65c7d1f044caf169774bf473885 Mon Sep 17 00:00:00 2001
From: Unknown <donramonloco+github@gmail.com>
Date: Mon, 3 Sep 2018 18:56:13 +0200
Subject: [PATCH] Visually add "Add Content" button

---
 client/src/components/AddContent.vue        | 30 +++++++++++++++++++++
 client/src/components/ContentBlock.vue      | 18 ++++++++-----
 client/src/components/images/AddPointer.vue |  7 +++--
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/AddContent.vue

diff --git a/client/src/components/AddContent.vue b/client/src/components/AddContent.vue
new file mode 100644
index 00000000..453082a4
--- /dev/null
+++ b/client/src/components/AddContent.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="add-content">
+    <add-pointer class="add-content__icon"></add-pointer>
+  </div>
+</template>
+
+<script>
+  import AddPointer from '@/components/images/AddPointer';
+
+  export default {
+    components: {
+      AddPointer
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .add-content {
+    display: flex;
+    justify-content: flex-end;
+
+    &__icon {
+      height: 57px;
+      margin-right: -85px;
+      fill: $color-grey;
+    }
+  }
+</style>
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 99ffdfd1..7faba820 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -1,11 +1,16 @@
 <template>
-  <div class="content-block" :class="specialClass">
-    <h4>{{contentBlock.title}}</h4>
+  <div>
+    <add-content></add-content>
 
-    <component v-for="component in contentBlock.contents" :key="component.id" :is="component.type"
-               v-bind="component"></component>
+    <div class="content-block" :class="specialClass">
+      <h4>{{contentBlock.title}}</h4>
 
+      <component v-for="component in contentBlock.contents" :key="component.id" :is="component.type"
+                 v-bind="component"></component>
+
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -14,17 +19,18 @@
   import Task from '@/components/content-blocks/Task.vue';
   import ImageBlock from '@/components/content-blocks/ImageBlock.vue';
   import StudentEntry from '@/components/content-blocks/StudentEntry.vue';
+  import AddContent from '@/components/AddContent';
 
   export default {
     props: ['contentBlock'],
 
     components: {
       'text_block': TextBlock,
-      // todo: rename in backend
       'basic_knowledge': BasicKnowledgeWidget,
       'student_entry': StudentEntry,
       'image_block': ImageBlock,
-      Task
+      Task,
+      AddContent
     },
 
     computed: {
diff --git a/client/src/components/images/AddPointer.vue b/client/src/components/images/AddPointer.vue
index 2027ba3d..a241a274 100644
--- a/client/src/components/images/AddPointer.vue
+++ b/client/src/components/images/AddPointer.vue
@@ -1,8 +1,7 @@
 <template>
-  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>
-    add-pointer</title>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
-      d="M70.26,20.26A29.77,29.77,0,0,0,40.59,48H2a2,2,0,1,0,0,4h38.6A29.74,29.74,0,1,0,70.26,20.26Zm0,55.5A25.76,25.76,0,1,1,96,50,25.78,25.78,0,0,1,70.26,75.76Z"/>
-    <path d="M82.24,48h-10V38a2,2,0,0,0-4,0V48h-10a2,2,0,1,0,0,4h10V62a2,2,0,0,0,4,0V52h10a2,2,0,1,0,0-4Z"/>
+      d="M70.26 20.26A29.77 29.77 0 0 0 40.59 48H2a2 2 0 1 0 0 4h38.6a29.74 29.74 0 1 0 29.66-31.74zm0 55.5A25.76 25.76 0 1 1 96 50a25.78 25.78 0 0 1-25.74 25.76z"/>
+    <path d="M82.24 48h-10V38a2 2 0 0 0-4 0v10h-10a2 2 0 1 0 0 4h10v10a2 2 0 0 0 4 0V52h10a2 2 0 1 0 0-4z"/>
   </svg>
 </template>