From 24bb5d4a9daabb56c03f718964efeafd2668f7ac Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 13 Oct 2020 17:54:06 +0200 Subject: [PATCH] Language toggle. --- backend/i18n/frontend_en.json | 1 + backend/i18n/frontend_it.json | 3 +- backend/i18n/frontend_nl.json | 1 + backend/i18n/source/frontend_en.json | 1 + backend/i18n/source/frontend_it.json | 2 +- .../internal/profile-menu.component.html | 20 ++++++++--- .../internal/profile-menu.component.scss | 16 ++++++--- .../pages/internal/profile-menu.component.ts | 35 +++++++++++++++++-- 8 files changed, 65 insertions(+), 14 deletions(-) diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json index ef0ab7b06..c5655d7a0 100644 --- a/backend/i18n/frontend_en.json +++ b/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", diff --git a/backend/i18n/frontend_it.json b/backend/i18n/frontend_it.json index 5f363bfdc..4176a6bf6 100644 --- a/backend/i18n/frontend_it.json +++ b/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", diff --git a/backend/i18n/frontend_nl.json b/backend/i18n/frontend_nl.json index 3ff18cbad..a90523bcb 100644 --- a/backend/i18n/frontend_nl.json +++ b/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", diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json index ef0ab7b06..c5655d7a0 100644 --- a/backend/i18n/source/frontend_en.json +++ b/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", diff --git a/backend/i18n/source/frontend_it.json b/backend/i18n/source/frontend_it.json index a27b7c9e1..a7db499d6 100644 --- a/backend/i18n/source/frontend_it.json +++ b/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.", diff --git a/frontend/app/shell/pages/internal/profile-menu.component.html b/frontend/app/shell/pages/internal/profile-menu.component.html index 1ff7839ca..6c58a9fb8 100644 --- a/frontend/app/shell/pages/internal/profile-menu.component.html +++ b/frontend/app/shell/pages/internal/profile-menu.component.html @@ -8,16 +8,14 @@ - - {{snapshot.profileDisplayName}} - +
- +
{{ 'profile.userEmail' | sqxTranslate }}
{{snapshot.profileEmail}} @@ -29,10 +27,22 @@ {{ 'common.administration' | sqxTranslate }} - + {{ 'profile.title' | sqxTranslate }} +
+ + {{ 'common.language' | sqxTranslate }} + + +
+ + {{ availableLanguage.name }} + +
+
+
diff --git a/frontend/app/shell/pages/internal/profile-menu.component.scss b/frontend/app/shell/pages/internal/profile-menu.component.scss index d1e888645..5ed138556 100644 --- a/frontend/app/shell/pages/internal/profile-menu.component.scss +++ b/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); + } } } diff --git a/frontend/app/shell/pages/internal/profile-menu.component.ts b/frontend/app/shell/pages/internal/profile-menu.component.ts index bc37a1ced..a1eb8972b 100644 --- a/frontend/app/shell/pages/internal/profile-menu.component.ts +++ b/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 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 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(); }