Add language footer to sign in and sign up page.

Author: rtibbles

kolibri/core/assets/src/core-app/apiSpec.js

@@ -40,6 +40,7 @@ import kNavbar from '../views/k-navbar';
 import kNavbarButton from '../views/k-navbar/button';
 import kNavbarLink from '../views/k-navbar/link';
 import logo from '../views/logo';
+import languageSwitcher from '../views/language-switcher';
 import immersiveFullScreen from '../views/immersive-full-screen';
 import elapsedTime from '../views/elapsed-time';
 import pointsIcon from '../views/points-icon';
@@ -104,6 +105,7 @@ export default {
       kBreadcrumbs,
       kCheckbox,
       kRadioButton,
+      languageSwitcher,
     },
     router,
     mixins: {

kolibri/core/assets/src/views/app-bar/index.vue

@@ -34,7 +34,7 @@
           @select="optionSelected"
         />
       </ui-button>
-      <language-switcher v-if="showLanguageModal" @close="showLanguageModal=false"/>
+      <language-switcher :modalOpen="showLanguageModal" @close="showLanguageModal=false"/>
     </div>
   </ui-toolbar>
 

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

@@ -1,15 +1,29 @@
 <template>
 
-  <core-modal :title="$tr('changeLanguageModalHeader')" @cancel="$emit('close')">
-    <p>{{ $tr('changeLanguageSubHeader') }}</p>
-    <p v-for="language in languageOptions" :class="selectedLanguage.code===language.code ? 'selected' : 'choice'" @click="selectedLanguage=language">
-      {{ language.name }}
-    </p>
-    <div class="footer">
-      <k-button :text="$tr('cancelButtonText')" :raised="false" :disabled="disabled" @click="$emit('close')"/>
-      <k-button :text="$tr('confirmButtonText')" :primary="true" :disabled="disabled" @click="switchLanguage"/>
+  <div>
+    <div class="page-footer">
+      <div class="lang-container">
+        <p class="prompt" v-if="!isMobile">{{ $tr('changeLanguagePrompt') }}</p>
+        <p v-for="language in footerLanguageOptions" :class="selectedLanguage.code===language.code ? 'selected' : 'choice'" @click="setAndSwitchLanguage(language)">
+          {{ language.name }}
+        </p>
+      </div>
+      <k-button style="margin-top: 0" :text="$tr('moreLanguageButtonText')" :raised="false" @click="setModalOpen"/>
     </div>
-  </core-modal>
+    <core-modal
+      v-if="showModal"
+      :title="$tr('changeLanguageModalHeader')"
+      @cancel="closeModal">
+      <p>{{ $tr('changeLanguageSubHeader') }}</p>
+      <p v-for="language in languageOptions" :class="selectedLanguage.code===language.code ? 'selected' : 'choice'" @click="selectedLanguage=language">
+        {{ language.name }}
+      </p>
+      <div class="footer">
+        <k-button :text="$tr('cancelButtonText')" :raised="false" :disabled="disabled" @click="closeModal"/>
+        <k-button :text="$tr('confirmButtonText')" :primary="true" :disabled="disabled" @click="switchLanguage"/>
+      </div>
+    </core-modal>
+  </div>
 
 </template>
 
@@ -20,36 +34,70 @@
   import kButton from 'kolibri.coreVue.components.kButton';
   import { httpClient } from 'kolibri.client';
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
+  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
   export default {
     name: 'languageSwitcherModalDialog',
+    mixins: [responsiveWindow],
     components: { coreModal, kButton },
     $trs: {
       changeLanguageModalHeader: 'Change language',
       changeLanguageSubHeader: 'Select the language you want to view Kolibri in',
+      changeLanguagePrompt: 'Select language:',
+      moreLanguageButtonText: 'More languages',
       cancelButtonText: 'Cancel',
       confirmButtonText: 'Confirm',
     },
     computed: {
       languageOptions() {
         return Object.keys(availableLanguages)
           .sort((a, b) => {
-            if (a === currentLanguage || a[0] > b[0]) {
+            if (a === currentLanguage) {
               return -1;
             }
-            if (b === currentLanguage || b[0] > a[0]) {
+            if (b === currentLanguage) {
+              return 1;
+            }
+            if (a[0] < b[0]) {
+              return -1;
+            }
+            if (b[0] < a[0]) {
               return 1;
             }
             return 0;
           })
           .map(key => availableLanguages[key]);
       },
+      footerLanguageOptions() {
+        if (this.isMobile) {
+          return this.languageOptions.filter(lang => lang.code !== currentLanguage).slice(0, 3);
+        }
+        return this.languageOptions.slice(0, 6);
+      },
       currentLanguageName() {
         return availableLanguages[currentLanguage].name;
       },
+      showModal() {
+        console.log(this.internalModalOpen);
+        return this.modalOpen || this.internalModalOpen;
+      },
+      isMobile() {
+        return this.windowSize.breakpoint <= 1;
+      },
+    },
+    props: {
+      footer: {
+        type: Boolean,
+        default: false,
+      },
+      modalOpen: {
+        type: Boolean,
+        default: false,
+      },
     },
     data: () => ({
       disabled: false,
       selectedLanguage: availableLanguages[currentLanguage],
+      internalModalOpen: false,
     }),
     methods: {
       switchLanguage() {
@@ -65,6 +113,18 @@
           global.location.reload(true);
         });
       },
+      setAndSwitchLanguage(language) {
+        this.selectedLanguage = language;
+        this.switchLanguage();
+      },
+      closeModal() {
+        this.internalModalOpen = false;
+        this.$emit('close');
+      },
+      setModalOpen() {
+        console.log('setting open');
+        this.internalModalOpen = true;
+      },
     },
   };
 
@@ -78,6 +138,9 @@
   h1, p
     color: black
 
+  .more-button
+    float: left
+
   .selected
     font-weight: bold
 
@@ -86,4 +149,23 @@
     text-decoration: underline $core-action-normal
     cursor: pointer
 
+
+  .page-footer
+    padding-left: 32px
+    padding-top: 16px
+    padding-bottom: 16px
+    .lang-container
+      display: inline-block
+      width: 40%
+      p
+        float: left
+        padding-left: 10px
+        margin: 0
+    button
+      float: right
+      position: absolute
+
+  .prompt
+    padding-right: 16px
+
 </style>

kolibri/plugins/user/assets/src/views/index.vue

@@ -1,8 +1,12 @@
 <template>
 
-  <core-base :navBarNeeded="navBarNeeded" :topLevelPageName="topLevelPageName" :appBarTitle="appBarTitle">
-    <component :is="currentPage"/>
-  </core-base>
+  <div>
+    <core-base :navBarNeeded="navBarNeeded" :topLevelPageName="topLevelPageName" :appBarTitle="appBarTitle">
+      <component v-if="navBarNeeded" :is="currentPage"/>
+    </core-base>
+    <component v-if="!navBarNeeded" :is="currentPage"/>
+    <language-switcher v-if="!navBarNeeded" :footer="true"/>
+  </div>
 
 </template>
 
@@ -16,6 +20,7 @@
   import signInPage from './sign-in-page';
   import signUpPage from './sign-up-page';
   import profilePage from './profile-page';
+  import languageSwitcher from 'kolibri.coreVue.components.languageSwitcher';
   export default {
     $trs: { userProfileTitle: 'Profile' },
     name: 'userPlugin',
@@ -24,6 +29,7 @@
       signInPage,
       signUpPage,
       profilePage,
+      languageSwitcher,
     },
     computed: {
       appBarTitle() {