Merge pull request #20 from edulution/progress_bars_corrections

Progress bars corrections

kolibri/plugins/edulution/assets/src/views/ChannelThumbnailNew.vue

@@ -17,8 +17,8 @@
       <div
         class="progress-bar"
         :style="{
-          width: percent + '%',
-          backgroundColor: progressColor || $themeTokens.primary
+          width: getProgressPercent + '%',
+          backgroundColor: setProgressBarColor
         }"
       >
 
@@ -68,9 +68,18 @@ export default {
         backgroundImage: this.thumbnail ? `url('${this.thumbnail}')` : '',
       };
     },
-    percent() {
+    getProgressPercent() {
       return Math.max(Math.min(this.progress * 100, 100), 0);
     },
+    setProgressBarColor(){
+      if(this.progress > 0.99){
+        return this.$themeTokens.mastered;
+      }
+      else{
+        return this.$themeTokens.progress;
+      }
+
+    }
   },
 };
 

kolibri/plugins/edulution/assets/src/views/CompletionModal/index.vue

@@ -84,7 +84,7 @@
                 />
               </CompletionModalSection>
 
-              <CompletionModalSection
+              <!-- <CompletionModalSection
                 ref="staySection"
                 :icon="(isQuiz || isSurvey) ? 'reports' : 'restart'"
                 :class="sectionClass"
@@ -93,10 +93,10 @@
                 :buttonLabel="(isQuiz || isSurvey) ?
                   $tr('reviewQuizButtonLabel') : $tr('stayButtonLabel')"
                 @buttonClick="$emit('close')"
-              />
+              /> -->
 
               <CompletionModalSection
-                v-if="recommendedContentNodes && recommendedContentNodes.length"
+                v-if="recommendedContentNodes && recommendedContentNodes.length && showRecommendedContent"
                 icon="alternativeRoute"
                 :class="sectionClass"
                 :title="$tr('helpfulResourcesTitle')"
@@ -244,6 +244,10 @@
       };
     },
     computed: {
+      showRecommendedContent(){
+        /*TODO: use facilityconfig instead of hardcoded value*/
+        return false;
+      },
       contentNodeId() {
         return this.contentNode && this.contentNode.id;
       },

kolibri/plugins/edulution/assets/src/views/LearningActivityBar.vue

@@ -323,7 +323,7 @@
       showBookmark: {
         type: Boolean,
         required: false,
-        default: true,
+        default: false,
       },
       /**
        * Shows the download button when truthy
@@ -370,18 +370,17 @@
         return this.isDownloading;
       },
       allActions() {
-        const actions = [
-          {
+        const actions = [];
+          /*actions.push({
             id: 'view-resource-list',
             icon: 'resourceList',
             label: this.isLessonContext
               ? this.$tr('viewLessonResources')
               : this.$tr('viewTopicResources'),
             event: 'viewResourceList',
             dataTest: this.isLessonContext ? 'viewLessonPlanButton' : 'viewTopicResourcesButton',
-          },
-        ];
-        if (this.showBookmark) {
+          });*/
+        /*if (this.showBookmark) {
           actions.push({
             id: 'bookmark',
             icon: this.isBookmarked ? 'bookmark' : 'bookmarkEmpty',
@@ -392,7 +391,7 @@
             disabled: this.isBookmarked === null,
             dataTest: this.isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton',
           });
-        }
+        }*/
         if (this.showDownloadButton) {
           actions.push({
             id: 'download',
@@ -422,13 +421,13 @@
             event: 'completionModal',
           });
         }
-        actions.push({
+        /*actions.push({
           id: 'view-info',
           icon: 'info',
           label: this.coreString('viewInformation'),
           event: 'viewInfo',
           dataTest: 'viewInfoButton',
-        });
+        });*/
 
         return actions;
       },

kolibri/plugins/edulution/assets/src/views/LibraryPage/index.vue

@@ -11,7 +11,7 @@
       class="main-grid"
       :style="gridOffset"
     >
-      <div v-if="!windowIsLarge && (!isLocalLibraryEmpty || deviceId)">
+      <div v-if="!windowIsLarge && (!isLocalLibraryEmpty || deviceId) && enableSearch">
         <KButton
           icon="filter"
           data-test="filter-button"
@@ -58,15 +58,15 @@
         <!-- ResumableContentGrid mostly handles whether it renders or not internally !-->
         <!-- but we conditionalize it based on whether we are on another device's library page !-->
         <ResumableContentGrid
-          v-if="!deviceId"
+          v-if="!deviceId && showRecentContent"
           data-test="resumable-content"
           :currentCardViewStyle="currentCardViewStyle"
           @setCardStyle="style => currentCardViewStyle = style"
           @setSidePanelMetadataContent="content => metadataSidePanelContent = content"
         />
         <!-- Other Libraires -->
         <div
-          v-if="!deviceId && isUserLoggedIn"
+          v-if="!deviceId && isUserLoggedIn && showOtherLibraries"
           data-test="other-libraries"
         >
           <KGrid gutter="12">
@@ -194,7 +194,7 @@
 
     <!-- Side Panels for filtering and searching  -->
     <SearchFiltersPanel
-      v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen)"
+      v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen) && enableSearch"
       ref="sidePanel"
       v-model="searchTerms"
       data-test="side-panel"
@@ -502,7 +502,21 @@
       };
     },
     computed: {
-      ...mapGetters(['getUserKind', 'currentUserId']),
+      ...mapGetters(['isLearner', 'getUserKind', 'currentUserId']),
+      enableSearch(){
+        /*TODO: Add facilityconfig and use that instead of hardcoded value*/
+        if(this.isLearner){
+          return false;
+        }
+      },
+      showRecentContent(){
+        /*TODO: Add facilityconfig and use that instead of hardcoded value*/
+        return false;
+      },
+      showOtherLibraries(){
+        /*TODO: Add facilityconfig and use that instead of hardcoded value*/
+        return false
+      },
       allowDownloads() {
         return this.canAddDownloads && Boolean(this.deviceId);
       },
@@ -576,17 +590,24 @@
         return this.pinnedDevices.length > 0;
       },
       sidePanelWidth() {
-        if (
-          this.windowIsSmall ||
-          this.windowIsMedium ||
-          (this.isLocalLibraryEmpty && !this.deviceId)
-        ) {
+        if (this.enableSearch){
+            if (
+              this.windowIsSmall ||
+              this.windowIsMedium ||
+              (this.isLocalLibraryEmpty && !this.deviceId)
+            ) {
+              return 0;
+            } else if (this.windowBreakpoint < 4) {
+              return 234;
+            } else {
+              return 346;
+            }
+          }
+        else{
           return 0;
-        } else if (this.windowBreakpoint < 4) {
-          return 234;
-        } else {
-          return 346;
         }
+
+
       },
       showingAllLibrariesLabel() {
         const label = this.$tr('showingAllLibraries');
@@ -774,6 +795,7 @@
   }
 
   .channels-label {
+    margin-top: 10%;
     margin-bottom: 12px;
   }
 

kolibri/plugins/edulution/assets/src/views/TopicsPage/TopicSubsection.vue

@@ -29,8 +29,8 @@
           <div
             class="progress-bar"
             :style="{
-              width: percent + '%',
-              backgroundColor: $themePalette.orange.v_400
+              width: getProgressPercent + '%',
+              backgroundColor: setProgressBarColor
             }"
           >
 
@@ -118,10 +118,19 @@
       topicKnowledgemap() {
         return get(this.$store.state.examViewer.knowledgemap, 'results', []).find(d => d.id === this.topic.id )?.children || [];
       },
-      percent() {
+      getProgressPercent() {
         const progress = get(this.$store.state.examViewer.knowledgemap, 'results', []).find(d => d.id === this.topic.id )?.progress_fraction || 0
         return Math.max(Math.min(progress * 100, 100), 0);
       },
+      setProgressBarColor(){
+        if(this.progress > 0.99){
+          return this.$themeTokens.mastered;
+        }
+        else{
+          return this.$themeTokens.progress;
+        }
+
+      }
     },
     methods: {
       onExpansionClick() {

kolibri/plugins/edulution/assets/src/views/TopicsPage/index.vue

@@ -38,13 +38,13 @@
         >
           <template #sticky-sidebar>
             <ToggleHeaderTabs
-              v-if="!!windowIsLarge"
+              v-if="!!windowIsLarge && enableSearch"
               :topic="topic"
               :topics="topics"
               :width="sidePanelWidth"
             />
             <SearchFiltersPanel
-              v-if="!!windowIsLarge && searchActive"
+              v-if="!!windowIsLarge && searchActive && enableSearch"
               ref="sidePanel"
               v-model="searchTerms"
               class="side-panel"
@@ -53,7 +53,7 @@
               :style="sidePanelStyleOverrides"
             />
             <TopicsPanelModal
-              v-else-if="!!windowIsLarge"
+              v-else-if="!!windowIsLarge && enableSearch"
               ref="sidePanel"
               class="side-panel"
               :topics="topics"
@@ -82,7 +82,7 @@
 
           <div class="card-grid">
             <!-- Filter buttons - shown when not sidebar not visible -->
-            <div v-if="!windowIsLarge" data-test="tab-buttons">
+            <div v-if="!windowIsLarge && enableSearch" data-test="tab-buttons">
               <KButton
                 v-if="topics.length"
                 icon="topic"
@@ -242,6 +242,7 @@
 
 <script>
 
+  import { mapGetters } from 'vuex';
   import { get, set } from '@vueuse/core';
   import isEqual from 'lodash/isEqual';
   import lodashSet from 'lodash/set';
@@ -280,6 +281,7 @@
   import TopicsPanelModal from './TopicsPanelModal';
   import commonLearnStrings from './../commonLearnStrings';
 
+
   function _handleRootTopic(topic, currentChannel) {
     const isRoot = !topic.parent;
     if (isRoot) {
@@ -530,6 +532,13 @@
       };
     },
     computed: {
+      ...mapGetters(['isLearner']),
+      enableSearch(){
+        /*TODO: Add facilityconfig and use that instead of hardcoded value*/
+        if(this.isLearner){
+          return false;
+        }
+      },
       topicKnowledgemap() {
         return lodashGet(this.$store.state.examViewer.knowledgemap, 'results', []).find(d => d.id === this.topic?.id )?.children || [];
       },
@@ -665,13 +674,21 @@
         return false;
       },
       sidePanelWidth() {
-        if (!this.windowIsLarge) {
+
+        if (this.enableSearch){
+            if (!this.windowIsLarge) {
+              return 0;
+            } else if (this.windowBreakpoint < 4) {
+              return 234;
+            } else {
+              return 346;
+            }
+          }
+        else{
           return 0;
-        } else if (this.windowBreakpoint < 4) {
-          return 234;
-        } else {
-          return 346;
         }
+
+        
       },
       gridStyle() {
         let style = {};

kolibri/plugins/edulution/assets/src/views/commonLearnStrings.js

@@ -46,7 +46,7 @@ export const learnStrings = createTranslator('CommonLearnStrings', {
       'Added to create a complete alt-text description of a logo on a content card to indicate to the user what channel the resource belongs to. For example: From the channel Khan Academy - English',
   },
   resourceCompletedLabel: {
-    message: 'Resource completed',
+    message: 'Well done! 😃',
     context:
       'Message when the user successfully finishes a resource or marks a resource as complete',
   },