Feature: Add buttons for pin-edit

pinry-spa/src/components/EditorUI.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="editor">
+    <div class="editor-buttons">
+      <span class="icon-container">
+          <b-icon
+            type="is-light"
+            icon="heart"
+            custom-size="mdi-24px">
+         </b-icon>
+      </span>
+      <span class="icon-container">
+         <b-icon
+           type="is-light"
+           icon="delete"
+           custom-size="mdi-24px">
+         </b-icon>
+      </span>
+      <span class="icon-container">
+       <b-icon
+         type="is-light"
+         icon="pencil"
+         custom-size="mdi-24px">
+       </b-icon>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Editor',
+  props: {
+    show: {
+      default: false,
+      type: Boolean,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@mixin border-radius {
+  border-radius: 3px;
+}
+
+.editor-buttons {
+  padding: 3px 1px 3px 3px;
+  background-color: rgba(225, 225, 225, 0.6);
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  float: right;
+  cursor: pointer;
+
+  @include border-radius;
+  .icon-container {
+    @include border-radius;
+    padding: 5px 2px 2px 2px;
+    background-color: rgba(0, 0, 0, 0.8);
+    margin-right: 2px;
+    span {
+      opacity: 0.9;
+    }
+  }
+}
+</style>

pinry-spa/src/components/Pins.vue

@@ -17,12 +17,17 @@
               <div class="grid-sizer"></div>
               <div class="gutter-sizer"></div>
               <div class="pin-card grid-item">
-                <img :src="item.url"
+                <div>
+                  <EditorUI v-show="shouldShowEdit(item.id)"></EditorUI>
+                  <img :src="item.url"
+                     @mouseenter="showEditButtons(item.id)"
+                     @mouseleave="hideEditButtons(item.id)"
                      @load="onPinImageLoaded(item.id)"
                      @click="openPreview(item)"
                      alt="item.description"
                      :style="item.style"
                      class="pin-preview-image">
+                </div>
                 <div class="pin-footer">
                   <div class="description" v-show="item.description"><p>{{ item.description }}</p>
                   </div>
@@ -71,6 +76,7 @@ import loadingSpinner from './loadingSpinner.vue';
 import noMore from './noMore.vue';
 import scroll from './utils/scroll';
 import bus from './utils/bus';
+import EditorUI from './EditorUI.vue';
 
 function createImageItem(pin) {
   const image = {};
@@ -95,6 +101,7 @@ function createImageItem(pin) {
 
 function initialData() {
   return {
+    currentEditId: null,
     blocks: [],
     blocksMap: {},
     status: {
@@ -110,6 +117,7 @@ export default {
   components: {
     loadingSpinner,
     noMore,
+    EditorUI,
   },
   data() {
     return initialData();
@@ -126,6 +134,15 @@ export default {
     },
   },
   methods: {
+    shouldShowEdit(id) {
+      return this.currentEditId === id;
+    },
+    showEditButtons(id) {
+      this.currentEditId = id;
+    },
+    hideEditButtons() {
+      this.currentEditId = null;
+    },
     onPinImageLoaded(itemId) {
       this.blocksMap[itemId].class = {
         'image-loaded': true,