Extend the content block menu

client/src/components/ContentBlock.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="content-block__container">
     <div class="content-block" :class="specialClass">
-      <div class="content-block__visibility">
+      <div class="content-block__actions">
         <a @click="toggleVisibility()" class="content-block__visibility-button">
-          <eye-icon class="content-block__visibility-icon"></eye-icon>
+          <eye-icon class="content-block__action-icon"></eye-icon>
         </a>
-        <visibility-popover :show="showVisibility" :content-block="contentBlock"></visibility-popover>
+        <visibility-popover
+          :show="showVisibility"
+          :content-block="contentBlock"
+          class="content-block__visibility-menu"
+        ></visibility-popover>
+        <a><pen-icon class="content-block__action-icon"></pen-icon></a>
       </div>
 
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
@@ -36,6 +41,7 @@
   import AddContentBlockButton from '@/components/AddContentBlockButton';
   import VisibilityPopover from '@/components/VisibilityPopover';
   import EyeIcon from '@/components/icons/EyeIcon';
+  import PenIcon from '@/components/icons/PenIcon';
 
   export default {
     props: ['contentBlock'],
@@ -51,7 +57,8 @@
       Task,
       AddContentBlockButton,
       VisibilityPopover,
-      EyeIcon
+      EyeIcon,
+      PenIcon
     },
 
     computed: {
@@ -85,23 +92,25 @@
       line-height: 1.5;
     }
 
-    &__visibility {
+    &__actions {
       position: absolute;
       left: -70px;
       top: -4px;
+      display: grid;
     }
 
     &__visibility-button {
       cursor: pointer;
     }
 
-    &__visibility-icon {
+    &__action-icon {
       width: 40px;
       height: 40px;
       fill: $color-grey;
     }
 
     &__visibility-menu {
+      top: 40px;
     }
 
     &--yellow {

client/src/components/VisibilityPopover.vue

@@ -53,7 +53,7 @@
                 }
               })
             }
-          },
+          }
           // refetchQueries: [{
           //   query: MODULE_DETAILS_QUERY,
           //   variables: {

client/src/components/icons/PenIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M39,85.69l.12.12L86.83,38.12a7.42,7.42,0,0,0,0-10.49L72.38,13.17a7.42,7.42,0,0,0-10.49,0L14.19,60.87l.12.12L11,89ZM65.86,17.15a1.8,1.8,0,0,1,2.54,0L82.85,31.6a1.8,1.8,0,0,1,0,2.54l-3.69,3.69-17-17ZM58.2,24.81l17,17L39.13,77.86l-17-17ZM19.38,66.05,33.95,80.62l-16.53,2Z"/>
+  </svg>
+</template>