From 4260147f2de01c14b691298b86c8994e5387708d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 11 Sep 2018 10:51:09 +0200
Subject: [PATCH] Add visibility button

---
 client/src/components/ContentBlock.vue  | 30 ++++++++++++++++++++++---
 client/src/components/icons/EyeIcon.vue |  8 +++++++
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/icons/EyeIcon.vue

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 1c5f242f..82b520de 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -1,9 +1,14 @@
 <template>
-  <div>
+  <div class="content-block__container">
     <add-content-block-button></add-content-block-button>
 
     <div class="content-block" :class="specialClass">
-      <h4>{{contentBlock.title}}</h4>
+      <div class="content-block__visibility-button">
+        <eye-icon class="content-block__visibility-icon"></eye-icon>
+      </div>
+
+
+      <h4 class="content-block__title">{{contentBlock.title}}</h4>
       <h4>{{contentBlock.id}}</h4>
 
       <component v-for="component in contentBlock.contents"
@@ -24,6 +29,7 @@
   import ImageBlock from '@/components/content-blocks/ImageBlock.vue';
   import StudentEntry from '@/components/content-blocks/StudentEntry.vue';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
+  import EyeIcon from '@/components/icons/EyeIcon';
 
   export default {
     props: ['contentBlock'],
@@ -34,7 +40,8 @@
       'student_entry': StudentEntry,
       'image_block': ImageBlock,
       Task,
-      AddContentBlockButton
+      AddContentBlockButton,
+      EyeIcon
     },
 
     computed: {
@@ -50,6 +57,23 @@
 
   .content-block {
     margin-bottom: 2.5em;
+    position: relative;
+
+    &__title {
+      line-height: 1.5;
+    }
+
+    &__visibility-button {
+      position: absolute;
+      left: -70px;
+      top: -4px;
+    }
+
+    &__visibility-icon {
+      width: 40px;
+      height: 40px;
+      fill: $color-grey;
+    }
 
     &--yellow {
       background-color: rgba($color-accent-1, 0.15);
diff --git a/client/src/components/icons/EyeIcon.vue b/client/src/components/icons/EyeIcon.vue
new file mode 100644
index 00000000..20d557a6
--- /dev/null
+++ b/client/src/components/icons/EyeIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M98.31,45.1a61.77,61.77,0,0,0-21-17.19A60.61,60.61,0,0,0,50.78,21.5H49.23a60.59,60.59,0,0,0-26.55,6.41,61.77,61.77,0,0,0-21,17.19,8,8,0,0,0,0,9.81,61.75,61.75,0,0,0,21,17.19A60.55,60.55,0,0,0,49.22,78.5h1.55a60.58,60.58,0,0,0,26.55-6.41,61.82,61.82,0,0,0,21-17.19A8,8,0,0,0,98.31,45.1ZM78.51,50a28.54,28.54,0,0,0-8.16-19.94c1.64.64,3.25,1.35,4.83,2.14A57,57,0,0,1,94.53,48a3.19,3.19,0,0,1,0,3.92A57,57,0,0,1,75.18,67.81c-1.56.78-3.18,1.49-4.82,2.13A28.56,28.56,0,0,0,78.51,50Zm-4.79,0A23.72,23.72,0,1,1,50,26.28,23.74,23.74,0,0,1,73.72,50ZM29.65,69.94c-1.64-.64-3.26-1.35-4.83-2.14A57,57,0,0,1,5.47,52a3.18,3.18,0,0,1,0-3.92A57,57,0,0,1,24.82,32.19c1.57-.78,3.19-1.5,4.83-2.14a28.46,28.46,0,0,0,0,39.88Z"/>
+    <path
+      d="M50,39.31A10.69,10.69,0,1,0,60.69,50,10.7,10.7,0,0,0,50,39.31ZM55.9,50A5.9,5.9,0,1,1,50,44.1,5.9,5.9,0,0,1,55.9,50Z"/>
+  </svg>
+</template>