From e0148cca318f91a21231c9b72ac875e2a20dc4c6 Mon Sep 17 00:00:00 2001
From: ajugo <andrej.jugovic7@gmail.com>
Date: Thu, 12 Oct 2023 15:19:51 +0200
Subject: [PATCH] Fix image preview and status icon for items card [SCI-9480]
 (#6413)

---
 .../RepositoryAssetValue.vue                  |  2 +-
 .../RepositoryStatusValue.vue                 | 12 +++++--
 .../repository_values/TooltipPreview.vue      | 32 +++++++++++++++++--
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
index 9fc9ee453..b5bc0a411 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
+++ b/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 }}
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
index a3bb232e0..5ae5bc1af 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
+++ b/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>
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/TooltipPreview.vue b/app/javascript/vue/repository_item_sidebar/repository_values/TooltipPreview.vue
index d90a78643..55d170dd3 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/TooltipPreview.vue
+++ b/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>