Replace KResponsiveWindowMixin with useKResponseWindow in Learn plugin (

#11366) * MyDownloads page done * ActivityFilter done * SortFilter done * View Folder resources * BookmarkPage done * ContentPage done * resolved conflict in LearningActivityBars * Library page done * search result grid done * Assesment wrapper done * LessonMasteryBar done * CardGrid view done * LessonPlaylistPage done * CompletionModalSection done * ExamPage done * bug fix * QuizRenderer * category search model done * CardList view done * conflict resolved TopicsPage * contenet grid done * All conflict resolved * for completion modal * SidePanel modal * regression fixed * resolved * ActivityFilter done * lLibrary page done * search result grid done * regression fixed * fixes while rebasing * Fix tests. --------- Co-authored-by: Richard Tibbles <[email protected]>
learningequality · Nov 1, 2023 · cb1a8ea · cb1a8ea
1 parent e001ec0
commit cb1a8ea
Show file tree

Hide file tree

Showing 29 changed files with 178 additions and 65 deletions.
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue
@@ -32,18 +32,19 @@
   import pickBy from 'lodash/pickBy';
   import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useLearningActivities from '../../../composables/useLearningActivities';
 
   export default {
     name: 'ActivityFilter',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const { getLearningActivityLabel, getLearningActivityIcon } = useLearningActivities();
-
+      const { windowIsLarge } = useKResponsiveWindow();
       return {
         getLearningActivityLabel,
         getLearningActivityIcon,
+        windowIsLarge,
       };
     },
     data() {

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue
@@ -17,11 +17,17 @@
 
   import pickBy from 'lodash/pickBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'SortFilter',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     data() {
       return {
         sortOptions: [

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -57,7 +57,6 @@
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import plugin_data from 'plugin_data';
   import useDownloadRequests from '../../composables/useDownloadRequests';
   import useDevices from '../../composables/useDevices';
@@ -73,7 +72,7 @@
       ActivityFilter,
       SortFilter,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const {
         downloadRequestMap,

diff --git a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
@@ -97,7 +97,7 @@
   import isBoolean from 'lodash/isBoolean';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
   import useContentLink from '../composables/useContentLink';
@@ -113,17 +113,18 @@
       TimeDuration,
       MissingResourceAlert,
     },
-    mixins: [KResponsiveWindowMixin],
     setup() {
       const { contentNodeProgressMap } = useContentNodeProgress();
       const {
         genContentLinkKeepCurrentBackLink,
         genContentLinkKeepPreviousBackLink,
       } = useContentLink();
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         contentNodeProgressMap,
         genContentLinkKeepCurrentBackLink,
         genContentLinkKeepPreviousBackLink,
+        windowIsSmall,
       };
     },
     props: {

diff --git a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue
@@ -21,15 +21,21 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import BaseToolbar from 'kolibri.coreVue.components.BaseToolbar';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'LessonMasteryBar',
     components: {
       BaseToolbar,
       TextTruncatorCss,
     },
-    mixins: [KResponsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       // typically this would be "m" from "m of n" mastery model
       requiredCorrectAnswers: {

diff --git a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue
@@ -144,7 +144,7 @@ oriented data synchronization.
   import { MasteryModelGenerators } from 'kolibri.coreVue.vuex.constants';
   import shuffled from 'kolibri.utils.shuffled';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import { createTranslator, defaultLanguage } from 'kolibri.utils.i18n';
@@ -176,7 +176,13 @@ oriented data synchronization.
       LessonMasteryBar,
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       lang: {
         type: Object,

diff --git a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
@@ -86,7 +86,7 @@
 
   import { mapActions } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { ContentNodeResource } from 'kolibri.resources';
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
@@ -117,12 +117,18 @@
       LearnAppBarPage,
       HybridLearningFooter,
     },
-    mixins: [commonCoreStrings, commonLearnStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
       const { canDownloadExternally } = useCoreLearn();
       const { fetchContentNodeProgress } = useContentNodeProgress();
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
-      return { canDownloadExternally, fetchContentNodeProgress, genContentLinkBackLinkCurrentPage };
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        canDownloadExternally,
+        fetchContentNodeProgress,
+        genContentLinkBackLinkCurrentPage,
+        windowIsSmall,
+      };
     },
     data() {
       return {

diff --git a/kolibri/plugins/learn/assets/src/views/CardList.vue b/kolibri/plugins/learn/assets/src/views/CardList.vue
@@ -103,7 +103,7 @@
   import { now } from 'kolibri.utils.serverClock';
   import { ContentLevels, Categories } from 'kolibri.coreVue.vuex.constants';
   import camelCase from 'lodash/camelCase';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useChannels from '../composables/useChannels';
   import LearningActivityLabel from './LearningActivityLabel';
   import LearningActivityDuration from './LearningActivityDuration';
@@ -118,12 +118,14 @@
       LearningActivityLabel,
       LearningActivityDuration,
     },
-    mixins: [responsiveWindowMixin, commonLearnStrings, commonCoreStrings],
+    mixins: [commonLearnStrings, commonCoreStrings],
     setup() {
       const { getChannelThumbnail, getChannelTitle } = useChannels();
+      const { windowIsLarge } = useKResponsiveWindow();
       return {
         getChannelThumbnail,
         getChannelTitle,
+        windowIsLarge,
       };
     },
     props: {

diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
@@ -82,7 +82,7 @@
 
   import { mapGetters } from 'vuex';
   import { validateLinkObject } from 'kolibri.utils.validators';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import ChannelThumbnail from './ChannelThumbnail';
@@ -94,7 +94,12 @@
       CoachContentLabel,
       TextTruncatorCss,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowGutter } = useKResponsiveWindow();
+      return {
+        windowGutter,
+      };
+    },
     props: {
       title: {
         type: String,

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue
@@ -80,7 +80,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   /**
    * A responsive section of the completion modal.
@@ -94,7 +94,12 @@
    */
   export default {
     name: 'CompletionModalSection',
-    mixins: [KResponsiveWindowMixin],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       title: {
         type: String,

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -144,7 +144,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { MaxPointsPerContent } from 'kolibri.coreVue.vuex.constants';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
@@ -178,17 +178,21 @@
       ResourceItem,
       UiAlert,
     },
-    mixins: [KResponsiveWindowMixin, commonLearnStrings, commonCoreStrings],
+    mixins: [commonLearnStrings, commonCoreStrings],
     setup() {
       const { canAccessUnassignedContent } = useDeviceSettings();
       const { fetchLesson } = useLearnerResources();
       const { genContentLinkKeepCurrentBackLink } = useContentLink();
       const { baseurl } = currentDeviceData();
+      const { windowBreakpoint, windowHeight, windowWidth } = useKResponsiveWindow();
       return {
         baseurl,
         canAccessUnassignedContent,
         fetchLesson,
         genContentLinkKeepCurrentBackLink,
+        windowBreakpoint,
+        windowHeight,
+        windowWidth,
       };
     },
     props: {

diff --git a/kolibri/plugins/learn/assets/src/views/ContentPage.vue b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
@@ -107,7 +107,7 @@
   import { mapState, mapGetters } from 'vuex';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import { ContentNodeResource } from 'kolibri.resources';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import router from 'kolibri.coreVue.router';
   import Modalities from 'kolibri-constants/Modalities';
   import { setContentNodeProgress } from '../composables/useContentNodeProgress';
@@ -135,7 +135,7 @@
       QuizRenderer,
       MarkAsCompleteModal,
     },
-    mixins: [commonLearnStrings, responsiveWindowMixin],
+    mixins: [commonLearnStrings],
     setup() {
       const {
         progress,
@@ -158,7 +158,7 @@
         }
         return Promise.resolve();
       };
-
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         errored,
         progress,
@@ -173,6 +173,7 @@
         startTracking: startTrackingProgress,
         stopTracking: stopTrackingProgress,
         genContentLinkKeepCurrentBackLink,
+        windowIsSmall,
       };
     },
     props: {

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -181,7 +181,7 @@
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import UiIconButton from 'kolibri.coreVue.components.UiIconButton';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import SuggestedTime from 'kolibri.coreVue.components.SuggestedTime';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -210,7 +210,7 @@
       ImmersivePage,
       ResourceSyncingUiAlert,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
     setup() {
       const {
         pastattempts,
@@ -220,13 +220,17 @@
         startTrackingProgress,
         stopTrackingProgress,
       } = useProgressTracking();
+      const { windowBreakpoint, windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       return {
         pastattempts,
         time_spent,
         initContentSession,
         updateContentSession,
         startTrackingProgress,
         stopTrackingProgress,
+        windowBreakpoint,
+        windowIsLarge,
+        windowIsSmall,
       };
     },
     data() {

diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -169,7 +169,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -208,7 +208,13 @@
         return value;
       },
     },
-    mixins: [KResponsiveWindowMixin, commonLearnStrings, commonCoreStrings],
+    mixins: [commonLearnStrings, commonCoreStrings],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     /**
      * Emits the following events:
      * - `navigateBack` on back button click

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
@@ -30,7 +30,7 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useContentLink from '../composables/useContentLink';
   import CardGrid from './cards/CardGrid';
   import ResourceCard from './cards/ResourceCard';
@@ -50,14 +50,17 @@
       ResourceCard,
     },
 
-    mixins: [responsiveWindowMixin],
-
     setup() {
       const {
         genContentLinkBackLinkCurrentPage,
         genContentLinkKeepCurrentBackLink,
       } = useContentLink();
-      return { genContentLinkBackLinkCurrentPage, genContentLinkKeepCurrentBackLink };
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        genContentLinkBackLinkCurrentPage,
+        genContentLinkKeepCurrentBackLink,
+        windowIsSmall,
+      };
     },
 
     props: {