[ADF-1418] Viewer enhancements (#2930)

* move navigation buttons to the header

* restrict file name to 35 characters

* remove wrong condition in template

lib/core/i18n/en.json

@@ -188,7 +188,10 @@
       "SHARE": "Share",
       "MORE_ACTIONS": "More actions",
       "INFO": "Info",
-      "FULLSCREEN": "Activate full-screen mode"
+      "FULLSCREEN": "Activate full-screen mode",
+      "CLOSE": "Close",
+      "NEXT_FILE": "Next File",
+      "PREV_FILE": "Previous File"
     },
     "ARIA": {
       "PREVIOUS_PAGE": "Previous page",

lib/core/viewer/components/viewer.component.html

@@ -13,13 +13,32 @@
                         class="adf-viewer-close-button"
                         data-automation-id="toolbar-back"
                         mat-icon-button
-                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.BACK' | translate }}"
+                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
                         (click)="onBackButtonClick()">
-                        <mat-icon>arrow_back</mat-icon>
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </adf-toolbar-title>
+
+                <div fxFlex="1 1 auto">
+                    <button
+                        *ngIf="allowNavigate && canNavigateBefore"
+                        data-automation-id="toolbar-pref-file"
+                        mat-icon-button
+                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}"
+                        (click)="onNavigateBeforeClick()">
+                        <mat-icon>navigate_before</mat-icon>
                     </button>
                     <img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
                     <span class="adf-viewer__display-name" id="adf-viewer-display-name">{{ displayName }}</span>
-                </adf-toolbar-title>
+                    <button
+                        *ngIf="allowNavigate && canNavigateNext"
+                        data-automation-id="toolbar-next-file"
+                        mat-icon-button
+                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}"
+                        (click)="onNavigateNextClick()">
+                        <mat-icon>navigate_next</mat-icon>
+                    </button>
+                </div>
 
                 <ng-container *ngIf="mnuOpenWith">
                     <button
@@ -121,14 +140,6 @@
                 </div>
             </ng-container>
 
-            <ng-container *ngIf="allowNavigate && canNavigateBefore">
-                <div class="navigate-before">
-                    <button mat-mini-fab color="primary" (click)="onNavigateBeforeClick()">
-                        <mat-icon>navigate_before</mat-icon>
-                    </button>
-                </div>
-            </ng-container>
-
             <div class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
                 <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
                     <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
@@ -162,13 +173,6 @@
                 </div>
             </div>
 
-            <ng-container *ngIf="allowNavigate && canNavigateNext">
-                <div class="navigate-next" fxFlexOrder="{{sidebarPosition !== 'left' ? 3 : 4}}">
-                    <button mat-mini-fab color="primary" (click)="onNavigateNextClick()">
-                        <mat-icon>navigate_next</mat-icon>
-                    </button>
-                </div>
-            </ng-container>
         </div>
     </div>
 </div>

lib/core/viewer/components/viewer.component.scss

@@ -11,30 +11,10 @@
 
     .adf-viewer {
 
-        .navigate-before {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            order: 1;
-            padding-left: 2px;
-            padding-right: 4px;
-            background-color: mat-color($background, background);
-        }
-
         &-main {
             width: 0;
         }
 
-        .navigate-next {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            order: 3;
-            padding-left: 4px;
-            padding-right: 2px;
-            background-color: mat-color($background, background);
-        }
-
         &__mimeicon {
             vertical-align: middle;
             height: 18px;
@@ -55,6 +35,12 @@
             font-weight: normal;
             font-style: normal;
             font-stretch: normal;
+
+            max-width: 35ch;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: inline-block;
+            vertical-align: middle;
         }
 
         &-container {