Add new bookmark component and some icons

client/src/components/content-blocks/ContentComponent.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="content-component" :class="{'content-component--bookmarked': bookmarked}">
-    {{component.id}}
+    <bookmark-actions @bookmark="bookmarkContent(component.id, !bookmarked)" :bookmarked="bookmarked"></bookmark-actions>
-    <a @click="bookmarkContent(component.id, !bookmarked)">Bookmark</a>
-    <div>
-      Bookmarked: {{bookmarked}}
-    </div>
     <component
       :is="component.type"
       v-bind="component">
@@ -28,6 +24,7 @@
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Survey from '@/components/content-blocks/SurveyBlock';
   import Solution from '@/components/content-blocks/Solution';
+  import BookmarkActions from '@/components/notes/BookmarkActions';
 
   import UPDATE_CONTENT_BOOKMARK from '@/graphql/gql/mutations/updateContentBookmark.gql';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
@@ -52,6 +49,7 @@
       Survey,
       Solution,
       Assignment,
+      BookmarkActions
     },
 
     computed: {
@@ -84,9 +82,12 @@
 </script>
 
 <style lang="scss" scoped>
+  @import "@/styles/_variables.scss";
+
   .content-component {
+    position: relative;
     &--bookmarked {
-      background-color: yellow;
+
     }
   }
 </style>

client/src/components/icons/AddNoteIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg class="add-note-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M81.5,88.39746H18.7627a2.49981,2.49981,0,0,1-2.5-2.5V35.35352L1.72559,20.71191A2.50054,2.50054,0,0,1,3.5,16.4502h78a2.49981,2.49981,0,0,1,2.5,2.5V85.89746A2.49981,2.49981,0,0,1,81.5,88.39746Zm-60.2373-5H79V21.4502H9.50488L20.53711,32.56152a2.5013,2.5013,0,0,1,.72559,1.76172Z"/>
+    <path d="M64.9209,55.08447H36.18457a2.5,2.5,0,0,1,0-5H64.9209a2.5,2.5,0,0,1,0,5Z"/>
+    <path d="M48.26318,66.95313V38.21582a2.5,2.5,0,0,1,5,0v28.7373a2.5,2.5,0,0,1-5,0Z"/>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+  .add-note-icon {
+    width: 29px;
+    height: 25px;
+    margin-left: -2px;
+  }
+</style>

client/src/components/icons/BookmarkIcon.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="bookmark-icon">
+    <g :class="{'bookmark-icon--bookmarked': bookmarked}">
+      <path class="bookmark-icon__background"
+            d="M51,67.32872a5.06849,5.06849,0,0,1,2.98875.97385L84,90V11H18V90L48.01333,68.30149A5.064,5.064,0,0,1,51,67.32872Z"
+            />
+      <path id="bookmark-icon__outline"
+            d="M84.5,93.07715a2.49662,2.49662,0,0,1-1.43359-.45215L51,70.17871,18.93359,92.625A2.49964,2.49964,0,0,1,15,90.57715V11.42285a2.49981,2.49981,0,0,1,2.5-2.5h67a2.49981,2.49981,0,0,1,2.5,2.5v79.1543a2.49947,2.49947,0,0,1-2.5,2.5ZM51,65.15527a4.8673,4.8673,0,0,1,2.80762.88574L82,85.77539V13.92285H20V85.77539L48.19434,66.04A4.863,4.863,0,0,1,51,65.15527Z"/>
+    </g>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['bookmarked']
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .bookmark-icon {
+    width: 24px;
+    height: 28px;
+
+    &__background {
+      fill: white;
+    }
+
+    $parent: &;
+
+    &--bookmarked {
+      #{$parent}__background {
+        fill: $color-accent-1;
+      }
+    }
+  }
+</style>

client/src/components/icons/NoteIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg class="note-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M81.5,88.39746H18.7627a2.49981,2.49981,0,0,1-2.5-2.5V35.35352L1.72559,20.71191A2.50054,2.50054,0,0,1,3.5,16.4502h78a2.49981,2.49981,0,0,1,2.5,2.5V85.89746A2.49981,2.49981,0,0,1,81.5,88.39746Zm-60.2373-5H79V21.4502H9.50488L20.53711,32.56152a2.5013,2.5013,0,0,1,.72559,1.76172Z"/>
+    <path d="M61.9209,40.92676H39.18457a2.5,2.5,0,0,1,0-5H61.9209a2.5,2.5,0,0,1,0,5Z"/>
+    <path d="M62.13184,55.24219H39.39453a2.5,2.5,0,0,1,0-5h22.7373a2.5,2.5,0,0,1,0,5Z"/>
+    <path d="M62.13184,69.55859H39.39453a2.5,2.5,0,0,1,0-5h22.7373a2.5,2.5,0,0,1,0,5Z"/>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+  .note-icon {
+    width: 29px;
+    height: 25px;
+    margin-left: -2px;
+  }
+</style>

client/src/components/notes/BookmarkActions.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="bookmark-actions">
+    <a class="bookmark-actions__action" @click="$emit('bookmark')"
+       :class="{'bookmark-actions__action--bookmarked': bookmarked}">
+      <bookmark-icon :bookmarked="bookmarked"></bookmark-icon>
+    </a>
+    <a class="bookmark-actions__action">
+      <add-note-icon></add-note-icon>
+      <note-icon v-if="false"></note-icon>
+    </a>
+  </div>
+</template>
+
+<script>
+  import BookmarkIcon from '@/components/icons/BookmarkIcon';
+  import AddNoteIcon from '@/components/icons/AddNoteIcon';
+  import NoteIcon from '@/components/icons/NoteIcon';
+
+  export default {
+    props: ['bookmarked'],
+    components: {
+      BookmarkIcon,
+      AddNoteIcon,
+      NoteIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .bookmark-actions {
+    height: 100%;
+    min-height: 60px;
+
+    padding: 0 2*$large-spacing;
+    position: absolute;
+    right: -5*$large-spacing;
+
+    display: flex;
+    flex-direction: column;
+
+    &__action {
+      opacity: 0;
+      transition: opacity 0.3s;
+
+      &--bookmarked {
+        opacity: 1;
+      }
+    }
+
+    $parent: &;
+
+    &:hover {
+      #{$parent}__action {
+        opacity: 1;
+      }
+    }
+
+  }
+
+</style>