Merge pull request #1973 from rtibbles/language_switcher

Language switcher

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/styles/main.styl

@@ -28,9 +28,7 @@ html
   // https://davidwalsh.name/html5-boilerplate
   font-size: 100%
   text-size-adjust: 100%
-  overflow: hidden
   box-sizing: border-box
-
   // from normalize v5
   line-height: 1.15
 

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

@@ -10,7 +10,6 @@
     <div slot="actions">
       <slot name="app-bar-actions"/>
       <ui-button
-        v-if="isUserLoggedIn"
         icon="person"
         type="primary"
         color="primary"
@@ -19,10 +18,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 +33,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 :modalOpen="showLanguageModal" @close="showLanguageModal=false"/>
     </div>
   </ui-toolbar>
 
@@ -60,6 +55,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 +68,8 @@
       superuser: '(Device owner)',
       admin: '(Admin)',
       coach: '(Coach)',
+      guest: 'Guest',
+      languageSwitchMenuOption: 'Change language',
     },
     props: {
       title: {
@@ -86,23 +85,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 +132,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: {
@@ -160,7 +157,6 @@
 
   .content-container
     position: absolute
-    overflow-y: scroll
     overflow-x: hidden
     right: 0
     bottom: 0

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

@@ -1,56 +1,101 @@
 <template>
 
-  <dropdown-menu
-    :name="currentLanguageName"
-    :options="languageOptions"
-    :inAppBar="inAppBar"
-    :displayDisabledAsSelected="true"
-    :disabled="disabled"
-    type="primary"
-    color="primary"
-    icon="language"
-    @select="switchLanguage"
-  />
+  <div>
+    <div v-if="footer" class="page-footer">
+      <ul class="language-list">
+        <li v-for="language in languageOptions" :class="selectedLanguage===language.code ? 'selected item' : 'choice item'" @click="setAndSwitchLanguage(language.code)">
+          {{ language.name }}
+        </li>
+      </ul>
+    </div>
+    <core-modal
+      v-if="showModal"
+      :title="$tr('changeLanguageModalHeader')"
+      @cancel="closeModal">
+      <p>{{ $tr('changeLanguageSubHeader') }}</p>
+      <k-radio-button
+        v-for="language in languageOptions"
+        class="choice"
+        :key="language.code"
+        :radiovalue="language.code"
+        :value="selectedLanguage"
+        :label="language.name"
+        v-model="selectedLanguage"
+      />
+      <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>
 
 
 <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 kRadioButton from 'kolibri.coreVue.components.kRadioButton';
   import { httpClient } from 'kolibri.client';
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
   export default {
-    name: 'languageSwitcher',
-    components: { dropdownMenu },
+    name: 'languageSwitcherModalDialog',
+    components: { coreModal, kButton, kRadioButton },
+    $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) {
+              return -1;
+            }
+            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]);
       },
       currentLanguageName() {
         return availableLanguages[currentLanguage].name;
       },
+      showModal() {
+        return this.modalOpen || this.internalModalOpen;
+      },
     },
     props: {
-      inAppBar: {
+      footer: {
+        type: Boolean,
+        default: false,
+      },
+      modalOpen: {
         type: Boolean,
-        default: true,
+        default: false,
       },
     },
     data: () => ({
       disabled: false,
+      selectedLanguage: currentLanguage,
+      internalModalOpen: false,
     }),
     methods: {
-      switchLanguage(language) {
+      switchLanguage() {
         this.disabled = true;
         const path = this.Kolibri.urls['kolibri:set_language']();
         const entity = {
-          language: language.id,
+          language: this.selectedLanguage,
         };
         httpClient({
           path,
@@ -59,10 +104,63 @@
           global.location.reload(true);
         });
       },
+      setAndSwitchLanguage(languageCode) {
+        if (languageCode != this.selectedLanguage) {
+          this.selectedLanguage = languageCode;
+          this.switchLanguage();
+        }
+      },
+      closeModal() {
+        this.internalModalOpen = false;
+        this.$emit('close');
+      },
+      setModalOpen() {
+        console.log('setting open');
+        this.internalModalOpen = true;
+      },
     },
   };
 
 </script>
 
 
-<style lang="stylus"></style>
+<style lang="stylus">
+
+  @require '~kolibri.styles.definitions'
+
+  h1, p
+    color: black
+
+  .choice
+    color: $core-action-normal
+
+  .selected
+    font-weight: bold
+
+  .page-footer
+    padding-left: 32px
+    padding-top: 16px
+    padding-bottom: 16px
+    text-align: center
+    button
+      float: right
+      position: absolute
+
+  .prompt
+    padding-right: 16px
+
+  .language-list
+    list-style: none
+    margin: 0
+    padding: 0
+    text-align: initial
+    display: inline-block
+
+  .item
+    display: inline-block
+    padding-top: 6px
+    padding-right: 20px
+    &.choice
+      cursor: pointer
+
+</style>

kolibri/core/urls.py

@@ -33,11 +33,13 @@
 from __future__ import absolute_import, print_function, unicode_literals
 
 from django.conf import settings
-from django.conf.urls import include, url
+from django.conf.urls import url
 from django.conf.urls.static import static
 from kolibri.content.utils import paths
 from kolibri.plugins.registry import get_urls as plugin_urls
 
+from .views import set_language
+
 app_name = 'kolibri'
 
 
@@ -46,4 +48,4 @@
 urlpatterns += static(paths.get_content_storage_url("/"), document_root=settings.CONTENT_STORAGE_DIR)
 urlpatterns += static(paths.get_content_database_url("/"), document_root=settings.CONTENT_DATABASE_DIR)
 
-urlpatterns += [url(r'^i18n/', include('django.conf.urls.i18n'))]
+urlpatterns += [url(r'^i18n/setlang/$', set_language, name='set_language')]