Replace KResponsiveWindow mixin by useKResponsiveWindow composable

[MisRob]

Summary

We extensively use KResponsiveWindow (provides reactive window's size information) as mixin in Kolibri. The latest version of Kolibri Design System (KDS) installed on the Kolibri's develop branch offers better alternative, useKResponsiveWindow composable. This issue encapsulates a group of issues whose common goal is to completely get rid of KResponsiveWindow mixin in favor of using useKResponsiveWindow composable in the whole Kolibri.

Note that the ways we import the mixin in our files are not always consistent, for example you may see:

• import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
• import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';

You can use Vue Devtools and codebase search to find out pages that need to be previewed in the app based on the components/files you're modifying. Please test your changes before opening a pull request (see acceptance criteria).

Acceptance criteria (for each one of the issues listed below)

• useKResponsiveWindow composable is used instead of KResponsiveWindow mixin in an area specified by a sub-issue
• All occurences of properties provided by KResponsiveWindow (windowIsSmall, windowBreakpoint, etc., see the full list here) are imported from useKResponsiveWindow composable in a file where KResponsiveWindow mixin is being removed
• Whatever logic was KResponsiveWindow mixin used for (for example, using different styling for mobile devices) is manually tested and still works as expected with useKResponsiveWindow composable
• There is a list of affected pages in a pull request description (e.g. their URLs)

References

• KResponsiveWindow documentation page. Also see the "Usage" section to understand both approaches.
• Example of KResponsiveWindow mixin in Kolibri:

  • kolibri/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue

    Line 197 in b38ad51

    mixins: [KResponsiveWindowMixin, commonLearnStrings, commonCoreStrings],

  • kolibri/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue

    Line 422 in b38ad51

    if (this.windowBreakpoint === 1) {

• Example of useKResponsiveWindow composable in Kolibri:

  • kolibri/kolibri/core/assets/src/views/Navbar/NavbarLink.vue

    Line 31 in b38ad51

    import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';

  • kolibri/kolibri/core/assets/src/views/Navbar/NavbarLink.vue

    Line 7 in b38ad51

    :style="windowIsSmall ? smallScreenOverrides : {}"

• Vue's Composables Documentation

Sub-issues

Sub-issues

Preview Give feedback

1. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Device plugin #11322
   DEV: frontend P2 - normal good first issue help wanted +4
   
2. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Facility plugin #11323
   DEV: frontend P2 - normal good first issue help wanted +4
   
3. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Learn plugin #11324
   DEV: frontend P2 - normal good first issue help wanted +4
   
4. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Coach plugin #11325
   DEV: frontend P2 - normal good first issue help wanted +4
   
5. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - E-pub Viewer plugin #11326
   DEV: frontend P2 - normal good first issue help wanted +4
   
6. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Media Player plugin #11327
   DEV: frontend P2 - normal good first issue help wanted +4
   
7. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Pdf Viewer plugin #11328
   DEV: frontend P2 - normal good first issue help wanted +4
   
8. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Perseus Viewer plugin #11329
   DEV: frontend P2 - normal good first issue help wanted +4
   
9. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Setup Wizard plugin #11330
   DEV: frontend P2 - normal good first issue help wanted +4
   
10. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Slideshow Viewer plugin #11331
    DEV: frontend P2 - normal good first issue help wanted +4
    
11. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - User Auth plugin #11332
    DEV: frontend P2 - normal good first issue help wanted +4
    
12. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - User Profile plugin #11333
    DEV: frontend P2 - normal good first issue help wanted +4
    
13. Replace KResponsiveWindow mixin by useKResponsiveWindow composable - Core #11335
    DEV: frontend P2 - normal good first issue help wanted +4
    

[MisRob]

Note that the current version of useKResponsiveWindow might be buggy on some occasions, e.g. #11212 is caused by it. This will be fixed soon learningequality/kolibri-design-system#453

[MisRob]

If you'd like to contribute, please don't ask for an assignment of this issue, but rather in a sub-issue.

[thesujai]

Hey @MisRob, I was participating in HactoberFest.
Would it be possible for you to add a hacktoberfest-accepted label in my PRs for the sub-issues. I would be really thankful to you. As they asked we can ask the maintainers to add just the label in PR if they aren't participating in the fest.
Here is the link: https://hacktoberfest.com/participation/#maintainers
Its fine if for some reasons you aren't able to do so:)

[MisRob]

Hello @thesujai, I will reach out back in a few days in regards to Hactoberfest

[thesujai]

Okay @MisRob

[MisRob]

@thesujai Answered here #11356 (comment)