Fix language switcher responsiveness

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

@@ -1,35 +1,46 @@
 <template>
 
   <div>
-    <KButtonGroup style="margin-top: 8px; position: relative; left: -16px;">
-      <KIconButton
-        icon="language"
-        aria-hidden="true"
-        tabindex="-1"
-        class="globe"
-        @click="showLanguageModal = true"
-      />
-      <span class="selected" :title="selectedLanguage.english_name">
-        {{ selectedLanguage.lang_name }}
-      </span>
-      <KButton
-        v-for="language in buttonLanguages"
-        :key="language.id"
-        :text="language.lang_name"
-        :title="language.english_name"
-        class="lang"
-        appearance="basic-link"
-        @click="switchLanguage(language.id)"
-      />
-
-      <KButton
-        v-if="numSelectableLanguages > numVisibleLanguageBtns + 1"
-        :text="$tr('showMoreLanguagesSelector')"
-        :primary="false"
-        appearance="flat-button"
-        @click="showLanguageModal = true"
-      />
-    </KButtonGroup>
+    <div class="languages-list">
+      <KListWithOverflow
+        :items="buttonLanguages"
+        :appearanceOverrides="{
+          justifyContent: center ? 'center' : 'flex-start',
+          alignItems: 'center',
+        }"
+      >
+        <template #item="{ item }">
+          <KButton
+            v-if="!item.isSelected"
+            :text="item.lang_name"
+            :title="item.english_name"
+            class="lang px-8"
+            appearance="basic-link"
+            @click="switchLanguage(item.id)"
+          />
+          <SelectedLanguage
+            v-else
+            :selectedLanguage="item"
+            @click="showLanguageModal = true"
+          />
+        </template>
+        <template #more="{ overflowItems }">
+          <div>
+            <SelectedLanguage
+              v-if="overflowItems.length === buttonLanguages.length"
+              :selectedLanguage="selectedLanguage"
+              @click="showLanguageModal = true"
+            />
+            <KButton
+              :text="$tr('showMoreLanguagesSelector')"
+              class="px-8"
+              appearance="flat-button"
+              @click="showLanguageModal = true"
+            />
+          </div>
+        </template>
+      </KListWithOverflow>
+    </div>
     <LanguageSwitcherModal
       v-if="showLanguageModal"
       class="ta-l"
@@ -43,29 +54,24 @@
 <script>
 
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { compareLanguages } from 'kolibri.utils.sortLanguages';
   import languageSwitcherMixin from './mixin';
+  import SelectedLanguage from './SelectedLanguage';
   import LanguageSwitcherModal from './LanguageSwitcherModal';
 
   const prioritizedLanguages = ['en', 'ar', 'es-419', 'hi-in', 'fr-fr', 'sw-tz'];
 
   export default {
     name: 'LanguageSwitcherList',
     components: {
+      SelectedLanguage,
       LanguageSwitcherModal,
     },
     mixins: [languageSwitcherMixin],
-    setup() {
-      const { windowBreakpoint } = useKResponsiveWindow();
-      return {
-        windowBreakpoint,
-      };
-    },
     props: {
-      parentBreakpoint: {
-        type: Number,
-        default: -1,
+      center: {
+        type: Boolean,
+        default: false,
       },
     },
     data() {
@@ -80,38 +86,24 @@
       selectedLanguage() {
         return availableLanguages[currentLanguage];
       },
-      numVisibleLanguageBtns() {
-        // At visibleBtns = 0, only the "More languages" button will show
-        let visibleBtns = 4;
-        if (this.parentBreakpoint < 0) {
-          visibleBtns = this.windowBreakpoint;
-        } else {
-          visibleBtns = this.parentBreakpoint;
-        }
-        return Math.min(4, visibleBtns);
-      },
-      numSelectableLanguages() {
-        return this.selectableLanguages.length;
-      },
       buttonLanguages() {
-        if (this.selectableLanguages.length <= this.numVisibleLanguageBtns + 1) {
-          return this.selectableLanguages.slice().sort(compareLanguages);
-        }
-        return this.selectableLanguages
-          .slice()
-          .sort((a, b) => {
-            const aPriority = prioritizedLanguages.includes(a.id);
-            const bPriority = prioritizedLanguages.includes(b.id);
-            if (aPriority && bPriority) {
-              return compareLanguages(a, b);
-            } else if (aPriority && !bPriority) {
-              return -1;
-            } else if (!aPriority && bPriority) {
-              return 1;
-            }
+        const buttonLanguages = this.selectableLanguages.slice().sort((a, b) => {
+          const aPriority = prioritizedLanguages.includes(a.id);
+          const bPriority = prioritizedLanguages.includes(b.id);
+          if (aPriority && bPriority) {
             return compareLanguages(a, b);
-          })
-          .slice(0, this.numVisibleLanguageBtns);
+          } else if (aPriority && !bPriority) {
+            return -1;
+          } else if (!aPriority && bPriority) {
+            return 1;
+          }
+          return compareLanguages(a, b);
+        });
+        buttonLanguages.unshift({
+          ...this.selectedLanguage,
+          isSelected: true,
+        });
+        return buttonLanguages;
       },
     },
     $trs: {
@@ -134,16 +126,32 @@
     right: -4px;
   }
 
-  .selected {
-    margin-left: 8px;
-  }
-
   .lang {
     @include font-family-language-names;
+
+    /deep/ span {
+      white-space: nowrap !important;
+    }
   }
 
   .ta-l {
     text-align: left;
   }
 
+  .languages-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 8px;
+  }
+
+  .px-8 {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+
+  .lang-icon {
+    min-width: 40px;
+  }
+
 </style>

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

@@ -0,0 +1,51 @@
+<template>
+
+  <div class="selected-language">
+    <KIconButton
+      icon="language"
+      aria-hidden="true"
+      tabindex="-1"
+      class="globe px-8"
+      @click="$emit('click')"
+    />
+    <span class="no-shrink px-8" :title="selectedLanguage.english_name">
+      {{ selectedLanguage.lang_name }}
+    </span>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SelectedLanguage',
+    props: {
+      selectedLanguage: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .selected-language {
+    display: flex;
+    align-items: center;
+  }
+
+  .no-shrink {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .px-8 {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+
+</style>

kolibri/core/package.json

@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.1.1",
+    "kolibri-design-system": "3.2.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/DefaultLanguageForm.vue

@@ -1,12 +1,10 @@
 <template>
 
   <OnboardingStepBase
-    ref="container"
     :title="$tr('languageFormHeader')"
     @continue="handleSubmit"
-    @resize="updateWidth"
   >
-    <LanguageSwitcherList :parentBreakpoint="parentBreakpoint" />
+    <LanguageSwitcherList />
   </OnboardingStepBase>
 
 </template>
@@ -23,41 +21,11 @@
       OnboardingStepBase,
       LanguageSwitcherList,
     },
-    data() {
-      return {
-        parentBreakpoint: 4,
-      };
-    },
-    mounted() {
-      this.updateWidth();
-      window.addEventListener('resize', this.updateWidth);
-    },
-    beforeDestroy() {
-      window.removeEventListener('resize', this.updateWidth);
-    },
     inject: ['wizardService'],
     methods: {
       handleSubmit() {
         this.wizardService.send('CONTINUE');
       },
-      updateWidth() {
-        const element = this.$refs.container.$el;
-        const width = element.offsetWidth;
-        let num = 4;
-
-        if (width < 440) {
-          num = 0;
-        } else if (width < 520) {
-          num = 1;
-        } else if (width < 600) {
-          num = 2;
-        } else if (width < 660) {
-          num = 3;
-        } else {
-          num = 4;
-        }
-        this.parentBreakpoint = num;
-      },
     },
     $trs: {
       languageFormHeader: {

kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue

@@ -1,6 +1,8 @@
 <template>
 
-  <LanguageSwitcherList class="list" />
+  <div class="language-switcher-wrapper">
+    <LanguageSwitcherList center class="list" />
+  </div>
 
 </template>
 
@@ -21,10 +23,17 @@
 
 <style lang="scss" scoped>
 
+  .language-switcher-wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
   .list {
+    flex-grow: 1;
+    max-width: 1000px;
     margin-right: 36px;
     margin-left: 36px;
-    text-align: center;
   }
 
 </style>

yarn.lock

@@ -2405,15 +2405,6 @@ [email protected]:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
-  version "2.2.3"
-  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
-  dependencies:
-    asap "^2.0.3"
-    inline-style-prefixer "^4.0.2"
-    string-hash "^1.1.3"
-
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7816,13 +7807,13 @@ [email protected]:
     vue-intl "^3.1.0"
     xstate "^4.38.3"
 
-kolibri-design-system@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.1.tgz#f140b5732d57432eb6ac02af6a01ba00d227eedf"
-  integrity sha512-cqC3J0ztp2VpGjrs4G0ujgxVYFQb96BXnfqiYg/mmmOVd+mSA2ci3dCFUKYXRtFZQswcLAL2XeaFg0aWpqVdXg==
+kolibri-design-system@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.2.0.tgz#c96de8c09133bf7f60545254233bd042a51554ba"
+  integrity sha512-wZwRRQDv1Xy/FWgBVYXvZZXfELjsDsyS09q3A7wE00VyqTNYj7gZwkKUA35pJ9SOqYTKhJbdNYeWo9N2eXXVaw==
   dependencies:
     "@vue/composition-api" "^1.7.2"
-    aphrodite "git+https://github.com/learningequality/aphrodite.git"
+    aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "^3.0.21"
     css-element-queries "^1.2.0"
     date-fns "^1.30.1"