inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3126] i18n support for info drawer tabs (#4698)

Browse Source 
* [ADF-3126] i18n support for info drawer tabs

* fix tests

* code fixes
This commit is contained in:
Denys Vuika
2019-05-07 17:31:22 +01:00
committed by Eugenio Romano
parent 58f7a2d0ee
commit 0e2e5e35a0
8 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demo-shell/src/app/components/file-view/file-view.component.html
View File

@@ -3,11 +3,11 @@
<ng-template let-node="node" #sidebarRightTemplate> <ng-template let-node="node" #sidebarRightTemplate>
<adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate"> <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
<adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate"> <adf-info-drawer-tab label="APP.INFO_DRAWER.COMMENTS">
<adf-comments [nodeId]="nodeId" [readOnly]="!isCommentEnabled"></adf-comments> <adf-comments [nodeId]="nodeId" [readOnly]="!isCommentEnabled"></adf-comments>
</adf-info-drawer-tab> </adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'APP.INFO_DRAWER.PROPERTIES' | translate"> <adf-info-drawer-tab label="APP.INFO_DRAWER.PROPERTIES">
<adf-content-metadata-card *ngIf="isPreset" [node]="node" <adf-content-metadata-card *ngIf="isPreset" [node]="node"
[multi]="multi" [multi]="multi"
[preset]="customPreset" [preset]="customPreset"
@@ -104,7 +104,7 @@
</adf-info-drawer-tab> </adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate"> <adf-info-drawer-tab label="APP.INFO_DRAWER.VERSIONS">
<mat-card> <mat-card>
<mat-card-content> <mat-card-content>
<adf-version-manager [node]="node" <adf-version-manager [node]="node"
@@ -120,7 +120,7 @@
<ng-template let-node="node" #sidebarLeftTemplate> <ng-template let-node="node" #sidebarLeftTemplate>
<adf-info-drawer [title]="'Viewer Options'"> <adf-info-drawer [title]="'Viewer Options'">
<adf-info-drawer-tab [label]="'Settings'"> <adf-info-drawer-tab label="Settings">
<p class="toggle"> <p class="toggle">
<mat-slide-toggle <mat-slide-toggle
id="adf-switch-custoname" id="adf-switch-custoname"

4
demo-shell/src/app/components/files/files.component.html
View File

@@ -447,13 +447,13 @@
<div info-drawer-content> <div info-drawer-content>
<adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]"> <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
<adf-info-drawer-tab [label]="'Properties'"> <adf-info-drawer-tab label="Properties">
<adf-content-metadata-card <adf-content-metadata-card
[node]="documentList.selection[0].entry" [node]="documentList.selection[0].entry"
[displayEmpty]="displayEmptyMetadata"> [displayEmpty]="displayEmptyMetadata">
</adf-content-metadata-card> </adf-content-metadata-card>
</adf-info-drawer-tab> </adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'Versions'"> <adf-info-drawer-tab label="Versions">
<ng-container *ngIf="hasOneFileSelected();else choose_document_template"> <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
<ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions"> <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
<adf-version-manager <adf-version-manager

2
docs/core/components/info-drawer-tab.component.md
View File

@@ -56,7 +56,7 @@ You can also combine `icon` and `label` properties.
| Name | Type | Default value | Description | | Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- | | ---- | ---- | ------------- | ----------- |
| icon | `string` | null | Icon to render for the tab. | | icon | `string` | null | Icon to render for the tab. |
| label | `string` | "" | The title of the tab. | | label | `string` | "" | The title of the tab (string or translation key). |
## Details ## Details

2
docs/core/components/info-drawer.component.md
View File

@@ -50,7 +50,7 @@ have any content you like:
| Name | Type | Default value | Description | | Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- | | ---- | ---- | ------------- | ----------- |
| selectedIndex | `number` | 0 | The selected index tab. | | selectedIndex | `number` | 0 | The selected index tab. |
| title | `string \| null` | null | The title of the info drawer. | | title | `string \| null` | null | The title of the info drawer (string or translation key). |
### Events ### Events

6
lib/core/info-drawer/info-drawer.component.html
View File

@@ -1,5 +1,5 @@
<adf-info-drawer-layout> <adf-info-drawer-layout>
<div *ngIf="title" info-drawer-title>{{title}}</div> <div *ngIf="title" info-drawer-title>{{ title | translate }}</div>
<ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content> <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
<ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content> <ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content>
@@ -9,12 +9,12 @@
<ng-template #tabLayout> <ng-template #tabLayout>
<mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)"> <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
<mat-tab *ngFor="let contentBlock of contentBlocks" <mat-tab *ngFor="let contentBlock of contentBlocks"
[label]="contentBlock.label" [label]="contentBlock.label | translate"
class="adf-info-drawer-tab"> class="adf-info-drawer-tab">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon *ngIf="contentBlock.icon">{{ contentBlock.icon }}</mat-icon> <mat-icon *ngIf="contentBlock.icon">{{ contentBlock.icon }}</mat-icon>
<span *ngIf="contentBlock.label">{{ contentBlock.label }}</span> <span *ngIf="contentBlock.label">{{ contentBlock.label | translate }}</span>
</ng-template> </ng-template>
<ng-container *ngTemplateOutlet="contentBlock.content"></ng-container> <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>

10
lib/core/info-drawer/info-drawer.component.spec.ts
View File

@@ -23,11 +23,14 @@ import { InfoDrawerComponent } from './info-drawer.component';
import { setupTestBed } from '../testing/setupTestBed'; import { setupTestBed } from '../testing/setupTestBed';
import { CoreModule } from '../core.module'; import { CoreModule } from '../core.module';
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { of } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
describe('InfoDrawerComponent', () => { describe('InfoDrawerComponent', () => {
let element: HTMLElement; let element: HTMLElement;
let component: InfoDrawerComponent; let component: InfoDrawerComponent;
let fixture: ComponentFixture<InfoDrawerComponent>; let fixture: ComponentFixture<InfoDrawerComponent>;
let translateService: TranslateService;
setupTestBed({ setupTestBed({
imports: [ imports: [
@@ -37,6 +40,9 @@ describe('InfoDrawerComponent', () => {
}); });
beforeEach(() => { beforeEach(() => {
translateService = TestBed.get(TranslateService);
spyOn(translateService, 'get').and.callFake((key) => of(key));
fixture = TestBed.createComponent(InfoDrawerComponent); fixture = TestBed.createComponent(InfoDrawerComponent);
element = fixture.nativeElement; element = fixture.nativeElement;
component = fixture.componentInstance; component = fixture.componentInstance;
@@ -87,6 +93,7 @@ class CustomInfoDrawerComponent extends InfoDrawerComponent {
describe('Custom InfoDrawer', () => { describe('Custom InfoDrawer', () => {
let fixture: ComponentFixture<CustomInfoDrawerComponent>; let fixture: ComponentFixture<CustomInfoDrawerComponent>;
let component: CustomInfoDrawerComponent; let component: CustomInfoDrawerComponent;
let translateService: TranslateService;
setupTestBed({ setupTestBed({
imports: [ imports: [
@@ -99,6 +106,9 @@ describe('Custom InfoDrawer', () => {
}); });
beforeEach(() => { beforeEach(() => {
translateService = TestBed.get(TranslateService);
spyOn(translateService, 'get').and.callFake((key) => of(key));
fixture = TestBed.createComponent(CustomInfoDrawerComponent); fixture = TestBed.createComponent(CustomInfoDrawerComponent);
fixture.detectChanges(); fixture.detectChanges();
component = fixture.componentInstance; component = fixture.componentInstance;

4
lib/core/info-drawer/info-drawer.module.ts
View File

@@ -21,6 +21,7 @@ import { MaterialModule } from '../material.module';
import { InfoDrawerLayoutComponent, InfoDrawerTitleDirective, InfoDrawerButtonsDirective, InfoDrawerContentDirective } from './info-drawer-layout.component'; import { InfoDrawerLayoutComponent, InfoDrawerTitleDirective, InfoDrawerButtonsDirective, InfoDrawerContentDirective } from './info-drawer-layout.component';
import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.component'; import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.component';
import { TranslateModule } from '@ngx-translate/core';
export function declarations() { export function declarations() {
return [ return [
@@ -36,7 +37,8 @@ export function declarations() {
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
MaterialModule MaterialModule,
TranslateModule.forChild()
], ],
declarations: declarations(), declarations: declarations(),
exports: declarations() exports: declarations()

6
lib/process-services/task-list/components/task-details.component.html
View File

@@ -79,8 +79,8 @@
</div> </div>
</div> </div>
<div class="adf-task-details-core-sidebar"> <div class="adf-task-details-core-sidebar">
<adf-info-drawer *ngIf="showHeaderContent" title="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE' | translate }}" id="adf-task-details-core-sidebar-drawer" class="adf-task-details-core-sidebar-drawer"> <adf-info-drawer *ngIf="showHeaderContent" title="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE" id="adf-task-details-core-sidebar-drawer" class="adf-task-details-core-sidebar-drawer">
<adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE' | translate }}"> <adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE">
<div class="adf-assignment-container" *ngIf="showAssignee"> <div class="adf-assignment-container" *ngIf="showAssignee">
<adf-people-search <adf-people-search
(searchPeople)="searchUser($event)" (searchPeople)="searchUser($event)"
@@ -107,7 +107,7 @@
</adf-people> </adf-people>
</adf-info-drawer-tab> </adf-info-drawer-tab>
<adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE' | translate }}"> <adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE">
<mat-card *ngIf="showComments"> <mat-card *ngIf="showComments">
<mat-card-content> <mat-card-content>
<adf-comments #activitiComments <adf-comments #activitiComments