Revert original Thumbnail.vue, add temporary ImageOnlyThumbnail.vue f…

…or new work to avoid regressions or collisions

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue

@@ -28,10 +28,10 @@
                     'py-3': isCompact,
                   }"
                 >
-                  <Thumbnail
+                  <ImageOnlyThumbnail
                     v-bind="thumbnailAttrs"
                     :isTopic="isTopic"
-                    :learningActivity="node.learning_activities"
+                    :learningActivities="node.learning_activities"
                     :compact="isCompact"
                     :isEmpty="node.total_count === 0"
                   />
@@ -118,10 +118,11 @@
                     </span>
                   </VListTileSubTitle>
                   <span v-if="!isCompact">
+
                     <ContentNodeLearningActivityIcon
-                      :isTopic="isTopic"
-                      :learningActivity="node.learning_activities"
-                      showEachActivityChip
+                      v-if="!isTopic"
+                      :learningActivities="node.learning_activities"
+                      showEachActivityIcon
                       includeText
                       small
                       chip
@@ -132,6 +133,7 @@
                         v-for="(key, index) in Object.keys(node.grade_levels)"
                         :key="index"
                         class="small-chip"
+                        :style="{ backgroundColor: $themeTokens.fineLine }"
                       >
                         {{ levels(key) }}
                       </span>
@@ -189,7 +191,7 @@
   import { ContentLevel, Categories } from '../../../shared/constants';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { RolesNames } from 'shared/leUtils/Roles';
-  import Thumbnail from 'shared/views/files/Thumbnail';
+  import ImageOnlyThumbnail from 'shared/views/files/ImageOnlyThumbnail';
   import IconButton from 'shared/views/IconButton';
   import ToggleText from 'shared/views/ToggleText';
   import ContextMenuCloak from 'shared/views/ContextMenuCloak';
@@ -204,7 +206,7 @@
     components: {
       DraggableHandle,
       ContextMenuCloak,
-      Thumbnail,
+      ImageOnlyThumbnail,
       IconButton,
       ContentNodeValidator,
       ContentNodeChangedIcon,
@@ -304,7 +306,11 @@
           this.isTopic ? this.$emit('topicChevronClick') : this.$emit('infoClick');
         }
       },
-      matchIdToString(ids) {
+      metadataListText(ids) {
+        // an array of values, rather than an internationalized list
+        // is created here (unlike in ResourcePanel), because the values
+        // are used to create one or more individual "chips" to display
+        // rather than a string of text
         return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
       },
       category(options) {
@@ -313,7 +319,7 @@
           .sort()
           .filter(k => ids.includes(Categories[k]));
         if (matches && matches.length > 0) {
-          return this.matchIdToString(matches);
+          return this.metadataListText(matches);
         }
         return null;
       },
@@ -458,7 +464,6 @@
     padding: 2px 4px;
     margin: 2px;
     font-size: 10px;
-    background-color: #dedede;
     border-radius: 4px;
   }
 

contentcuration/contentcuration/frontend/shared/i18n/index.js

@@ -3,6 +3,7 @@ import has from 'lodash/has';
 import { languageDirections, defaultLanguage } from 'kolibri-design-system/lib/utils/i18n';
 import importVueIntlLocaleData from 'kolibri-tools/lib/i18n/vue-intl-locale-data';
 import importIntlLocale from 'kolibri-tools/lib/i18n/intl-locale-data';
+import { shouldPolyfill } from '@formatjs/intl-listformat/should-polyfill'
 
 export {
   languageDirections,
@@ -146,6 +147,16 @@ class Translator {
   }
 }
 
+async function polyfill(currentLanguage) {
+  const unsupportedLocale = shouldPolyfill(currentLanguage)
+  // This locale is supported
+  if (!unsupportedLocale) {
+    return
+  }
+  // Load the polyfill 1st BEFORE loading data
+  await import('@formatjs/intl-listformat/polyfill-force')
+  await import(`@formatjs/intl-listformat/locale-data/${unsupportedLocale}`)
+}
 /**
  * Returns a Translator instance.
  * @param {string} nameSpace - The nameSpace of the messages for translation.

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

@@ -0,0 +1,239 @@
+<template>
+
+  <figure
+    :class="{
+      'thumbnail': !compact,
+      'icon-only': compact,
+      'nothumbnail': !showThumbnail && !compact,
+    }"
+    :style="{ 'max-width': maxWidth }"
+  >
+    <img
+      v-if="showThumbnail && !compact"
+      :src="thumbnailSrc"
+      :alt="$tr('thumbnail', { title: title })"
+      :style="{ objectFit }"
+      class="thumbnail-image"
+    >
+
+    <!-- If printing the default icon, need to set as printable icon -->
+    <div v-else-if="compact || printing">
+      <ContentNodeLearningActivityIcon
+        v-if="learningActivities && !isTopic"
+        :learningActivities="learningActivities"
+      />
+      <KIcon v-else-if="isTopic" :icon="kind" :aria-label="translateConstant(kind)"/>
+    </div>
+    <svg
+      v-else
+      viewBox="0 0 24 24"
+      :aria-label="title"
+      class="nothumbnail-image"
+      :class="$isRTL ? 'rtl-image' : 'ltr-image'"
+    >
+      <text
+        :x="-1"
+        :y="y - 3"
+        :fill="$vuetify.theme.greyBorder"
+        class="material-icons notranslate v-icon"
+      >
+        image
+      </text>
+    </svg>
+
+  </figure>
+
+</template>
+
+<script>
+
+  import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
+
+  export default {
+    name: 'ImageOnlyThumbnail',
+    components: {
+      ContentNodeLearningActivityIcon,
+    },
+    mixins: [constantsTranslationMixin, printingMixin],
+    props: {
+      src: {
+        type: String,
+        required: false,
+      },
+      encoding: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+      learningActivities: {
+        type: Object,
+        required: false,
+      },
+      kind: {
+        type: String,
+        required: false,
+      },
+      isTopic: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      compact: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      maxWidth: {
+        type: [Number, String],
+        default: 'none',
+      },
+    },
+    computed: {
+      y() {
+        switch (this.kind) {
+          case 'exercise':
+            return 28;
+          case 'topic':
+          case 'audio':
+          default:
+            return 26;
+        }
+      },
+      objectFit() {
+        return this.kind ? 'cover' : 'contain';
+      },
+      thumbnailSrc() {
+        return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
+      },
+      showThumbnail() {
+        return this.thumbnailSrc && !this.compact;
+      },
+    },
+    $trs: {
+      thumbnail: '{title} thumbnail',
+    },
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+  @caption-height: 25px;
+
+  .thumbnail {
+    position: relative;
+    /* stylelint-disable-next-line  */
+    padding-bottom: 100% * 9 / 16;
+    border-radius: 3px;
+
+    &.nothumbnail {
+      background-color: var(--v-greyBackground-base);
+    }
+  }
+
+  .icon-only {
+    position: relative;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin: 0 auto;
+  }
+
+  .caption {
+    width: 100%;
+    height: @caption-height;
+    padding: 0 5px;
+    line-height: 11px;
+  }
+
+  .thumbnail-image,
+  .nothumbnail-image {
+    position: absolute;
+    display: block;
+  }
+
+  img.thumbnail-image {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden; // Don't show alt text outside of img boundaries
+
+    .caption + & {
+      height: calc(100% - @caption-height);
+    }
+  }
+
+  @svg-scale: 1.25;
+  @svg-width: 100% * 9 / 16 / @svg-scale;
+  @svg-top: (100% * 9 / 16 / 2) - (@svg-width / 2);
+  svg.thumbnail-image {
+    top: 0;
+    left: 50% - (@svg-width / 4);
+    width: @svg-width / 4;
+    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;
+    font-size: xx-large;
+    text-align: center;
+    .v-icon {
+      font-size: 300%;
+    }
+  }
+
+</style>