WIP - updates to constants, MetadataChips component

learningequality · Feb 22, 2025 · 00e1d50 · 00e1d50
1 parent 9ea8db7
commit 00e1d50
Show file tree

Hide file tree

Showing 7 changed files with 392 additions and 46 deletions.
diff --git a/...ri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue b/...ri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
@@ -1,14 +1,14 @@
 <template>
 
   <div class="content-list">
-      <KCheckbox
-        v-if="showSelectAll"
-        :label="$tr('selectAllCheckboxLabel')"
-        :checked="selectAllChecked"
-        :indeterminate="selectAllIndeterminate"
-        :disabled="isSelectAllDisabled"
-        @change="$emit('changeselectall', $event)"
-      />
+    <KCheckbox
+      v-if="showSelectAll"
+      :label="$tr('selectAllCheckboxLabel')"
+      :checked="selectAllChecked"
+      :indeterminate="selectAllIndeterminate"
+      :disabled="isSelectAllDisabled"
+      @change="$emit('changeselectall', $event)"
+    />
     <KCardGrid layout="1-1-1">
       <component
         :is="content.is_leaf ? 'AccessibleResourceCard' : 'AccessibleFolderCard'"
@@ -82,6 +82,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import AccessibleFolderCard from 'kolibri-common/components/Cards/AccessibleFolderCard';
   import AccessibleResourceCard from 'kolibri-common/components/Cards/AccessibleResourceCard';
+  import { useCoachMetadataTags } from 'kolibri-common/composables/useCoachMetadataTags';
   import { ViewMoreButtonStates } from '../../../constants/index';
 
   export default {
@@ -113,6 +114,10 @@
         });
       }
 
+      function getTags(content) {
+        return useCoachMetadataTags(content).tags.value;
+      }
+
       function deleteBookmark(contentnode_id) {
         client({
           method: 'delete',
@@ -150,6 +155,7 @@
 
       getBookmarks();
       return {
+        getTags,
         ViewMoreButtonStates,
         toggleBookmark,
         isBookmarked,
@@ -275,4 +281,17 @@
     margin-left: $checkbox-offset;
   }
 
+  .filter-chip {
+    display: inline-block;
+    font-size: 14px;
+    vertical-align: top;
+    border-radius: 0.25em;
+  }
+
+  .filter-chip-text {
+    display: inline-block;
+    margin: 4px 8px;
+    font-size: 11px;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue b/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
@@ -4,11 +4,12 @@
     :to="to"
     :headingLevel="headingLevel"
     :orientation="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
-    thumbnailDisplay="large"
+    thumbnailDisplay="small"
     :title="contentNode.title"
     :thumbnailSrc="thumbnailSrc"
-    thumbnailScaleType="centerInside"
+    thumbnailScaleType="contain"
     thumbnailAlign="right"
+    :preserveFooter="true"
   >
     <template #thumbnailPlaceholder>
       <div class="default-folder-icon">
@@ -21,22 +22,7 @@
 
     <template #belowTitle>
       <slot name="belowTitle"></slot>
-      <div
-        class="header-bar"
-        :style="headerStyles"
-      >
-        <KIcon
-          icon="topic"
-          :color="$themePalette.grey.v_800"
-          class="folder-header-bar"
-        />
-        <p
-          class="folder-header-text"
-          :style="{ color: $themePalette.grey.v_700 }"
-        >
-          {{ coreString('folder') }}
-        </p>
-      </div>
+      <MetadataChips :tags="metadataTags" />
     </template>
   </KCard>
 
@@ -45,17 +31,26 @@
 
 <script>
 
+  import { toRefs } from 'vue';
   import { validateLinkObject } from 'kolibri/utils/validators';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { useCoachMetadataTags } from 'kolibri-common/composables/useCoachMetadataTags';
+  import MetadataChips from 'kolibri-common/components/MetadataChips';
 
   export default {
     name: 'AccessibleFolderCard',
+    components: {
+      MetadataChips,
+    },
     mixins: [commonCoreStrings],
-    setup() {
+    setup(props) {
+      const { contentNode } = toRefs(props);
       const { windowBreakpoint } = useKResponsiveWindow();
+      const { getFolderTags } = useCoachMetadataTags(contentNode.value);
 
       return {
+        metadataTags: getFolderTags(),
         windowBreakpoint,
       };
     },
@@ -84,8 +79,7 @@
           color: this.$themeTokens.text,
           borderRadius: '4px',
           height: '24px',
-          width: '74px',
-          margin: '0',
+          margin: '0em 1em',
           backgroundColor: this.$themePalette.grey.v_100,
         };
       },
@@ -97,7 +91,7 @@
 
 <style lang="scss" scoped>
 
-  .header-bar {
+  .chips-wrapper {
     display: flex;
     justify-content: space-between;
     height: 38px;

diff --git a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
@@ -4,7 +4,7 @@
     :to="to"
     :headingLevel="headingLevel"
     :orientation="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
-    thumbnailDisplay="large"
+    thumbnailDisplay="small"
     :title="contentNode.title"
     :thumbnailSrc="thumbnailSrc"
     thumbnailAlign="right"
@@ -21,6 +21,7 @@
           :text="contentNode.description"
           :maxLines="2"
         />
+        <MetadataChips :tags="metadataTags" />
       </div>
     </template>
     <template #select>
@@ -45,20 +46,27 @@
 
 <script>
 
+  import { toRefs } from 'vue';
   import { validateLinkObject } from 'kolibri/utils/validators';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import MetadataChips from 'kolibri-common/components/MetadataChips';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { useCoachMetadataTags } from 'kolibri-common/composables/useCoachMetadataTags';
   import LearningActivityIcon from './../ResourceDisplayAndSearch/LearningActivityIcon.vue';
 
   export default {
     name: 'AccessibleResourceCard',
     components: {
       LearningActivityIcon,
+      MetadataChips,
     },
     mixins: [commonCoreStrings],
-    setup() {
+    setup(props) {
+      const { contentNode } = toRefs(props);
+      const { getResourceTags } = useCoachMetadataTags(contentNode.value);
       const { windowBreakpoint } = useKResponsiveWindow();
       return {
+        metadataTags: getResourceTags(),
         windowBreakpoint,
       };
     },

diff --git a/packages/kolibri-common/components/MetadataChips.vue b/packages/kolibri-common/components/MetadataChips.vue
@@ -0,0 +1,79 @@
+<template>
+
+  <div
+    class="metadata-chips"
+  >
+    <div
+      v-for="({ label, key, icon }) in tags"
+      :key="key"
+      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      class="chip"
+    >
+      <KIcon
+        v-if="icon"
+        class='icon'
+        :icon="icon"
+      />
+      <span
+        class="chip-text"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        {{ label }}
+      </span>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { toRefs } from 'vue';
+
+  export default {
+    name: 'MetadataChips',
+    props: {
+      /**
+       * A list of tags to display
+       * @type {Object[Tag]}
+       * @property {string} label
+       * @property {string} key
+       * @property {string} icon
+       */
+      tags: {
+        type: Array,
+        required: true,
+        validator: (tags) => tags.every(tag => tag.label && tag.key),
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .metadata-chips {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    border-radius: 4px;
+  }
+
+  .chip-text {
+    padding: 0 4px;
+    font-size: 12px;
+  }
+
+  .icon {
+    top: 0!important;
+  }
+
+  .chip {
+    display: flex;
+    position: relative;
+    padding: 4px;
+    margin-right: 4px;
+  }
+
+</style>