Replaced KResponsiveWindow mixin by useKResponsiveWindow composable - Core #11335

AUTHORS.md

@@ -99,3 +99,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Vikramaditya Singh | Ghat0tkach |
 | Kris Katkus | katkuskris |
 | Garvit Singhal | GarvitSinghal47 |
+| Adars T S | a6ar55 |

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

@@ -76,15 +76,14 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import AttemptLogItem from './AttemptLogItem';
 
   export default {
     name: 'AttemptLogList',
     components: {
       AttemptLogItem,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       attemptLogs: {
         type: Array,

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

@@ -15,11 +15,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'BottomAppBar',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
   };
 
 </script>

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

@@ -162,7 +162,7 @@
   import find from 'lodash/find';
   import MultiPaneLayout from 'kolibri.coreVue.components.MultiPaneLayout';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { MasteryLogResource } from 'kolibri.resources';
   import { now } from 'kolibri.utils.serverClock';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
@@ -184,7 +184,13 @@
       CurrentTryOverview,
       MissingResourceAlert,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       // Unique identifier of the item for the report
       // this will be used to filter for previous tries

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

@@ -58,12 +58,18 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
 
   export default {
     name: 'MultiPaneLayout',
-    mixins: [responsiveWindowMixin, responsiveElementMixin],
+    mixins: [responsiveElementMixin],
+    setup() {
+      const { windowHeight } = useKResponsiveWindow();
+      return {
+        windowHeight,
+      };
+    },
     computed: {
       styles() {
         return {

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

@@ -239,7 +239,7 @@
   import { mapGetters, mapState } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
@@ -288,11 +288,14 @@
       LogoutSideNavEntry,
       BottomNavigationBar,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin, responsiveElementMixin, navComponentsMixin],
+    mixins: [commonCoreStrings, responsiveElementMixin, navComponentsMixin],
     setup() {
+      const { windowIsSmall, windowIsLarge } = useKResponsiveWindow();
       const { isLearnerOnlyImport } = useUser();
       const { status, lastSynced } = useUserSyncStatus();
       return {
+        windowIsLarge,
+        windowIsSmall,
         isLearnerOnlyImport,
         themeConfig,
         userSyncStatus: status,

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

@@ -21,15 +21,13 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import PointsIcon from 'kolibri.coreVue.components.PointsIcon';
 
   export default {
     name: 'TotalPoints',
     components: {
       PointsIcon,
     },
-    mixins: [responsiveWindowMixin],
     computed: {
       ...mapGetters(['totalPoints', 'currentUserId', 'isUserLoggedIn']),
     },

kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue

@@ -43,7 +43,7 @@
 <script>
 
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { compareLanguages } from 'kolibri.utils.sortLanguages';
   import languageSwitcherMixin from './mixin';
   import LanguageSwitcherModal from './LanguageSwitcherModal';
@@ -55,7 +55,13 @@
     components: {
       LanguageSwitcherModal,
     },
-    mixins: [responsiveWindowMixin, languageSwitcherMixin],
+    mixins: [languageSwitcherMixin],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     data() {
       return {
         showLanguageModal: false,

kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue

@@ -44,15 +44,21 @@
 <script>
 
   import { currentLanguage } from 'kolibri.utils.i18n';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import languageSwitcherMixin from './mixin';
 
   export default {
     name: 'LanguageSwitcherModal',
     components: { FocusTrap },
-    mixins: [commonCoreStrings, languageSwitcherMixin, responsiveWindowMixin],
+    mixins: [commonCoreStrings, languageSwitcherMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         selectedLanguage: currentLanguage,

kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue

@@ -105,14 +105,20 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonTaskStrings from 'kolibri.coreVue.mixins.commonTaskStrings';
   import { TaskStatuses, TaskTypes } from '../../utils/syncTaskUtils';
 
   export default {
     name: 'FacilityTaskPanelDetails',
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonTaskStrings],
+    mixins: [commonCoreStrings, commonTaskStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       task: {
         type: Object,

kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue

@@ -29,7 +29,7 @@
   import { now } from 'kolibri.utils.serverClock';
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { DemographicConstants } from 'kolibri.coreVue.vuex.constants';
 
   const { NOT_SPECIFIED } = DemographicConstants;
@@ -43,7 +43,13 @@
     components: {
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       value: {
         type: String,