Language toggle.

backend/i18n/frontend_en.json

@@ -254,6 +254,7 @@
   "common.httpConflict": "Failed to make the update. Another user has made a change. Please reload.",
   "common.httpLimit": "You have exceeded the maximum limit of API calls.",
   "common.label": "Label",
+  "common.language": "Language",
   "common.languages": "Languages",
   "common.latitudeShort": "Lat",
   "common.loading": "Loading",

backend/i18n/frontend_it.json

@@ -21,7 +21,7 @@
   "apps.createBlankApp": "Nuova App.",
   "apps.createBlankAppDescription": "Crea una app vuota senza contenuti o schema.",
   "apps.createBlogApp": "Nuovo blog",
-  "apps.createBlogAppDescription": "Inizia con il nostro blog già pronto per l'uso.",
+  "apps.createBlogAppDescription": "Inizia con un blog.",
   "apps.createFailed": "Non è stato possibile creare l'app. Per favore ricarica.",
   "apps.createIdentityApp": "Nuova Identity App",
   "apps.createIdentityAppDescription": "Crea un app per Squidex Identity.",
@@ -254,6 +254,7 @@
   "common.httpConflict": "Non è stato possibile effettuare l'aggiornamento. Un altro utente ha fatto delle modifiche. Per favore ricarica.",
   "common.httpLimit": "Hai superato il limite massimo di chiamate API.",
   "common.label": "Etichetta",
+  "common.language": "Language",
   "common.languages": "Lingue",
   "common.latitudeShort": "Lat",
   "common.loading": "Caricamento",

backend/i18n/frontend_nl.json

@@ -254,6 +254,7 @@
   "common.httpConflict": "De update is mislukt. Een andere gebruiker heeft een wijziging aangebracht. Laad opnieuw.",
   "common.httpLimit": "Je hebt de maximale limiet van API-aanroepen overschreden.",
   "common.label": "Label",
+  "common.language": "Language",
   "common.languages": "Talen",
   "common.latitudeShort": "Lat",
   "common.loading": "Laden",

backend/i18n/source/frontend_en.json

@@ -254,6 +254,7 @@
   "common.httpConflict": "Failed to make the update. Another user has made a change. Please reload.",
   "common.httpLimit": "You have exceeded the maximum limit of API calls.",
   "common.label": "Label",
+  "common.language": "Language",
   "common.languages": "Languages",
   "common.latitudeShort": "Lat",
   "common.loading": "Loading",

backend/i18n/source/frontend_it.json

@@ -21,7 +21,7 @@
   "apps.createBlankApp": "Nuova App.",
   "apps.createBlankAppDescription": "Crea una app vuota senza contenuti o schema.",
   "apps.createBlogApp": "Nuovo blog",
-  "apps.createBlogAppDescription": "Inizia con il nostro blog già pronto per l'uso.",
+  "apps.createBlogAppDescription": "Inizia con un blog.",
   "apps.createFailed": "Non è stato possibile creare l'app. Per favore ricarica.",
   "apps.createIdentityApp": "Nuova Identity App",
   "apps.createIdentityAppDescription": "Crea un app per Squidex Identity.",

frontend/app/shell/pages/internal/profile-menu.component.html

@@ -8,16 +8,14 @@
         <span class="nav-link dropdown-toggle" (click)="modalMenu.toggle()">
             <span class="user">
                 <img class="user-picture" [src]="snapshot.profileId | sqxUserIdPicture">
-                
-                <span class="profile-name">{{snapshot.profileDisplayName}}</span>
             </span>
         </span>
     </li>
 </ul>
 
-<ng-container *sqxModal="modalMenu;closeAlways:true;onRoot:false">
+<ng-container *sqxModal="modalMenu;onRoot:false">
     <div class="dropdown-menu" [sqxAnchoredTo]="button" [offset]="10" @fade>
-        <a class="dropdown-item dropdown-info" [sqxPopupLink]="snapshot.profileUrl">
+        <a class="dropdown-item dropdown-info" [sqxPopupLink]="snapshot.profileUrl" (click)="modalMenu.hide()">
             <div>{{ 'profile.userEmail' | sqxTranslate }}</div>
     
             <strong>{{snapshot.profileEmail}}</strong>
@@ -29,10 +27,22 @@
             {{ 'common.administration' | sqxTranslate }}
         </a>
 
-        <a class="dropdown-item" [sqxPopupLink]="snapshot.profileUrl">
+        <a class="dropdown-item" [sqxPopupLink]="snapshot.profileUrl" (click)="modalMenu.hide()">
             {{ 'profile.title' | sqxTranslate }}
         </a>
 
+        <div class="dropdown-submenu">
+            <a class="dropdown-item dropdown-toggle" (click)="toggle()">
+                {{ 'common.language' | sqxTranslate }}
+            </a>
+
+            <div class="dropdown-menu" [class.open]="showSubmenu">
+                <a class="dropdown-item" *ngFor="let availableLanguage of languages" [class.active]="availableLanguage.code === language" (click)="changeLanguage(availableLanguage.code)">
+                    {{ availableLanguage.name }}
+                </a>
+            </div>
+          </div>
+
         <div class="dropdown-divider"></div>
 
         <a class="dropdown-item" (click)="logout()" sqxExternalLink>

frontend/app/shell/pages/internal/profile-menu.component.scss

@@ -12,11 +12,19 @@
         font-weight: normal;
         line-height: 1.4rem;
     }
-}
 
-@media (max-width: 1200px) {
-    .profile-name {
-        display: none;
+    &-menu {
+        &.open {
+            display: block;
+        }
+    }
+
+    &-submenu {
+        position: relative;
+
+        .dropdown-menu {
+            @include absolute(0, null, null, -10rem);
+        }
     }
 }
 

frontend/app/shell/pages/internal/profile-menu.component.ts

@@ -6,7 +6,7 @@
  */
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { ApiUrlConfig, AuthService, fadeAnimation, ModalModel, StatefulComponent, UIState } from '@app/shared';
+import { ApiUrlConfig, AuthService, fadeAnimation, ModalModel, StatefulComponent, UIOptions, UIState } from '@app/shared';
 
 interface State {
     // The display name of the user.
@@ -34,9 +34,24 @@ interface State {
 export class ProfileMenuComponent extends StatefulComponent<State> implements OnInit {
     public modalMenu = new ModalModel();
 
+    public showSubmenu = false;
+
+    public language = this.uiOptions.get('more.culture');
+    public languages: ReadonlyArray<{ code: string, name: string }> = [{
+        code: 'en',
+        name: 'English'
+    }, {
+        code: 'nl',
+        name: 'Hollandske'
+    }, {
+        code: 'it',
+        name: 'Italiano'
+    }];
+
     constructor(changeDetector: ChangeDetectorRef, apiUrl: ApiUrlConfig,
         public readonly uiState: UIState,
-        private readonly authService: AuthService
+        public readonly uiOptions: UIOptions,
+        public readonly authService: AuthService
     ) {
         super(changeDetector, {
             profileDisplayName: '',
@@ -55,11 +70,25 @@ export class ProfileMenuComponent extends StatefulComponent<State> implements On
                         const profileEmail = user.email;
                         const profileDisplayName = user.displayName;
 
-                        this.next(s => ({ ...s, profileId, profileEmail, profileDisplayName }));
+                        this.next(s => ({ ...s,
+                            profileId,
+                            profileEmail,
+                            profileDisplayName
+                        }));
                     }
                 }));
     }
 
+    public changeLanguage(code: string) {
+        document.cookie = `.AspNetCore.Culture=c=${code}|uic=${code}`;
+
+        location.reload();
+    }
+
+    public toggle() {
+        this.showSubmenu = !this.showSubmenu;
+    }
+
     public logout() {
         this.authService.logoutRedirect();
     }