Fix image preview and status icon for items card [SCI-9480] (#6413)

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue

@@ -4,7 +4,7 @@
       {{ colName }}
     </div>
     <div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
-      class="w-fit cursor-pointer text-sn-science-blue">
+      class="w-fit cursor-pointer text-sn-science-blue relative">
       <a @click="$emit('closeSidebar')" class="file-preview-link" :id="modalPreviewLinkId" data-no-turbolink="true"
         data-id="true" data-status="asset-present" :data-preview-url=this.preview_url :href=this.url>
         {{ file_name }}

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue

@@ -3,8 +3,8 @@
     <div class="font-inter text-sm font-semibold leading-5">
       {{ colName }}
     </div>
-    <div v-if="status && icon" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 ">
-      <i class="text-lg">{{ icon }}</i>
+    <div v-if="status && icon" class="flex flex-row items-center text-sn-dark-grey font-inter text-sm font-normal leading-5 ">
+      <div v-html="parseEmoji(icon)" class="flex mr-1.5 h-6"></div>
       {{ status }}
     </div>
     <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
@@ -14,6 +14,9 @@
 </template>
 
 <script>
+
+import twemoji from 'twemoji';
+
 export default {
   name: 'RepositoryStatusValue',
   data() {
@@ -33,6 +36,11 @@ export default {
     this.id = this.colVal.id
     this.icon = this.colVal.icon
     this.status = this.colVal.status
+  },
+  methods: {
+    parseEmoji(content) {
+      return twemoji.parse(content);
+    }
   }
 }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/TooltipPreview.vue

@@ -1,13 +1,20 @@
 <template>
-  <div class="absolute">
-    <img :src="this.medium_preview_url"
-      class="absolute bg-sn-light-grey text-sn-black w-[300px] h-[260px] rounded pointer-events-none flex shadow-lg shrink-0" />
+  <div>
+    <img :src="this.medium_preview_url" @load="onImageLoaded($event)"
+      class="absolute bg-sn-light-grey text-sn-black rounded pointer-events-none flex shadow-lg"
+      :class="{ hidden: !showImage, 'top-0 transform -translate-y-full': showTop }"/>
   </div>
 </template>
 
 <script>
 export default {
   name: 'TooltipPreview',
+  data() {
+    return {
+      showTop: false,
+      showImage: false,
+    }
+  },
   props: {
     tooltipId: String,
     url: String,
@@ -16,5 +23,24 @@ export default {
     icon_html: String || null,
     medium_preview_url: String || null,
   },
+  methods: {
+    onImageLoaded(event) {
+      this.showTop = !this.isInViewPort(event.target);
+      this.showImage = true;
+    },
+
+    isInViewPort(el) {
+      if (!el) return;
+
+      const height = el.naturalHeight;
+      const rect = el.parentElement.getBoundingClientRect();
+
+      return (
+        (rect.bottom + height) <=
+          (window.innerHeight || document.documentElement.clientHeight)
+      );
+}
+
+  }
 }
 </script>