Merge pull request #5142 from ozer550/fix-double-wrapped-thumbnail-icon

Fix double wrapped thumbnail icon

Author: AlexVelezLl

contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue

@@ -16,7 +16,7 @@
           >
             <VCard
               ref="thumbnail"
-              class="thumbnail"
+              class="thumbnail-wrapper"
               data-test="loading"
             >
               <VLayout
@@ -355,7 +355,7 @@
     border: 2px solid var(--v-grey-darken2);
   }
 
-  .thumbnail {
+  .thumbnail-wrapper {
     padding: 28% 0;
     /* stylelint-disable-next-line custom-property-pattern */
     border-color: var(--v-greyBorder-base) !important;

contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue

@@ -6,11 +6,12 @@
       [kind]: compact,
       'icon-only': compact,
       nothumbnail: !showThumbnail && !compact,
+      'with-caption': showCaption,
     }"
     :style="{ 'max-width': maxWidth }"
   >
     <VLayout
-      v-if="kind && !printing && showKind && !compact"
+      v-if="showCaption"
       tag="figcaption"
       row
       align-center
@@ -21,12 +22,10 @@
         shrink
         class="px-1"
       >
-        <VIconWrapper
-          v-if="!compact"
-          dark
-          small
-          :aria-label="kindTitle"
-          v-text="icon"
+        <KIcon
+          :icon="icon"
+          class="icon-thumbnail"
+          :color="$themeTokens.textInverted"
         />
       </VFlex>
       <VFlex shrink>
@@ -46,51 +45,42 @@
       v-else-if="printing"
       class="printable-icon"
     >
-      <VIconWrapper
-        :color="$vuetify.theme[kind]"
-        capture-as-image
-      >
-        {{ icon }}
-      </VIconWrapper>
+      <KIcon
+        class="icon-thumbnail"
+        :icon="icon"
+      />
     </div>
 
-    <!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult -->
-    <svg
+    <div
       v-else-if="compact"
-      viewBox="0 0 24 24"
-      :aria-label="kindTitle"
-      class="thumbnail-image"
+      class="kicon-wrapper"
     >
       <KIcon
-        icon="infoOutline"
-        :x="+10"
-        :y="y + 20"
-        :style="{ fill: '#ffffff' }"
+        :icon="icon"
+        class="icon-thumbnail"
+        :color="$themeTokens.textInverted"
       />
-    </svg>
-    <svg
+    </div>
+    <div
       v-else
-      viewBox="0 0 40 40"
-      :aria-label="kindTitle"
-      class="nothumbnail-image"
-      :class="$isRTL ? 'rtl-image' : 'ltr-image'"
+      class="kicon-wrapper"
     >
       <KIcon
         icon="image"
-        :x="-3"
-        :y="y - 14"
-        :style="{ fill: '#999999' }"
+        class="icon-thumbnail"
+        :color="$themePalette.grey.v_400"
+        :style="{ width: '40%', height: '50px' }"
       />
-    </svg>
+    </div>
   </figure>
 
 </template>
 
 
 <script>
 
+  import { getContentKindIcon } from 'shared/utils/icons';
   import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
-  import { getContentKindIcon } from 'shared/vuetify/icons';
 
   export default {
     name: 'Thumbnail',
@@ -136,22 +126,15 @@
       },
     },
     computed: {
-      y() {
-        switch (this.kind) {
-          case 'exercise':
-            return 28;
-          case 'topic':
-          case 'audio':
-          default:
-            return 26;
-        }
-      },
       objectFit() {
         return this.kind ? 'cover' : 'contain';
       },
       icon() {
         return getContentKindIcon(this.kind, this.isEmpty);
       },
+      showCaption() {
+        return this.kind && !this.printing && this.showKind && !this.compact;
+      },
       thumbnailSrc() {
         return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
       },
@@ -176,16 +159,8 @@
 <style lang="scss" scoped>
 
   $caption-height: 25px;
-  $svg-scale: 1.25;
   $aspect-ratio: 9 / 16;
-
   $aspect-percentage: $aspect-ratio * 100%;
-  $half-aspect-percentage: $aspect-percentage / 2;
-
-  $svg-width: $aspect-percentage / $svg-scale;
-  $svg-top: $half-aspect-percentage - ($svg-width / 2);
-  $svg-width-quarter: $svg-width / 4;
-  $svg-left-position: 50% - $svg-width-quarter;
 
   .thumbnail {
     position: relative;
@@ -218,15 +193,11 @@
     line-height: 11px;
   }
 
-  .thumbnail-image,
-  .nothumbnail-image {
+  .thumbnail-image {
     position: absolute;
-    display: block;
-  }
-
-  img.thumbnail-image {
     bottom: 0;
     left: 0;
+    display: block;
     width: 100%;
     height: 100%;
     overflow: hidden; // Don't show alt text outside of img boundaries
@@ -236,61 +207,6 @@
     }
   }
 
-  svg.thumbnail-image {
-    top: 0;
-    left: $svg-left-position;
-    width: $svg-width-quarter;
-    margin: 0 auto;
-    overflow: visible;
-
-    .icon-only & {
-      top: 18%;
-      left: 21%;
-      display: block;
-      width: 55%;
-
-      [dir='rtl'] & {
-        left: -10px;
-      }
-    }
-
-    text {
-      font-size: 1.8em;
-      line-height: 1.8em;
-    }
-  }
-
-  svg.nothumbnail-image {
-    top: 0;
-    width: $svg-width;
-    margin: 0 auto;
-    overflow: visible;
-
-    &.ltr-image {
-      left: 36%;
-    }
-
-    &.rtl-image {
-      right: 66%;
-    }
-
-    .caption + & {
-      top: calc(#{$caption-height / 2} + #{$svg-top});
-    }
-
-    .icon-only & {
-      top: 18%;
-      left: 21%;
-      display: block;
-      width: 55%;
-    }
-
-    text {
-      font-size: 1em;
-      line-height: 1em;
-    }
-  }
-
   .printable-icon {
     width: 100%;
     height: 0;
@@ -302,4 +218,23 @@
     }
   }
 
+  .kicon-wrapper {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .icon-thumbnail {
+      top: 0;
+    }
+  }
+
+  .thumbnail.with-caption {
+    .kicon-wrapper {
+      height: calc(100% - #{$caption-height});
+    }
+  }
+
 </style>