Merge pull request #6035 from G-Chubinidze/gc_SCI_9014

Add thumbnail asset preview to list view assets [SCI-9014]

app/assets/stylesheets/shared/assets.scss

@@ -248,6 +248,23 @@
     @include font-main;
   }
 
+  .attachment-image-tooltip {
+    bottom: 90px;
+    display: none;
+    position: relative;
+    right: 110px;
+    z-index: 9999;
+
+    img {
+      height: 150px;
+      width: 150px;
+    }
+  }
+
+  .file-preview-link:hover + .attachment-image-tooltip {
+    display: block;
+  }
+
   .file-name {
     @include font-main;
     color: $brand-primary;

app/javascript/vue/shared/content/attachments/list.vue

@@ -11,12 +11,14 @@
        :data-gallery-view-id="parentId"
        :data-preview-url="attachment.attributes.urls.preview"
     >
-      <span data-toggle="tooltip"
-           data-placement="bottom"
-           :title="`${ attachment.attributes.file_name }`">
+      <span class="attachment-name" data-toggle="tooltip"
+           data-placement="bottom">
         {{ attachment.attributes.file_name }}
       </span>
     </a>
+    <div class="attachment-image-tooltip" >
+      <img :src="this.imageLoadError ? attachment.attributes.urls.blob : attachment.attributes.medium_preview" @error="handleImageError"/>
+    </div>
     <span v-if="attachment.isNewUpload" class="attachment-label-new">
       {{ i18n.t('attachments.new.description') }}
     </span>
@@ -53,7 +55,17 @@
       parentId: {
         type: Number,
         required: true
-      }
+      },
     },
+    data() {
+      return {
+        imageLoadError: false
+      };
+    },
+    methods: {
+      handleImageError() {
+        this.imageLoadError = true;
+      }
+    }
   }
 </script>