From 6c6998e9458c14741169cfbc750092bbc21dee7f Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Mon, 6 Mar 2023 11:33:13 +0200 Subject: [PATCH 1/2] RED-6245: wip landscape page --- .../paginator/paginator.component.html | 13 +++++++ .../paginator/paginator.component.scss | 37 +++++++++++++++++++ .../paginator/paginator.component.ts | 12 ++++++ .../watermark-screen.component.html | 1 + .../watermark-screen.component.scss | 1 + .../watermark-screen.component.ts | 21 +++++++++-- .../screens/watermark/watermark.module.ts | 3 +- 7 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.scss create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html new file mode 100644 index 000000000..1bfe8cd76 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html @@ -0,0 +1,13 @@ + diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.scss new file mode 100644 index 000000000..f337dee2e --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.scss @@ -0,0 +1,37 @@ +.pagination { + z-index: 1; + position: absolute; + bottom: 20px; + right: calc(50% - (var(--viewer-width) / 2)); + transform: translate(-50%); + background: var(--iqser-background); + color: var(--iqser-grey-7); + border: 1px solid var(--iqser-grey-7); + border-radius: 8px; + padding: 6px 2px; + display: flex; + justify-content: center; + align-items: center; + + > div { + height: 16px; + cursor: default; + } + + .separator { + padding-left: 2px; + padding-right: 2px; + } + + .chevron-icon { + height: 16px; + transform: rotate(-90deg); + cursor: pointer; + padding-left: 4px; + padding-right: 4px; + + &:hover { + color: var(--iqser-text); + } + } +} diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts new file mode 100644 index 000000000..3893f6f6c --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts @@ -0,0 +1,12 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'redaction-paginator', + templateUrl: './paginator.component.html', + styleUrls: ['./paginator.component.scss'], +}) +export class PaginatorComponent { + @Input() loaded$: Observable; + @Output() readonly changePage = new EventEmitter(); +} diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html index 373bbf0a8..003da0eb8 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html @@ -1,5 +1,6 @@
+
= {}; @@ -167,6 +169,8 @@ export class WatermarkScreenComponent { this._instance.UI.setTheme(this._userPreferenceService.getTheme()); this._instance.Core.documentViewer.addEventListener('documentLoaded', async () => { + this.#loaded$.next(true); + await this._loadLandscapePage(); this._loadingService.stop(); await this._drawWatermark(); }); @@ -184,6 +188,13 @@ 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']); } @@ -201,11 +212,11 @@ export class WatermarkScreenComponent { this.form.controls.orientation.value, this.form.controls.opacity.value, this.form.controls.hexColor.value, - [1], + [1, 2], this._licenseService.activeLicenseKey, ); this._instance.Core.documentViewer.refreshAll(); - this._instance.Core.documentViewer.updateView([0], 0); + this._instance.Core.documentViewer.updateView([0, 1], 0); } private _getForm() { @@ -225,4 +236,8 @@ export class WatermarkScreenComponent { return form; } + + navigateTo($event: number) { + this._instance.Core.documentViewer.displayPageLocation($event, 0, 0); + } } diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts index b33918c7f..a2169c3fb 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts @@ -18,6 +18,7 @@ import { RedRoleGuard } from '@users/red-role.guard'; import { WATERMARK_ID } from '@red/domain'; import { WatermarkExistsGuard } from '@guards/watermark-exists.guard'; import { TranslateModule } from '@ngx-translate/core'; +import { PaginatorComponent } from './paginator/paginator.component'; const routes = [ { @@ -47,7 +48,7 @@ const routes = [ ]; @NgModule({ - declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent], + declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent, PaginatorComponent], imports: [ RouterModule.forChild(routes), CommonModule, From 20ebaa54b2f7b87eb6a1a66a3e53cff18e3d6cc8 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Mon, 6 Mar 2023 12:48:13 +0200 Subject: [PATCH 2/2] RED-6245: refactoring --- .../paginator/paginator.component.html | 12 +++++------- .../paginator/paginator.component.scss | 15 ++++++++++----- .../watermark/paginator/paginator.component.ts | 4 +--- .../watermark-screen.component.html | 2 +- .../watermark-screen.component.scss | 1 + .../watermark-screen.component.ts | 8 -------- apps/red-ui/src/assets/pdftron/blank.pdf | Bin 4911 -> 945 bytes 7 files changed, 18 insertions(+), 24 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html index 1bfe8cd76..896efd4d0 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html @@ -1,13 +1,11 @@ -