Implement language switcher as modal.

Author: rtibbles

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

@@ -19,10 +19,13 @@
         ref="accountButton"
         class="username-text">
         <template v-if="windowSize.breakpoint > 2">
-          {{ username }}
-          <template v-if="isSuperuser">{{ $tr('superuser') }}</template>
-          <template v-if="isAdmin">{{ $tr('admin') }}</template>
-          <template v-if="isCoach">{{ $tr('coach') }}</template>
+          <template v-if="isUserLoggedIn">
+            {{ username }}
+            <template v-if="isSuperuser">{{ $tr('superuser') }}</template>
+            <template v-if="isAdmin">{{ $tr('admin') }}</template>
+            <template v-if="isCoach">{{ $tr('coach') }}</template>
+          </template>
+          <template v-else>{{ $tr('guest') }}</template>
         </template>
         <ui-menu
           slot="dropdown"
@@ -31,14 +34,7 @@
           @select="optionSelected"
         />
       </ui-button>
-      <a v-else href="/user">
-        <ui-button
-          type="primary"
-          color="primary"
-          :ariaLabel="$tr('signIn')">
-          {{ $tr('signIn') }}
-        </ui-button>
-      </a>
+      <language-switcher v-if="showLanguageModal" @close="showLanguageModal=false"/>
     </div>
   </ui-toolbar>
 
@@ -60,6 +56,8 @@
   import uiIconButton from 'keen-ui/src/UiIconButton';
   import uiMenu from 'keen-ui/src/UiMenu';
   import uiButton from 'keen-ui/src/UiButton';
+  import { redirectBrowser } from '../../utils/browser';
+  import languageSwitcher from '../language-switcher';
   export default {
     mixins: [responsiveWindow],
     name: 'appBar',
@@ -71,6 +69,8 @@
       superuser: '(Device owner)',
       admin: '(Admin)',
       coach: '(Coach)',
+      guest: 'Guest',
+      languageSwitchMenuOption: 'Change language',
     },
     props: {
       title: {
@@ -86,23 +86,41 @@
         required: true,
       },
     },
+    data: () => ({
+      showLanguageModal: false,
+    }),
     components: {
       uiToolbar,
       uiIconButton,
       uiMenu,
       uiButton,
+      languageSwitcher,
     },
     computed: {
       accountMenuOptions() {
+        const changeLanguage = {
+          id: 'language',
+          label: this.$tr('languageSwitchMenuOption'),
+        };
+        if (this.isUserLoggedIn) {
+          return [
+            {
+              id: 'profile',
+              label: this.$tr('profile'),
+            },
+            changeLanguage,
+            {
+              id: 'signOut',
+              label: this.$tr('signOut'),
+            },
+          ];
+        }
         return [
           {
-            id: 'profile',
-            label: this.$tr('profile'),
-          },
-          {
-            id: 'signOut',
-            label: this.$tr('signOut'),
+            id: 'signIn',
+            label: this.$tr('signIn'),
           },
+          changeLanguage,
         ];
       },
     },
@@ -115,6 +133,10 @@
           case 'signOut':
             this.kolibriLogout();
             break;
+          case 'signIn':
+            redirectBrowser();
+          case 'language':
+            this.showLanguageModal = true;
           default:
             break;
         }

kolibri/core/assets/src/views/core-base.vue

@@ -10,7 +10,6 @@
         :navShown="navShown"
         :height="headerHeight">
         <div slot="app-bar-actions" class="app-bar-actions">
-          <language-switcher/>
           <slot name="app-bar-actions"/>
         </div>
       </app-bar>
@@ -50,7 +49,6 @@
   import sideNav from 'kolibri.coreVue.components.sideNav';
   import errorBox from './error-box';
   import loadingSpinner from 'kolibri.coreVue.components.loadingSpinner';
-  import languageSwitcher from './language-switcher';
   import Vue from 'kolibri.lib.vue';
 
   export default {
@@ -83,7 +81,6 @@
       sideNav,
       errorBox,
       loadingSpinner,
-      languageSwitcher,
     },
     vuex: {
       getters: {

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

@@ -1,56 +1,62 @@
 <template>
 
-  <dropdown-menu
-    :name="currentLanguageName"
-    :options="languageOptions"
-    :inAppBar="inAppBar"
-    :displayDisabledAsSelected="true"
-    :disabled="disabled"
-    type="primary"
-    color="primary"
-    icon="language"
-    @select="switchLanguage"
-  />
+  <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>
+  </core-modal>
 
 </template>
 
 
 <script>
 
-  import orderBy from 'lodash/orderBy';
-  import dropdownMenu from 'kolibri.coreVue.components.dropdownMenu';
+  import coreModal from 'kolibri.coreVue.components.coreModal';
+  import kButton from 'kolibri.coreVue.components.kButton';
   import { httpClient } from 'kolibri.client';
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
   export default {
-    name: 'languageSwitcher',
-    components: { dropdownMenu },
+    name: 'languageSwitcherModalDialog',
+    components: { coreModal, kButton },
+    $trs: {
+      changeLanguageModalHeader: 'Change language',
+      changeLanguageSubHeader: 'Select the language you want to view Kolibri in',
+      cancelButtonText: 'Cancel',
+      confirmButtonText: 'Confirm',
+    },
     computed: {
       languageOptions() {
-        return orderBy(availableLanguages, language => language.code, ['asc']).map(language => ({
-          id: language.code,
-          label: language.name,
-          disabled: language.code === currentLanguage,
-        }));
+        return Object.keys(availableLanguages)
+          .sort((a, b) => {
+            if (a === currentLanguage || a[0] > b[0]) {
+              return -1;
+            }
+            if (b === currentLanguage || b[0] > a[0]) {
+              return 1;
+            }
+            return 0;
+          })
+          .map(key => availableLanguages[key]);
       },
       currentLanguageName() {
         return availableLanguages[currentLanguage].name;
       },
     },
-    props: {
-      inAppBar: {
-        type: Boolean,
-        default: true,
-      },
-    },
     data: () => ({
       disabled: false,
+      selectedLanguage: availableLanguages[currentLanguage],
     }),
     methods: {
-      switchLanguage(language) {
+      switchLanguage() {
         this.disabled = true;
         const path = this.Kolibri.urls['kolibri:set_language']();
         const entity = {
-          language: language.id,
+          language: this.selectedLanguage.code,
         };
         httpClient({
           path,
@@ -65,4 +71,19 @@
 </script>
 
 
-<style lang="stylus"></style>
+<style lang="stylus">
+
+  @require '~kolibri.styles.definitions'
+
+  h1, p
+    color: black
+
+  .selected
+    font-weight: bold
+
+  .choice
+    color: $core-action-normal
+    text-decoration: underline $core-action-normal
+    cursor: pointer
+
+</style>