Many hybrid learning things

kolibri/core/assets/src/views/ContentRenderer/DownloadButton.vue

@@ -39,7 +39,6 @@
             }),
           };
         });
-        console.log(options);
         return options;
       },
     },

kolibri/core/assets/src/views/FullScreenSidePanel/index.vue

@@ -13,13 +13,18 @@
         :style="{
           color: $themeTokens.text,
           backgroundColor: $themeTokens.surface,
+          right: (alignment === 'right' ? 0 : ''),
+          left: (alignment === 'left' ? 0 : ''),
+          width: (sidePanelOverrideWidth ? sidePanelOverrideWidth : '')
         }"
       >
-        <KIconButton
-          icon="close"
-          class="close-button"
-          @click="closePanel"
-        />
+        <div v-if="!closeButtonHidden">
+          <KIconButton
+            icon="close"
+            class="close-button"
+            @click="closePanel"
+          />
+        </div>
         <slot></slot>
 
       <!--
@@ -71,6 +76,25 @@
       //SidePanelResourcesList,
     },
     mixins: [responsiveWindowMixin],
+    props: {
+      closeButtonHidden: {
+        type: Boolean,
+        default: false,
+      },
+      alignment: {
+        type: String,
+        default: 'right',
+        validator(val) {
+          return ['right', 'left'].includes(val);
+        },
+      },
+      // to customize the width of the side panel in different scenarios
+      sidePanelOverrideWidth: {
+        type: String,
+        required: false,
+        default: null,
+      },
+    },
     computed: {
       isMobile() {
         return this.windowBreakpoint == 0;
@@ -114,7 +138,6 @@
   .side-panel {
     position: fixed;
     top: 0;
-    right: 0;
     bottom: 0;
     // Must be <= 12 z-index so that KDropdownMenu shows over
     z-index: 12;

kolibri/core/assets/src/views/TextTruncator.vue

@@ -135,6 +135,11 @@
   .truncated {
     overflow: hidden;
     text-overflow: ellipsis;
+    // this ensure that when the text truncator is used
+    // in a router-link card, the text is not underlined
+    a {
+      text-decoration: none !important;
+    }
   }
 
 </style>

kolibri/core/content/utils/search.py

@@ -76,7 +76,7 @@ def _get_available_channels(base_queryset):
             id__in=base_queryset.values_list("channel_id", flat=True).distinct()
         )
         .order_by("order")
-        .values("id", "name")
+        .values("id", "name", "thumbnail")
     )
 
 

kolibri/plugins/learn/assets/src/modules/coreLearn/utils.js

@@ -3,16 +3,25 @@ import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
 import { assessmentMetaDataState } from 'kolibri.coreVue.vuex.mappers';
 import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
 import tail from 'lodash/tail';
+import plugin_data from 'plugin_data';
+
+const channels = {};
+for (let channel of plugin_data.channels) {
+  channels[channel.id] = channel;
+}
 
 // adds progress, thumbnail, and breadcrumbs. normalizes pk/id and kind
 export function normalizeContentNode(node) {
+  const channel = channels[node.channel_id];
   return {
     ...node,
     kind: node.parent ? node.kind : ContentNodeKinds.CHANNEL,
     thumbnail: getContentNodeThumbnail(node) || undefined,
     breadcrumbs: tail(node.ancestors),
     progress: Math.min(node.progress_fraction || 0, 1.0),
     copies_count: node.copies_count,
+    channel_title: channel ? channel.name : '',
+    channel_thumbnail: channel ? channel.thumbnail : null,
   };
 }
 

kolibri/plugins/learn/assets/src/views/BookmarkPage.vue

@@ -1,56 +1,34 @@
 <template>
 
   <div>
-
-    <h3>{{ $tr('bookmarksHeader') }}</h3>
-
+    <h1>
+      {{ $tr('bookmarksHeader') }}
+    </h1>
     <p v-if="!bookmarks.length && !loading">
       {{ $tr('noBookmarks') }}
     </p>
 
-    <template v-else>
-      <ContentCard
-        v-for="(content, index) in bookmarks"
-        :key="content.id"
-        class="card"
-        :isMobile="windowIsSmall"
-        :title="content.title"
-        :thumbnail="content.thumbnail"
-        :kind="content.kind"
-        :isLeaf="content.is_leaf"
-        :progress="content.progress || 0"
-        :numCoachContents="content.num_coach_contents"
-        :link="genContentLink(content.id, content.is_leaf)"
-        :contentId="content.content_id"
-        :subtitle="bookmarkCreated(content.bookmark.created)"
-      >
-        <template #actions>
-          <KIconButton
-            icon="info"
-            :tooltip="infoText"
-            :ariaLabel="infoText"
-            @click="showResourcePanel(content)"
-          />
-          <KIconButton
-            icon="clear"
-            :tooltip="removeText"
-            :ariaLabel="removeText"
-            @click="removeBookmark(content, index)"
-          />
-        </template>
-      </ContentCard>
-
-      <KButton
-        v-if="more && !loading"
-        :text="coreString('viewMoreAction')"
-        @click="loadMore"
-      />
-      <KCircularLoader
-        v-else-if="loading"
-        :delay="false"
-      />
-
-    </template>
+    <HybridLearningCardGrid
+      v-if="bookmarks.length"
+      :contents="bookmarks"
+      :currentPage="currentPage"
+      :genContentLink="genContentLink"
+      :cardViewStyle="windowIsSmall ? 'card' : 'list'"
+      numCols="1"
+      :footerIcons="footerIcons"
+      @removeFromBookmarks="removeFromBookmarks"
+    />
+
+    <KButton
+      v-if="more && !loading"
+      data-test="load-more-button"
+      :text="coreString('viewMoreAction')"
+      @click="loadMore"
+    />
+    <KCircularLoader
+      v-else-if="loading"
+      :delay="false"
+    />
   </div>
 
 </template>
@@ -59,14 +37,15 @@
 <script>
 
   import { mapActions } from 'vuex';
-  import client from 'kolibri.client';
-  import urls from 'kolibri.urls';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { ContentNodeResource } from 'kolibri.resources';
-  import { now } from 'kolibri.utils.serverClock';
+  import client from 'kolibri.client';
+  import urls from 'kolibri.urls';
   import genContentLink from '../utils/genContentLink';
-  import ContentCard from './ContentCard';
+  import { PageNames } from '../constants';
+  import { normalizeContentNode } from '../modules/coreLearn/utils.js';
+  import HybridLearningCardGrid from './HybridLearningCardGrid';
 
   export default {
     name: 'BookmarkPage',
@@ -76,41 +55,31 @@
       };
     },
     components: {
-      ContentCard,
+      HybridLearningCardGrid,
     },
     mixins: [commonCoreStrings, responsiveWindowMixin],
     data() {
       return {
         loading: true,
         bookmarks: [],
         more: null,
-        resourcePanelNode: null,
-        now: now(),
       };
     },
     computed: {
-      infoText() {
-        return this.coreString('viewInformation');
+      footerIcons() {
+        return { info: 'viewInformation', close: 'removeFromBookmarks' };
       },
-      removeText() {
-        return this.coreString('removeFromBookmarks');
+      currentPage() {
+        return PageNames.BOOKMARKS;
       },
     },
     created() {
       ContentNodeResource.fetchBookmarks({ params: { limit: 25 } }).then(data => {
         this.more = data.more;
-        this.bookmarks = data.results;
+        this.bookmarks = data.results ? data.results.map(normalizeContentNode) : [];
         this.loading = false;
       });
     },
-    mounted() {
-      this.timer = setInterval(() => {
-        this.now = now();
-      }, 10000);
-    },
-    beforeDestroy() {
-      clearInterval(this.timer);
-    },
     methods: {
       ...mapActions(['createSnackbar']),
       genContentLink,
@@ -119,26 +88,21 @@
           this.loading = true;
           ContentNodeResource.fetchBookmarks({ params: this.more }).then(data => {
             this.more = data.more;
-            this.bookmarks.push(...data.results);
+            this.bookmarks.push(...data.results.map(normalizeContentNode));
             this.loading = false;
           });
         }
       },
-      removeBookmark(bookmark, index) {
-        client({
-          method: 'delete',
-          url: urls['kolibri:core:bookmarks_delete_by_node_id'](bookmark.id),
-        }).then(() => {
-          this.bookmarks.pop(index);
-          this.createSnackbar(this.$tr('removedNotification'));
-        });
-      },
-      showResourcePanel(bookmark) {
-        this.resourcePanelNode = bookmark;
-      },
-      bookmarkCreated(date) {
-        const time = this.$formatRelative(date, { now: this.now });
-        return this.coreString('bookmarkedTimeAgoLabel', { time });
+      removeFromBookmarks(bookmark) {
+        if (bookmark) {
+          client({
+            method: 'delete',
+            url: urls['kolibri:core:bookmarks_detail'](bookmark.id),
+          }).then(() => {
+            this.bookmarks = this.bookmarks.filter(bm => bm.bookmark.id !== bookmark.id);
+            this.createSnackbar(this.$tr('removedNotification'));
+          });
+        }
       },
     },
     $trs: {
@@ -159,12 +123,3 @@
   };
 
 </script>
-
-
-<style lang="scss" scoped>
-
-  .card {
-    margin: 5px;
-  }
-
-</style>