[ADF-829] i18n support for Viewer (#2489)

* i18n support for viewer

* remove commented out info drawer placeholder

* remove demo buttons

demo-shell-ng2/app/app.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AlfrescoSettingsService, PageTitleService, StorageService } from 'ng2-alfresco-core';
+import { AlfrescoSettingsService, PageTitleService, StorageService, TranslationService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'adf-app',
@@ -30,6 +30,7 @@ export class AppComponent {
 
     constructor(private settingsService: AlfrescoSettingsService,
                 private storage: StorageService,
+                private translateService: TranslationService,
                 pageTitleService: PageTitleService,
                 route: ActivatedRoute,
                 router: Router) {

ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.html

@@ -20,7 +20,7 @@
 
         <button
             id="viewer-previous-page-button"
-            aria-label="previous page"
+            attr.aria-label="{{ 'ADF_VIEWER.ARIA.PREVIOUS_PAGE' | translate }}"
             mat-icon-button
             (click)="previousPage()">
             <mat-icon>keyboard_arrow_up</mat-icon>
@@ -28,28 +28,28 @@
 
         <button
             id="viewer-next-page-button"
-            aria-label="arrow right"
+            attr.aria-label="{{ 'ADF_VIEWER.ARIA.NEXT_PAGE' | translate }}"
             mat-icon-button
             (click)="nextPage()">
             <mat-icon>keyboard_arrow_down</mat-icon>
         </button>
 
         <div>
-            Showing
+            {{ 'ADF_VIEWER.PAGE_LABEL.SHOWING' | translate }}
             <input #page
                 class="adf-pdf-viewer__toolbar-page-selector"
                 type="text"
                 pattern="-?[0-9]*(\.[0-9]+)?"
                 value="{{ displayPage }}"
                 (keyup.enter)="inputPage(page.value)">
-            of {{ totalPages }}
+            {{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}
         </div>
 
         <adf-toolbar-divider></adf-toolbar-divider>
 
         <button
             id="viewer-zoom-in-button"
-            aria-label="zoom in"
+            attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
             mat-icon-button
             (click)="zoomIn()">
             <mat-icon>zoom_in</mat-icon>
@@ -57,7 +57,7 @@
 
         <button
             id="viewer-zoom-out-button"
-            aria-label="zoom out"
+            attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_OUT' | translate }}"
             mat-icon-button
             (click)="zoomOut()">
             <mat-icon>zoom_out</mat-icon>
@@ -65,7 +65,7 @@
 
         <button
             id="viewer-scale-page-button"
-            aria-label="zoom out map"
+            attr.aria-label="{{ 'ADF_VIEWER.ARIA.FIT_PAGE' | translate }}"
             mat-icon-button
             (click)="pageFit()">
             <mat-icon>zoom_out_map</mat-icon>

ng2-components/ng2-alfresco-viewer/src/components/unknown-format/unknown-format.component.html

@@ -1,6 +1,6 @@
 <div class="adf-viewer__unknown-format-view">
     <div>
         <mat-icon class="icon">wifi_tethering</mat-icon>
-        <div class="label">{{'VIEWER.UNKNOWN' | translate}}</div>
+        <div class="label">{{ 'ADF_VIEWER.UNKNOWN_FORMAT' | translate }}</div>
     </div>
 </div>

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html

@@ -12,7 +12,7 @@
                     <button *ngIf="allowGoBack"
                         class="adf-viewer-close-button"
                         mat-icon-button
-                        matTooltip="Back"
+                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.BACK' | translate }}"
                         (click)="onBackButtonClick()">
                         <mat-icon>arrow_back</mat-icon>
                     </button>
@@ -22,7 +22,7 @@
 
                 <ng-container *ngIf="allowOpenWith">
                     <button mat-button [matMenuTriggerFor]="mnuOpenWith">
-                        <span>Open with</span>
+                        <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
                         <mat-icon>arrow_drop_down</mat-icon>
                     </button>
                     <mat-menu #mnuOpenWith="matMenu" [overlapTrigger]="false">
@@ -43,20 +43,20 @@
 
                 <adf-toolbar-divider></adf-toolbar-divider>
 
-                <button *ngIf="allowDownload" mat-icon-button matTooltip="Download" (click)="download()">
+                <button *ngIf="allowDownload" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}" (click)="download()">
                     <mat-icon>file_download</mat-icon>
                 </button>
 
-                <button *ngIf="allowPrint" mat-icon-button matTooltip="Print">
+                <button *ngIf="allowPrint" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}">
                     <mat-icon>print</mat-icon>
                 </button>
 
-                <button *ngIf="allowShare" mat-icon-button matTooltip="Share">
+                <button *ngIf="allowShare" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}">
                     <mat-icon>share</mat-icon>
                 </button>
 
                 <ng-container *ngIf="allowMoreActions">
-                    <button mat-icon-button [matMenuTriggerFor]="mnuMoreActions" matTooltip="More actions">
+                    <button mat-icon-button [matMenuTriggerFor]="mnuMoreActions" matTooltip="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}">
                         <mat-icon>more_vert</mat-icon>
                     </button>
                     <mat-menu #mnuMoreActions="matMenu">
@@ -78,7 +78,7 @@
                 <ng-container *ngIf="allowInfoDrawer">
                     <adf-toolbar-divider></adf-toolbar-divider>
 
-                    <button mat-icon-button matTooltip="Info"
+                    <button mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                         [color]="showInfoDrawer ? 'accent' : 'default'"
                         (click)="showInfoDrawer = !showInfoDrawer">
                         <mat-icon>info_outline</mat-icon>
@@ -90,7 +90,7 @@
 
         <ng-container *ngIf="isLoading">
             <div class="adf-viewer__loading-screen">
-                <h2>Loading</h2>
+                <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
                 <div>
                     <mat-spinner></mat-spinner>
                 </div>
@@ -138,18 +138,7 @@
                 <div class="adf-viewer__info-drawer">
                     <ng-content select="adf-viewer-info-drawer"></ng-content>
                     <ng-container *ngIf="!infoDrawer">
-                        <mat-tab-group md-stretch-tabs>
+                        <!-- todo: default info drawer -->
-                            <mat-tab label="Details">
-                                <mat-card>
-                                    DETAILS
-                                </mat-card>
-                            </mat-tab>
-                            <mat-tab label="Activity">
-                                <mat-card>
-                                    Activity
-                                </mat-card>
-                            </mat-tab>
-                        </mat-tab-group>
                     </ng-container>
                 </div>
             </ng-container>

ng2-components/ng2-alfresco-viewer/src/i18n/en.json

@@ -1,5 +1,26 @@
 {
-    "VIEWER": {
+    "ADF_VIEWER": {
-        "UNKNOWN": "Document preview could not be loaded"
+        "ACTIONS": {
+            "BACK": "Back",
+            "OPEN_WITH": "Open with",
+            "DOWNLOAD": "Download",
+            "PRINT": "Print",
+            "SHARE": "Share",
+            "MORE_ACTIONS": "More actions",
+            "INFO": "Info"
+        },
+        "ARIA": {
+            "PREVIOUS_PAGE": "Previous page",
+            "NEXT_PAGE": "Next page",
+            "ZOOM_IN": "Zoom in",
+            "ZOOM_OUT": "Zoom out",
+            "FIT_PAGE": "Fit page"
+        },
+        "PAGE_LABEL": {
+            "SHOWING": "Showing",
+            "OF": "of"
+        },
+        "LOADING": "Loading",
+        "UNKNOWN_FORMAT": "Document preview could not be loaded"
     }
 }