Merge remote-tracking branch 'origin/master' into RED-10034

apps/red-ui/src/app/models/file/annotation.wrapper.ts

@@ -26,6 +26,12 @@ import {
 } from '@red/domain';
 import { annotationTypesTranslations } from '@translations/annotation-types-translations';
 
+interface AnnotationContent {
+    translation: string;
+    params: { [key: string]: string };
+    untranslatedContent: string;
+}
+
 export class AnnotationWrapper implements IListable {
     id: string;
     superType: SuperType;
@@ -36,7 +42,7 @@ export class AnnotationWrapper implements IListable {
     numberOfComments = 0;
     firstTopLeftPoint: IPoint;
     shortContent: string;
-    content: string;
+    content: AnnotationContent;
     value: string;
     pageNumber: number;
     dictionaryOperation = false;
@@ -279,7 +285,7 @@ export class AnnotationWrapper implements IListable {
         );
 
         const content = this.#createContent(annotationWrapper, logEntry, isDocumine);
-        annotationWrapper.shortContent = this.#getShortContent(annotationWrapper, legalBasisList) || content;
+        annotationWrapper.shortContent = this.#getShortContent(annotationWrapper, legalBasisList) || content.untranslatedContent;
         annotationWrapper.content = content;
 
         const lastRelevantManualChange = logEntry.manualChanges?.at(-1);
@@ -311,39 +317,57 @@ export class AnnotationWrapper implements IListable {
     }
 
     static #createContent(annotationWrapper: AnnotationWrapper, logEntry: IEntityLogEntry, isDocumine: boolean) {
-        let content = '';
+        let untranslatedContent = '';
+        const params: { [key: string]: string } = {};
         if (logEntry.matchedRule) {
-            content += `Rule ${logEntry.matchedRule} matched${isDocumine ? ':' : ''} \n\n`;
+            params['hasRule'] = 'true';
+            params['matchedRule'] = logEntry.matchedRule.replace(/(^[, ]*)|([, ]*$)/g, '');
+            params['ruleSymbol'] = isDocumine ? ':' : '';
+
+            untranslatedContent += `Rule ${logEntry.matchedRule} matched${isDocumine ? ':' : ''} \n\n`;
         }
 
         if (logEntry.reason) {
+            params['hasReason'] = 'true';
             if (isDocumine && logEntry.reason.slice(-1) === '.') {
                 logEntry.reason = logEntry.reason.slice(0, -1);
             }
-
+            if (!params['hasRule']) {
-            content += logEntry.reason + '\n\n';
+                params['reason'] = logEntry.reason.substring(0, 1).toUpperCase() + logEntry.reason.substring(1);
+            } else {
+                params['reason'] = logEntry.reason;
+            }
+            params['reason'] = params['reason'].replace(/(^[, ]*)|([, ]*$)/g, '');
+            untranslatedContent += logEntry.reason + '\n\n';
             //remove leading and trailing commas and whitespaces
-            content = content.replace(/(^[, ]*)|([, ]*$)/g, '');
+            untranslatedContent = untranslatedContent.replace(/(^[, ]*)|([, ]*$)/g, '');
-            content = content.substring(0, 1).toUpperCase() + content.substring(1);
+            untranslatedContent = untranslatedContent.substring(0, 1).toUpperCase() + untranslatedContent.substring(1);
         }
 
         if (annotationWrapper.legalBasis && !isDocumine) {
-            content += 'Legal basis: ' + annotationWrapper.legalBasis + '\n\n';
+            params['hasLb'] = 'true';
+            params['legalBasis'] = annotationWrapper.legalBasis;
+            untranslatedContent += 'Legal basis: ' + annotationWrapper.legalBasis + '\n\n';
         }
 
         if (annotationWrapper.hasBeenRemovedByManualOverride) {
-            content += 'Removed by manual override';
+            params['hasOverride'] = 'true';
+            untranslatedContent += 'Removed by manual override';
         }
 
         if (logEntry.section) {
+            params['hasSection'] = 'true';
+            params['sectionSymbol'] = isDocumine ? '' : ':';
+            params['shouldLower'] = untranslatedContent.length.toString();
+            params['section'] = logEntry.section;
             let prefix = `In section${isDocumine ? '' : ':'} `;
-            if (content.length) {
+            if (untranslatedContent.length) {
                 prefix = ` ${prefix.toLowerCase()}`;
             }
-            content += `${prefix} "${logEntry.section}"`;
+            untranslatedContent += `${prefix} "${logEntry.section}"`;
         }
 
-        return content;
+        return { translation: _('annotation-content'), params: params, untranslatedContent: untranslatedContent };
     }
 
     static #getShortContent(annotationWrapper: AnnotationWrapper, legalBasisList: ILegalBasis[]) {

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts

@@ -21,6 +21,7 @@ import { NgForOf, NgIf } from '@angular/common';
 import { MatFormField } from '@angular/material/form-field';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { PdfViewer } from '../../../../pdf-viewer/services/pdf-viewer.service';
 
 @Component({
     templateUrl: './user-profile-screen.component.html',
@@ -45,6 +46,7 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI
         protected readonly _userPreferenceService: UserPreferenceService,
         private readonly _changeRef: ChangeDetectorRef,
         private readonly _toaster: Toaster,
+        private readonly _pdfViewer: PdfViewer,
     ) {
         super();
         this._loadingService.start();
@@ -107,6 +109,7 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI
 
             if (this.languageChanged) {
                 await this._languageService.change(this.form.get('language').value);
+                await this._pdfViewer.instance?.UI.setLanguage(this._languageService.currentLanguage);
             }
 
             if (this.themeChanged) {

apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html

@@ -1,13 +1,13 @@
 <div class="pagination noselect">
     <div (click)="changePage.emit(1)" class="page-button" id="portraitPage">
         <mat-icon class="chevron-icon" svgIcon="iqser:nav-prev"></mat-icon>
-        Portrait
+        {{ 'watermark-screen.pagination.portrait' | translate }}
     </div>
 
     <div class="separator">/</div>
 
     <div (click)="changePage.emit(2)" class="page-button" id="landscapePage">
-        Landscape
+        {{ 'watermark-screen.pagination.landscape' | translate }}
         <mat-icon class="chevron-icon" svgIcon="iqser:nav-next"></mat-icon>
     </div>
 </div>

apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts

@@ -1,12 +1,13 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-paginator',
     templateUrl: './paginator.component.html',
     styleUrls: ['./paginator.component.scss'],
     standalone: true,
-    imports: [MatIcon],
+    imports: [MatIcon, TranslateModule],
 })
 export class PaginatorComponent {
     @Output() readonly changePage = new EventEmitter<number>();

apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html

@@ -4,7 +4,7 @@
     <redaction-annotation-card
         [annotation]="annotation().item"
         [isSelected]="annotation().isSelected"
-        [matTooltip]="annotation().item.content"
+        [matTooltip]="annotation().item.content.translation | translate: annotation().item.content.params | replaceNbsp"
         matTooltipPosition="above"
     ></redaction-annotation-card>
 

apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts

@@ -12,6 +12,7 @@ import { MatIcon } from '@angular/material/icon';
 import { AnnotationActionsComponent } from '../annotation-actions/annotation-actions.component';
 import { CommentsComponent } from '../comments/comments.component';
 import { AnnotationDetailsComponent } from '../annotation-details/annotation-details.component';
+import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
 
 @Component({
     selector: 'redaction-annotation-wrapper',
@@ -27,6 +28,7 @@ import { AnnotationDetailsComponent } from '../annotation-details/annotation-det
         AnnotationActionsComponent,
         CommentsComponent,
         AnnotationDetailsComponent,
+        ReplaceNbspPipe,
     ],
 })
 export class AnnotationWrapperComponent {

apps/red-ui/src/app/modules/pdf-viewer/services/annotation-draw.service.ts

@@ -169,7 +169,7 @@ export class AnnotationDrawService {
         const annotation = this._pdf.textHighlight();
         annotation.Quads = this.#rectanglesToQuads(annotationWrapper.positions, pageNumber);
         annotation.Opacity = annotationWrapper.isRemoved ? DEFAULT_REMOVED_ANNOTATION_OPACITY : DEFAULT_TEXT_ANNOTATION_OPACITY;
-        annotation.setContents(annotationWrapper.content);
+        annotation.setContents(annotationWrapper.content.untranslatedContent);
         annotation.PageNumber = pageNumber;
         annotation.StrokeColor = this.convertColor(annotationWrapper.color);
         annotation.Id = annotationWrapper.id;

apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts

@@ -1,4 +1,4 @@
-import { effect, inject, Injectable, signal } from '@angular/core';
+import { computed, effect, inject, Injectable, signal } from '@angular/core';
 import { HeaderElements } from '../../file-preview/utils/constants';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
@@ -16,18 +16,7 @@ export class LayersService {
         private readonly _pdf: PdfViewer,
         private readonly _documentViewer: REDDocumentViewer,
         private readonly _translateService: TranslateService,
-    ) {
+    ) {}
-        effect(() => {
-            this.active();
-            this.#updateButton();
-        });
-    }
-
-    get toggleLayersBtnTitle(): string {
-        return this._translateService.instant(_('pdf-viewer.toggle-layers'), {
-            active: this.active(),
-        });
-    }
 
     get toggleLayersBtnIcon(): string {
         return this.#icon;
@@ -45,13 +34,16 @@ export class LayersService {
             }
         });
 
-        this.updateIconState();
-
         this._documentViewer.document.setLayersArray(layers);
         this._documentViewer.refreshAndUpdateView();
     }
 
-    updateIconState() {
+    updateState() {
+        this.#updateIconState();
+        this.#updateButton();
+    }
+
+    #updateIconState() {
         const element = this._pdf.instance.UI.iframeWindow.document.querySelector(`[data-element=${HeaderElements.TOGGLE_LAYERS}]`);
         if (!element) return;
         if (this.active()) {
@@ -63,7 +55,9 @@ export class LayersService {
 
     #updateButton() {
         this._pdf.instance?.UI.updateElement(HeaderElements.TOGGLE_LAYERS, {
-            title: this.toggleLayersBtnTitle,
+            title: this._translateService.instant(_('pdf-viewer.header.toggle-layers'), {
+                active: this.active(),
+            }),
         });
     }
 }

apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts

@@ -3,7 +3,7 @@ import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-i
 import { ActivatedRoute } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { environment } from '@environments/environment';
-import { ErrorService, getConfig } from '@iqser/common-ui';
+import { ErrorService, getConfig, LanguageService } from '@iqser/common-ui';
 import { shareDistinctLast, UI_ROOT_PATH_FN } from '@iqser/common-ui/lib/utils';
 import { TranslateService } from '@ngx-translate/core';
 import WebViewer, { Core, WebViewerInstance, WebViewerOptions } from '@pdftron/webviewer';
@@ -70,6 +70,7 @@ export class PdfViewer {
         private readonly _errorService: ErrorService,
         private readonly _userPreferenceService: UserPreferenceService,
         private readonly _annotationManager: REDAnnotationManager,
+        private readonly _languageService: LanguageService,
     ) {
         this.totalPages = this.#totalPages.asReadonly();
         this.isCompareMode = this.#isCompareMode.asReadonly();
@@ -152,6 +153,7 @@ export class PdfViewer {
 
         await this.runWithCleanup(async () => {
             this.#instance.UI.setTheme(this._userPreferenceService.getTheme());
+            await this.#instance.UI.setLanguage(this._languageService.currentLanguage);
             this._logger.info('[PDF] Initialized');
 
             this.documentViewer = this.#instance.Core.documentViewer;

apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts

@@ -29,24 +29,13 @@ export class ReadableRedactionsService {
         return this.#active$.getValue();
     }
 
-    get toggleReadableRedactionsBtnTitle(): string {
-        return this._translateService.instant(_('pdf-viewer.toggle-readable-redactions'), {
-            active: this.active,
-        });
-    }
-
     get toggleReadableRedactionsBtnIcon(): string {
         return this.active ? this.#enableIcon : this.#disableIcon;
     }
 
     toggleReadableRedactions(): void {
         this.#active$.next(!this.active);
-
+        this.updateState();
-        this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_READABLE_REDACTIONS, {
-            title: this.toggleReadableRedactionsBtnTitle,
-            img: this.toggleReadableRedactionsBtnIcon,
-        });
-
         if (!this.active) {
             this.setCustomDrawHandler();
         } else {
@@ -88,4 +77,13 @@ export class ReadableRedactionsService {
             annotation['FillColor'] = color;
         });
     }
+
+    updateState() {
+        this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_READABLE_REDACTIONS, {
+            title: this._translateService.instant(_('pdf-viewer.header.toggle-readable-redactions'), {
+                active: this.active,
+            }),
+            img: this.toggleReadableRedactionsBtnIcon,
+        });
+    }
 }

apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts

@@ -15,21 +15,11 @@ export class TooltipsService {
         private readonly _translateService: TranslateService,
     ) {}
 
-    get toggleTooltipsBtnTitle(): string {
-        return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), {
-            active: this._userPreferenceService.getFilePreviewTooltipsPreference(),
-        });
-    }
-
     async toggleTooltips(): Promise<void> {
         await this._userPreferenceService.toggleFilePreviewTooltipsPreference();
         this._documentViewer.updateTooltipsVisibility();
 
-        this.updateIconState();
+        this.updateState();
-
-        this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, {
-            title: this.toggleTooltipsBtnTitle,
-        });
     }
 
     updateIconState() {
@@ -40,4 +30,13 @@ export class TooltipsService {
             element.classList.remove('active');
         }
     }
+
+    updateState() {
+        this.updateIconState();
+        this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, {
+            title: this._translateService.instant(_('pdf-viewer.header.toggle-tooltips'), {
+                active: this._userPreferenceService.getFilePreviewTooltipsPreference(),
+            }),
+        });
+    }
 }

apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts

@@ -16,6 +16,8 @@ import { PdfViewer } from './pdf-viewer.service';
 import { ReadableRedactionsService } from './readable-redactions.service';
 import { TooltipsService } from './tooltips.service';
 import { UI_ROOT_PATH_FN } from '@common-ui/utils';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { viewerHeaderButtonsTranslations } from '@translations/pdf-viewer-translations';
 
 const divider: IHeaderElement = {
     type: 'divider',
@@ -90,7 +92,7 @@ export class ViewerHeaderService {
             toolGroup: 'rectangleTools',
             dataElement: HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
             img: this.#convertPath('/assets/icons/general/pdftron-rectangle.svg'),
-            title: 'annotation.rectangle',
+            title: viewerHeaderButtonsTranslations[HeaderElements.SHAPE_TOOL_GROUP_BUTTON],
         };
     }
 
@@ -99,7 +101,6 @@ export class ViewerHeaderService {
             type: 'actionButton',
             element: HeaderElements.TOGGLE_TOOLTIPS,
             dataElement: HeaderElements.TOGGLE_TOOLTIPS,
-            title: this._tooltipsService.toggleTooltipsBtnTitle,
             img: this.#convertPath('/assets/icons/general/pdftron-action-enable-tooltips.svg'),
             onClick: () => this._ngZone.run(() => this._tooltipsService.toggleTooltips()),
         };
@@ -110,7 +111,6 @@ export class ViewerHeaderService {
             type: 'actionButton',
             element: HeaderElements.TOGGLE_LAYERS,
             dataElement: HeaderElements.TOGGLE_LAYERS,
-            title: this._layersService.toggleLayersBtnTitle,
             img: this._layersService.toggleLayersBtnIcon,
             onClick: () => this._ngZone.run(() => this._layersService.toggleLayers()),
         };
@@ -121,7 +121,6 @@ export class ViewerHeaderService {
             type: 'actionButton',
             element: HeaderElements.TOGGLE_READABLE_REDACTIONS,
             dataElement: HeaderElements.TOGGLE_READABLE_REDACTIONS,
-            title: this._readableRedactionsService.toggleReadableRedactionsBtnTitle,
             img: this._readableRedactionsService.toggleReadableRedactionsBtnIcon,
             onClick: () => this._ngZone.run(() => this._readableRedactionsService.toggleReadableRedactions()),
         };
@@ -130,7 +129,7 @@ export class ViewerHeaderService {
     get #loadAllAnnotations(): IHeaderElement {
         return {
             type: 'actionButton',
-            title: this._translateService.instant('viewer-header.load-all-annotations'),
+            title: viewerHeaderButtonsTranslations[HeaderElements.LOAD_ALL_ANNOTATIONS],
             img: this.#convertPath('/assets/icons/general/pdftron-action-load-all-annotations.svg'),
             onClick: () => this._ngZone.run(() => this.#events$.next({ type: ViewerEvents.LOAD_ALL_ANNOTATIONS })),
             dataElement: HeaderElements.LOAD_ALL_ANNOTATIONS,
@@ -143,7 +142,7 @@ export class ViewerHeaderService {
             element: HeaderElements.ROTATE_LEFT_BUTTON,
             dataElement: HeaderElements.ROTATE_LEFT_BUTTON,
             img: this.#convertPath('/assets/icons/general/rotate-left.svg'),
-            title: 'Rotate page left',
+            title: viewerHeaderButtonsTranslations[HeaderElements.ROTATE_LEFT_BUTTON],
             onClick: () =>
                 this._ngZone.run(() => {
                     this._rotationService.addRotation(RotationTypes.LEFT);
@@ -203,7 +202,7 @@ export class ViewerHeaderService {
             element: HeaderElements.ROTATE_RIGHT_BUTTON,
             dataElement: HeaderElements.ROTATE_RIGHT_BUTTON,
             img: this.#convertPath('/assets/icons/general/rotate-right.svg'),
-            title: 'Rotate page right',
+            title: viewerHeaderButtonsTranslations[HeaderElements.ROTATE_RIGHT_BUTTON],
             onClick: () =>
                 this._ngZone.run(() => {
                     this._rotationService.addRotation(RotationTypes.RIGHT);
@@ -218,7 +217,7 @@ export class ViewerHeaderService {
             element: HeaderElements.COMPARE_BUTTON,
             dataElement: HeaderElements.COMPARE_BUTTON,
             img: this.#convertPath('/assets/icons/general/pdftron-action-compare.svg'),
-            title: 'Compare',
+            title: viewerHeaderButtonsTranslations[HeaderElements.COMPARE_BUTTON],
             onClick: () =>
                 this._ngZone.run(async () => {
                     document.getElementById('compareFileInput').click();
@@ -310,24 +309,27 @@ export class ViewerHeaderService {
             header.getItems().splice(startButtons, header.getItems().length - deleteCount, ...enabledItems);
         });
 
-        this._pdf.instance?.UI.updateElement('selectToolButton', {
-            img: this.#convertPath('/assets/icons/general/pdftron-cursor.svg'),
-        });
-
         if (this._pdf.instance) {
-            this._tooltipsService.updateIconState();
+            this._pdf.instance.UI.updateElement('selectToolButton', {
-            this._layersService.updateIconState();
+                img: this.#convertPath('/assets/icons/general/pdftron-cursor.svg'),
+                title: this._translateService.instant(viewerHeaderButtonsTranslations['selectToolButton']),
+            });
+
+            this._tooltipsService.updateState();
+            this._layersService.updateState();
+            this._readableRedactionsService.updateState();
             const closeCompareButton = this._pdf.instance.UI.iframeWindow.document.querySelector(
                 `[data-element=${HeaderElements.CLOSE_COMPARE_BUTTON}]`,
             );
             closeCompareButton?.classList.add('active');
+            this.#configTooltips();
         }
     }
 
     disableLoadAllAnnotations(): void {
         this._pdf.instance.UI.updateElement(HeaderElements.LOAD_ALL_ANNOTATIONS, {
             img: this.#convertPath('/assets/icons/general/pdftron-action-load-all-annotations-disabled.svg'),
-            title: this._translateService.instant('viewer-header.all-annotations-loaded'),
+            title: this._translateService.instant(_('pdf-viewer.header.all-annotations-loaded')),
             onClick: undefined,
         });
     }
@@ -370,6 +372,37 @@ export class ViewerHeaderService {
         this._pdf.navigateTo(1);
     }
 
+    #configTooltips() {
+        const elements: (string | HeaderElementType)[] = [
+            'leftPanelButton',
+            'thumbnailsPanelButton',
+            'outlinesPanelButton',
+            'outlineMultiSelect',
+            'layersPanelButton',
+            'signaturePanelButton',
+            'zoomInButton',
+            'zoomOutButton',
+            'panToolButton',
+            HeaderElements.COMPARE_BUTTON,
+            HeaderElements.ROTATE_LEFT_BUTTON,
+            HeaderElements.ROTATE_RIGHT_BUTTON,
+            HeaderElements.LOAD_ALL_ANNOTATIONS,
+            HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
+        ];
+
+        elements.forEach(element => {
+            if (this.#buttons.has(element as HeaderElementType)) {
+                this._pdf.instance.UI.updateElement(element, {
+                    title: this._translateService.instant(this.#buttons.get(element as HeaderElementType).title),
+                });
+            } else {
+                this._pdf.instance.UI.updateElement(element, {
+                    title: this._translateService.instant(viewerHeaderButtonsTranslations[element]),
+                });
+            }
+        });
+    }
+
     #pushGroup(items: IHeaderElement[], group: HeaderElementType[]) {
         const enabledItems = group.filter(item => this.#isEnabled(item));
         if (enabledItems.length) {

apps/red-ui/src/app/translations/pdf-viewer-translations.ts

@@ -0,0 +1,22 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { HeaderElements, HeaderElementType } from '../modules/file-preview/utils/constants';
+
+export const viewerHeaderButtonsTranslations: Record<string | HeaderElementType, string> = {
+    leftPanelButton: _('pdf-viewer.header.left-panel-button'),
+    thumbnailsPanelButton: _('pdf-viewer.header.thumbnails-panel-button'),
+    outlinesPanelButton: _('pdf-viewer.header.outlines-panel-button'),
+    outlineMultiSelect: _('pdf-viewer.header.outline-multi-select'),
+    noOutlinesText: _('pdf-viewer.header.no-outlines-text'),
+    layersPanelButton: _('pdf-viewer.header.layers-panel-button'),
+    signaturePanelButton: _('pdf-viewer.header.signature-panel-button'),
+    noSignaturesText: _('pdf-viewer.header.no-signatures-text'),
+    zoomInButton: _('pdf-viewer.header.zoom-in-button'),
+    zoomOutButton: _('pdf-viewer.header.zoom-out-button'),
+    panToolButton: _('pdf-viewer.header.pan-tool-button'),
+    selectToolButton: _('pdf-viewer.header.select-tool-button'),
+    [HeaderElements.COMPARE_BUTTON]: _('pdf-viewer.header.compare-button'),
+    [HeaderElements.ROTATE_LEFT_BUTTON]: _('pdf-viewer.header.rotate-left-button'),
+    [HeaderElements.ROTATE_RIGHT_BUTTON]: _('pdf-viewer.header.rotate-right-button'),
+    [HeaderElements.SHAPE_TOOL_GROUP_BUTTON]: _('pdf-viewer.header.rectangle-tool-button'),
+    [HeaderElements.LOAD_ALL_ANNOTATIONS]: _('pdf-viewer.header.load-all-annotations'),
+};

apps/red-ui/src/assets/i18n/redact/de.json

@@ -376,6 +376,7 @@
     "removed-manual": "Schwärzung/Hinweis wurde entfernt",
     "resized": "Schwärzungsbereich wurde geändert"
   },
+  "annotation-content": "{hasRule, select, true {Regel {matchedRule} trifft zu auf{ruleSymbol}} other {}} {hasReason, select, true {{reason}} other {}} {hasLb, select, true {Rechstgrundlage: {legalBasis}} other {}} {hasOverride, select, true {Entfernt durch manuelles Überschreiben} other {}} {hasSection, select, true {{shouldLower, plural, =0 {I} other {i}}n Abschnitt{sectionSymbol} \"{section}\"} other {}}",
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hinweis} other{Schwärzung}} basiert auf Wörterbuch",
     "dossier-dictionary": "Basiert auf Dossier-Wörterbuch",
@@ -2000,14 +2001,34 @@
     "previous": "Vorherige"
   },
   "pdf-viewer": {
+    "header": {
+      "all-annotations-loaded": "Alle Annotationen geladen",
+      "compare-button": "Vergleichen",
+      "layers-panel-button": "Ebenen",
+      "left-panel-button": "Panel",
+      "load-all-annotations": "Alle Annotationen laden",
+      "no-outlines-text": "Keine Gliederung verfügbar",
+      "no-signatures-text": "In diesem Dokument gibt es keine Unterschriftenfelder",
+      "outline-multi-select": "Bearbeiten",
+      "outlines-panel-button": "Gliederung",
+      "pan-tool-button": "Verschieben",
+      "rectangle-tool-button": "Bereichsschwärzung",
+      "rotate-left-button": "Seite nach links drehen",
+      "rotate-right-button": "Seite nach rechts drehen",
+      "select-tool-button": "Auswählen",
+      "signature-panel-button": "Unterschriften",
+      "thumbnails-panel-button": "Miniaturansicht",
+      "toggle-layers": "Layout-Raster {active, select, true{deaktivieren} false{aktivieren} other{}}",
+      "toggle-readable-redactions": "Schwärzungen {active, select, true{wie im finalen Dokument} false{in Vorschau-Farbe} other{}} anzeigen",
+      "toggle-tooltips": "Tooltips zu Annotationen {active, select, true{deaktivieren} false{aktivieren} other{}}",
+      "zoom-in-button": "Vergrößern",
+      "zoom-out-button": "Verkleinern"
+    },
     "text-popup": {
       "actions": {
         "search": "Ausgewählten Text suchen"
       }
-    },
+    }
-    "toggle-layers": "Layout-Raster {active, select, true{deaktivieren} false{aktivieren} other{}}",
-    "toggle-readable-redactions": "Schwärzungen {active, select, true{wie im finalen Dokument} false{in Vorschau-Farbe} other{}} anzeigen",
-    "toggle-tooltips": "Tooltips zu Annotationen {active, select, true{deaktivieren} false{aktivieren} other{}}"
   },
   "permissions-screen": {
     "dossier": {
@@ -2522,10 +2543,6 @@
     "view-as": "Ansicht:",
     "workflow": "Workflow-Spalten"
   },
-  "viewer-header": {
-    "all-annotations-loaded": "Alle Annotationen geladen",
-    "load-all-annotations": "Alle Annotationen laden"
-  },
   "watermark-screen": {
     "action": {
       "change-success": "Wasserzeichen wurde aktualisiert.",
@@ -2554,6 +2571,10 @@
       "orientation": "Textrichtung",
       "text-label": "Text für Wasserzeichen",
       "text-placeholder": "Text eingeben"
+    },
+    "pagination": {
+      "landscape": "Querformat",
+      "portrait": "Hoch-"
     }
   },
   "watermarks-listing": {

apps/red-ui/src/assets/i18n/redact/en.json

@@ -376,6 +376,7 @@
     "removed-manual": "Redaction/Hint removed",
     "resized": "Redaction area has been modified"
   },
+  "annotation-content": "{hasRule, select, true {Rule {matchedRule} matched{ruleSymbol}} other {}} {hasReason, select, true {{reason}} other {}} {hasLb, select, true {Legal basis: {legalBasis}} other {}} {hasOverride, select, true {Removed by manual override} other {}} {hasSection, select, true {{shouldLower, plural, =0 {I} other {i}}n section{sectionSymbol} \"{section}\"} other {}}",
   "annotation-engines": {
     "dictionary": "Based on dictionary",
     "dossier-dictionary": "Based on dossier dictionary",
@@ -2000,14 +2001,34 @@
     "previous": "Prev"
   },
   "pdf-viewer": {
+    "header": {
+      "all-annotations-loaded": "All annotations loaded",
+      "compare-button": "Compare",
+      "layers-panel-button": "Layers",
+      "left-panel-button": "Panel",
+      "load-all-annotations": "Load all annotations",
+      "no-outlines-text": "No outlines available",
+      "no-signatures-text": "This document has NO signature fields",
+      "outline-multi-select": "Edit",
+      "outlines-panel-button": "Outlines",
+      "pan-tool-button": "Pan",
+      "rectangle-tool-button": "Rectangle",
+      "rotate-left-button": "Rotate page left",
+      "rotate-right-button": "Rotate page right",
+      "select-tool-button": "Select",
+      "signature-panel-button": "Signatures",
+      "thumbnails-panel-button": "Thumbnails",
+      "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
+      "toggle-readable-redactions": "Show redactions {active, select, true{as in final document} false{in preview color} other{}}",
+      "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips",
+      "zoom-in-button": "Zoom In",
+      "zoom-out-button": "Zoom Out"
+    },
     "text-popup": {
       "actions": {
         "search": "Search for selected text"
       }
-    },
+    }
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
-    "toggle-readable-redactions": "Show redactions {active, select, true{as in final document} false{in preview color} other{}}",
-    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips"
   },
   "permissions-screen": {
     "dossier": {
@@ -2522,10 +2543,6 @@
     "view-as": "View as:",
     "workflow": "Workflow"
   },
-  "viewer-header": {
-    "all-annotations-loaded": "All annotations loaded",
-    "load-all-annotations": "Load all annotations"
-  },
   "watermark-screen": {
     "action": {
       "change-success": "Watermark has been updated.",
@@ -2554,6 +2571,10 @@
       "orientation": "Orientation",
       "text-label": "Watermark text",
       "text-placeholder": "Enter text"
+    },
+    "pagination": {
+      "landscape": "Landscape",
+      "portrait": "Portrait"
     }
   },
   "watermarks-listing": {

apps/red-ui/src/assets/i18n/scm/de.json

@@ -376,6 +376,7 @@
     "removed-manual": "Schwärzung/Hinweis entfernt",
     "resized": "Schwärzungsbereich wurde geändert"
   },
+  "annotation-content": "{hasRule, select, true {Regel {matchedRule} trifft zu auf{ruleSymbol}} other {}} {hasReason, select, true {{reason}} other {}} {hasLb, select, true {Rechstgrundlage: {legalBasis}} other {}} {hasOverride, select, true {Entfernt durch manuelles Überschreiben} other {}} {hasSection, select, true {{shouldLower, plural, =0 {I} other {i}}n Abschnitt{sectionSymbol} \"{section}\"} other {}}",
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Redaction}} basierend auf Wörterbuch",
     "dossier-dictionary": "Annotation based on dossier dictionary",
@@ -2000,14 +2001,34 @@
     "previous": "Vorherige"
   },
   "pdf-viewer": {
+    "header": {
+      "all-annotations-loaded": "Alle Annotationen geladen",
+      "compare-button": "Vergleichen",
+      "layers-panel-button": "Ebenen",
+      "left-panel-button": "Panel",
+      "load-all-annotations": "Alle Annotationen laden",
+      "no-outlines-text": "Keine Gliederung verfügbar",
+      "no-signatures-text": "In diesem Dokument gibt es keine Unterschriftenfelder",
+      "outline-multi-select": "Bearbeiten",
+      "outlines-panel-button": "Gliederung",
+      "pan-tool-button": "Verschieben",
+      "rectangle-tool-button": "Bereichsschwärzung",
+      "rotate-left-button": "Seite nach links drehen",
+      "rotate-right-button": "Seite nach rechts drehen",
+      "select-tool-button": "Auswählen",
+      "signature-panel-button": "Unterschriften",
+      "thumbnails-panel-button": "Miniaturansicht",
+      "toggle-layers": "Layout-Raster {active, select, true{deaktivieren} false{aktivieren} other{}}",
+      "toggle-readable-redactions": "Schwärzungen {active, select, true{wie im finalen Dokument} false{in Vorschau-Farbe} other{}} anzeigen",
+      "toggle-tooltips": "Tooltips zu Annotationen {active, select, true{deaktivieren} false{aktivieren} other{}}",
+      "zoom-in-button": "Vergrößern",
+      "zoom-out-button": "Verkleinern"
+    },
     "text-popup": {
       "actions": {
         "search": "Search for selected text"
       }
-    },
+    }
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
-    "toggle-readable-redactions": "Show components {active, select, true{as in final document} false{in preview color} other{}}",
-    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen"
   },
   "permissions-screen": {
     "dossier": {
@@ -2522,10 +2543,6 @@
     "view-as": "Ansicht als:",
     "workflow": "Arbeitsablauf"
   },
-  "viewer-header": {
-    "all-annotations-loaded": "All annotations loaded",
-    "load-all-annotations": "Load all annotations"
-  },
   "watermark-screen": {
     "action": {
       "change-success": "Das Wasserzeichen wurde aktualisiert!",
@@ -2554,6 +2571,10 @@
       "orientation": "Ausrichtung",
       "text-label": "Watermark text",
       "text-placeholder": "Text eingeben"
+    },
+    "pagination": {
+      "landscape": "",
+      "portrait": ""
     }
   },
   "watermarks-listing": {

apps/red-ui/src/assets/i18n/scm/en.json

@@ -376,6 +376,7 @@
     "removed-manual": "Annotation/Hint removed",
     "resized": "Annotation area has been modified"
   },
+  "annotation-content": "{hasRule, select, true {Rule {matchedRule} matched{ruleSymbol}} other {}} {hasReason, select, true {{reason}} other {}} {hasLb, select, true {Legal basis: {legalBasis}} other {}} {hasOverride, select, true {Removed by manual override} other {}} {hasSection, select, true {{shouldLower, plural, =0 {I} other {i}}n section{sectionSymbol} \"{section}\"} other {}}",
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Annotation}} based on dictionary",
     "dossier-dictionary": "Annotation based on dossier dictionary",
@@ -2000,14 +2001,34 @@
     "previous": "Prev"
   },
   "pdf-viewer": {
+    "header": {
+      "all-annotations-loaded": "All annotations loaded",
+      "compare-button": "Compare",
+      "layers-panel-button": "Layers",
+      "left-panel-button": "Panel",
+      "load-all-annotations": "Load all annotations",
+      "no-outlines-text": "No outlines available",
+      "no-signatures-text": "This document has NO signature fields",
+      "outline-multi-select": "Edit",
+      "outlines-panel-button": "Outlines",
+      "pan-tool-button": "Pan",
+      "rectangle-tool-button": "Rectangle",
+      "rotate-left-button": "Rotate page left",
+      "rotate-right-button": "Rotate page right",
+      "select-tool-button": "Select",
+      "signature-panel-button": "Signatures",
+      "thumbnails-panel-button": "Thumbnails",
+      "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
+      "toggle-readable-redactions": "Show redactions {active, select, true{as in final document} false{in preview color} other{}}",
+      "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips",
+      "zoom-in-button": "Zoom In",
+      "zoom-out-button": "Zoom Out"
+    },
     "text-popup": {
       "actions": {
         "search": "Search for selected text"
       }
-    },
+    }
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
-    "toggle-readable-redactions": "Show components {active, select, true{as in final document} false{in preview color} other{}}",
-    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips"
   },
   "permissions-screen": {
     "dossier": {
@@ -2522,10 +2543,6 @@
     "view-as": "View as:",
     "workflow": "Workflow"
   },
-  "viewer-header": {
-    "all-annotations-loaded": "All annotations loaded",
-    "load-all-annotations": "Load all annotations"
-  },
   "watermark-screen": {
     "action": {
       "change-success": "Watermark has been updated!",
@@ -2554,6 +2571,10 @@
       "orientation": "Orientation",
       "text-label": "Watermark text",
       "text-placeholder": "Enter text"
+    },
+    "pagination": {
+      "landscape": "",
+      "portrait": ""
     }
   },
   "watermarks-listing": {