[ADF-4543] Language Menu - set layout orientation (#4719)

* language entry interface

* pass language object

* set textOrientation

* tests

* update doc

* add rtl language
This commit is contained in:
Cilibiu Bogdan
2019-05-14 14:45:05 +03:00
committed by Denys Vuika
parent 4f13dcc3e2
commit de0f906163
7 changed files with 100 additions and 27 deletions

View File

@@ -96,6 +96,11 @@
{ {
"key": "sv", "key": "sv",
"label": "Swedish" "label": "Swedish"
},
{
"key": "ar",
"label": "Arabic",
"direction": "rtl"
} }
], ],
"search": { "search": {

View File

@@ -51,6 +51,17 @@ The component fetches the list of available languages from `app.config.json`:
] ]
``` ```
For languages that need RTL orientation, `direction` property must be declared. Default is `ltr`.
```json
{
"key": "...",
"label": "...",
"direction": "rtl"
},
```
If no `languages` setting is provided, the component shows only the English language. If no `languages` setting is provided, the component shows only the English language.
### Nested Menu language ### Nested Menu language

View File

@@ -1,2 +1,2 @@
<button mat-menu-item *ngFor="let language of languages" (click)="changeLanguage(language.key)">{{language.label}} <button mat-menu-item *ngFor="let language of languages" (click)="changeLanguage(language)">{{language.label}}
</button> </button>

View File

@@ -20,12 +20,30 @@ import { AppConfigService } from '../app-config/app-config.service';
import { LanguageMenuComponent } from './language-menu.component'; import { LanguageMenuComponent } from './language-menu.component';
import { setupTestBed } from '../testing/setupTestBed'; import { setupTestBed } from '../testing/setupTestBed';
import { CoreTestingModule } from '../testing/core.testing.module'; import { CoreTestingModule } from '../testing/core.testing.module';
import { UserPreferencesService } from '../services/user-preferences.service';
describe('LanguageMenuComponent', () => { describe('LanguageMenuComponent', () => {
let fixture: ComponentFixture<LanguageMenuComponent>; let fixture: ComponentFixture<LanguageMenuComponent>;
let component: LanguageMenuComponent; let component: LanguageMenuComponent;
let appConfig: AppConfigService; let appConfig: AppConfigService;
let userPreferencesService: UserPreferencesService;
const languages = <any> [
{
key: 'fake-key-1',
label: 'fake-label-1'
},
{
key: 'fake-key-2',
label: 'fake-label-2'
},
{
key: 'fake-key-3',
label: 'fake-label-3',
direction: 'rtl'
}
];
setupTestBed({ setupTestBed({
imports: [CoreTestingModule] imports: [CoreTestingModule]
@@ -35,6 +53,7 @@ describe('LanguageMenuComponent', () => {
fixture = TestBed.createComponent(LanguageMenuComponent); fixture = TestBed.createComponent(LanguageMenuComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
appConfig = TestBed.get(AppConfigService); appConfig = TestBed.get(AppConfigService);
userPreferencesService = TestBed.get(UserPreferencesService);
}); });
afterEach(() => { afterEach(() => {
@@ -46,27 +65,40 @@ describe('LanguageMenuComponent', () => {
expect(component.languages).toEqual([{ key: 'en', label: 'English' }]); expect(component.languages).toEqual([{ key: 'en', label: 'English' }]);
appConfig.config.languages = [ appConfig.config.languages = languages;
{
key: 'fake-key-1',
label: 'fake-label-1'
},
{
key: 'fake-key-2',
label: 'fake-label-2'
}
];
component.ngOnInit(); component.ngOnInit();
expect(component.languages).toEqual([ expect(component.languages).toEqual(languages);
{ });
key: 'fake-key-1',
label: 'fake-label-1' it('should change user preference locale', () => {
}, appConfig.config.languages = languages;
{
key: 'fake-key-2', userPreferencesService.locale = 'fake-key-2';
label: 'fake-label-2'
} fixture.detectChanges();
]); component.changeLanguage(languages[0]);
expect(userPreferencesService.locale).toEqual(languages[0].key);
});
it('should set text orientation when laguage direction is declared', () => {
appConfig.config.languages = languages;
userPreferencesService.locale = 'fake-key-1';
const spy = spyOn(userPreferencesService, 'set');
fixture.detectChanges();
component.changeLanguage(languages[2]);
expect(spy.calls.mostRecent().args[0]).toBe('textOrientation', 'rtl');
});
it('should change text orientation to default when laguage direction is not declared', () => {
appConfig.config.languages = languages;
userPreferencesService.locale = 'fake-key-1';
const spy = spyOn(userPreferencesService, 'set');
fixture.detectChanges();
component.changeLanguage(languages[1]);
expect(spy.calls.mostRecent().args[0]).toBe('textOrientation', 'ltr');
}); });
}); });

View File

@@ -18,6 +18,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { AppConfigService, AppConfigValues } from '../app-config/app-config.service'; import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
import { UserPreferencesService } from '../services/user-preferences.service'; import { UserPreferencesService } from '../services/user-preferences.service';
import { LanguageItem } from './language.interface';
@Component({ @Component({
selector: 'adf-language-menu', selector: 'adf-language-menu',
@@ -25,7 +26,7 @@ import { UserPreferencesService } from '../services/user-preferences.service';
}) })
export class LanguageMenuComponent implements OnInit { export class LanguageMenuComponent implements OnInit {
languages: Array<any> = [ languages: Array<LanguageItem> = [
{ key: 'en', label: 'English'} { key: 'en', label: 'English'}
]; ];
@@ -35,14 +36,14 @@ export class LanguageMenuComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
const languagesConfigApp = this.appConfig.get<Array<any>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY); const languagesConfigApp = this.appConfig.get<Array<LanguageItem>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY);
if (languagesConfigApp) { if (languagesConfigApp) {
this.languages = languagesConfigApp; this.languages = languagesConfigApp;
} }
} }
changeLanguage(lang: string) { changeLanguage(language: LanguageItem) {
this.userPreference.locale = lang; this.userPreference.locale = language.key;
this.userPreference.set('textOrientation', language.direction || 'ltr');
} }
} }

View File

@@ -0,0 +1,24 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Direction } from '@angular/cdk/bidi';
export interface LanguageItem {
key: string;
label: string;
direction?: Direction;
}

View File

@@ -16,5 +16,5 @@
*/ */
export * from './language-menu.component'; export * from './language-menu.component';
export * from './language.interface';
export * from './language-menu.module'; export * from './language-menu.module';