Begin bringing in side panel work - working on Library and content re…

…nderer pages
learningequality · Oct 29, 2021 · c670e37 · c670e37
1 parent e4f08ca
commit c670e37
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue
@@ -25,6 +25,7 @@
           :channelThumbnail="content.channel_thumbnail"
           :channelTitle="content.channel_title"
           @openCopiesModal="openCopiesModal"
+          @toggleInfoPanel="$emit('toggleInfoPanel', content)"
         />
       </KFixedGridItem>
     </KFixedGrid>
@@ -84,6 +85,7 @@
       :footerIcons="footerIcons"
       :createdDate="content.bookmark ? content.bookmark.created : null"
       @openCopiesModal="openCopiesModal"
+      @toggleInfoPanel="$emit('toggleInfoPanel', content)"
       @removeFromBookmarks="removeFromBookmarks(content, contents)"
     />
     <CopiesModal

diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
@@ -63,6 +63,7 @@
           :isTopic="isTopic"
         />
         <KIconButton
+          v-if="isLeaf"
           icon="infoPrimary"
           size="mini"
           :color="$themePalette.grey.v_400"

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage.vue
@@ -46,6 +46,7 @@
           :genContentLink="genContentLink"
           :contents="trimmedPopular"
           :currentPage="currentPage"
+          @toggleInfoPanel="toggleInfoPanel"
         />
       </div>
 
@@ -113,6 +114,7 @@
           :cardViewStyle="currentViewStyle"
           :genContentLink="genContentLink"
           :contents="results"
+          @toggleInfoPanel="toggleInfoPanel"
         />
         <!-- conditionally displayed button if there are additional results -->
         <KButton
@@ -203,6 +205,13 @@
       @cancel="currentCategory = null"
       @input="handleCategory"
     />
+
+    <FullScreenSidePanel
+      v-if="sidePanelContent"
+      @closePanel="sidePanelContent = null"
+    >
+      <BrowseResourceMetadata :content="sidePanelContent" :canDownloadContent="true" />
+    </FullScreenSidePanel>
   </div>
 
 </template>
@@ -217,10 +226,11 @@
   import { ContentNodeProgressResource, ContentNodeResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { AllCategories, NoCategories } from 'kolibri.coreVue.vuex.constants';
+  import FullScreenSidePanel from 'kolibri.coreVue.components.FullScreenSidePanel';
   import genContentLink from '../utils/genContentLink';
-  import FullScreenSidePanel from '../../../../../core/assets/src/views/FullScreenSidePanel';
   import { PageNames } from '../constants';
   import { normalizeContentNode } from '../modules/coreLearn/utils';
+  import BrowseResourceMetadata from './BrowseResourceMetadata';
   import commonLearnStrings from './commonLearnStrings';
   import ChannelCardGroupGrid from './ChannelCardGroupGrid';
   import HybridLearningCardGrid from './HybridLearningCardGrid';
@@ -253,6 +263,7 @@
       EmbeddedSidePanel,
       FullScreenSidePanel,
       CategorySearchModal,
+      BrowseResourceMetadata,
     },
     mixins: [commonLearnStrings, commonCoreStrings, responsiveWindowMixin],
     data: function() {
@@ -266,6 +277,7 @@
         labels: null,
         showSearchModal: false,
         sidePanelIsOpen: false,
+        sidePanelContent: null,
       };
     },
     computed: {
@@ -389,6 +401,9 @@
       toggleSidePanelVisibility() {
         this.sidePanelIsOpen = !this.sidePanelIsOpen;
       },
+      toggleInfoPanel(content) {
+        this.sidePanelContent = content;
+      },
       closeCategoryModal() {
         this.currentCategory = null;
       },

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
@@ -157,6 +157,7 @@
                 :genContentLink="genContentLink"
                 :channelThumbnail="channel_thumbnail"
                 cardViewStyle="card"
+                @toggleInfoPanel="toggleInfoPanel"
               />
             </div>
             <!-- search results -->
@@ -167,6 +168,7 @@
               :genContentLink="genContentLink"
               :channelThumbnail="channel_thumbnail"
               cardViewStyle="card"
+              @toggleInfoPanel="toggleInfoPanel"
             />
           </div>
           <div v-else-if="!searchLoading" class="results-title">
@@ -212,6 +214,7 @@
               :cardViewStyle="currentViewStyle"
               :genContentLink="genContentLink"
               :contents="results"
+              @toggleInfoPanel="toggleInfoPanel"
             />
             <KButton
               v-if="more"
@@ -333,6 +336,7 @@
   import genContentLink from '../utils/genContentLink';
   import HybridLearningCardGrid from './HybridLearningCardGrid';
   import EmbeddedSidePanel from './EmbeddedSidePanel';
+  import BrowseResourceMetadata from './BrowseResourceMetadata';
   import CustomContentRenderer from './ChannelRenderer/CustomContentRenderer';
   import CardThumbnail from './ContentCard/CardThumbnail';
   import CategorySearchModal from './CategorySearchModal/index';
@@ -374,6 +378,7 @@
       CategorySearchModal,
       EmbeddedSidePanel,
       FullScreenSidePanel,
+      BrowseResourceMetadata,
     },
     mixins: [commonCoach, responsiveWindowMixin, commonCoreStrings],
     data: function() {
@@ -389,6 +394,7 @@
         labels: null,
         showSearchModal: false,
         sidePanelIsOpen: false,
+        sidePanelContent: null,
         showFoldersDropdown: false,
       };
     },
@@ -598,7 +604,6 @@
             getParams.keywords = this.searchTerms.keywords;
           }
           ContentNodeResource.fetchCollection({ getParams }).then(data => {
-            console.log(data);
             this.results = data.results.map(normalizeContentNode);
             this.more = data.more;
             this.labels = data.labels;
@@ -640,6 +645,9 @@
       toggleSidebarView(value) {
         this.activeTab = value;
       },
+      toggleInfoPanel(content) {
+        this.sidePanelContent = content;
+      },
       stickyCalculation() {
         let header = document.getElementsByClassName('header')[0];
         if (header) {