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..896efd4d0 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html @@ -0,0 +1,11 @@ + 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..7293a732d --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.scss @@ -0,0 +1,42 @@ +.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; + } + + .page-button { + cursor: pointer; + align-items: center; + display: inline-flex; + + &:hover { + color: var(--iqser-text); + } + } + + .chevron-icon { + height: 16px; + transform: rotate(-90deg); + padding-left: 4px; + padding-right: 4px; + } +} 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..02ba06c3b --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts @@ -0,0 +1,10 @@ +import { Component, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'redaction-paginator', + templateUrl: './paginator.component.html', + styleUrls: ['./paginator.component.scss'], +}) +export class PaginatorComponent { + @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..ba2ad0723 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,7 @@ export class WatermarkScreenComponent { this._instance.UI.setTheme(this._userPreferenceService.getTheme()); this._instance.Core.documentViewer.addEventListener('documentLoaded', async () => { + this.#loaded$.next(true); this._loadingService.stop(); await this._drawWatermark(); }); @@ -201,11 +204,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 +228,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, diff --git a/apps/red-ui/src/assets/pdftron/blank.pdf b/apps/red-ui/src/assets/pdftron/blank.pdf index 757bb1f36..03dc3db0a 100644 Binary files a/apps/red-ui/src/assets/pdftron/blank.pdf and b/apps/red-ui/src/assets/pdftron/blank.pdf differ