RED-6245: refactoring

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

@@ -1,13 +1,11 @@
-<div [style.visibility]="(loaded$ | async) ? 'visible' : 'hidden'" class="pagination noselect">
-    <div (click)="changePage.emit(1)">
+<div class="pagination noselect">
+    <div id="portraitPage" class="page-button" (click)="changePage.emit(1)">
         <mat-icon class="chevron-icon" svgIcon="red:nav-prev"></mat-icon>
+        Portrait
     </div>
-
-    <div id="portraitPage">Portrait</div>
     <div class="separator">/</div>
-    <div id="landscapePage">Landscape</div>
-
-    <div (click)="changePage.emit(2)">
+    <div id="landscapePage" class="page-button" (click)="changePage.emit(2)">
+        Landscape
         <mat-icon class="chevron-icon" svgIcon="red:nav-next"></mat-icon>
     </div>
 </div>

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

@@ -23,15 +23,20 @@
         padding-right: 2px;
     }
 
-    .chevron-icon {
-        height: 16px;
-        transform: rotate(-90deg);
+    .page-button {
         cursor: pointer;
-        padding-left: 4px;
-        padding-right: 4px;
+        align-items: center;
+        display: inline-flex;
 
         &:hover {
             color: var(--iqser-text);
         }
     }
+
+    .chevron-icon {
+        height: 16px;
+        transform: rotate(-90deg);
+        padding-left: 4px;
+        padding-right: 4px;
+    }
 }

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

@@ -1,5 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
     selector: 'redaction-paginator',
@@ -7,6 +6,5 @@ import { Observable } from 'rxjs';
     styleUrls: ['./paginator.component.scss'],
 })
 export class PaginatorComponent {
-    @Input() loaded$: Observable<boolean>;
     @Output() readonly changePage = new EventEmitter<number>();
 }

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

@@ -1,6 +1,6 @@
 <div class="content-container">
     <div class="viewer" id="viewer"></div>
-    <redaction-paginator [loaded$]="loaded$" (changePage)="navigateTo($event)"></redaction-paginator>
+    <redaction-paginator *ngIf="loaded$ | async" (changePage)="navigateTo($event)"></redaction-paginator>
 
     <div *ngIf="changed && currentUser.isAdmin" class="changes-box">
         <iqser-icon-button

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss

@@ -13,6 +13,7 @@
 
     .viewer {
         height: 100%;
+        width: 100%;
     }
 }
 

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

@@ -170,7 +170,6 @@ export class WatermarkScreenComponent {
 
         this._instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
             this.#loaded$.next(true);
-            await this._loadLandscapePage();
             this._loadingService.stop();
             await this._drawWatermark();
         });
@@ -188,13 +187,6 @@ export class WatermarkScreenComponent {
         this._instance.UI.loadDocument(blobData, { filename: 'blank.pdf' });
     }
 
-    private async _loadLandscapePage() {
-        const blankPdf = await this._instance.Core.createDocument('/ui/assets/pdftron/blank.pdf');
-        const pageCount = this._instance.Core.documentViewer.getPageCount();
-        await this._instance.Core.documentViewer.getDocument().insertPages(blankPdf, [pageCount], pageCount + 1);
-        await this._instance.Core.documentViewer.getDocument().rotatePages([pageCount + 1], 1);
-    }
-
     private _disableElements() {
         this._instance.UI.disableElements(['header', 'toolsHeader', 'pageNavOverlay', 'textPopup']);
     }