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 e18693fc2..0470f3e9b 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 @@ -54,20 +54,60 @@
- - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+ +
+
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss index 7ec4b7bc0..7a5f7f6d1 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss @@ -1,5 +1,3 @@ -@use 'variables'; - :host { display: flex; flex-direction: row !important; @@ -92,4 +90,47 @@ } } } + + .alignment-buttons { + width: 99px; + height: 30px; + display: flex; + justify-content: space-between; + border-radius: 6px; + border: 1px solid var(--iqser-grey-4); + margin-right: 10px; + + .alignment { + width: 33px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + mat-icon { + width: 17px; + } + + &.active { + background-color: var(--iqser-primary); + cursor: default; + } + + &.horizontal-left, + &.vertical-top { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + &.horizontal-right, + &.vertical-bottom { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + } + + .alignment:not(.active):hover { + background: var(--iqser-btn-bg-hover); + } + } } diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts index 4d0c9633d..829937035 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts @@ -49,10 +49,8 @@ export const DEFAULT_WATERMARK: Partial = { fontSize: 40, fontType: 'helvetica', orientation: WatermarkOrientations.HORIZONTAL, - alignment: { - horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS, - vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS, - }, + horizontalTextAlignment: WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER, + verticalTextAlignment: WATERMARK_VERTICAL_ALIGNMENTS.CENTER, } as const; interface WatermarkForm { @@ -62,8 +60,9 @@ interface WatermarkForm { opacity: number; fontSize: number; fontType: string; - alignment: WatermarkAlignment; orientation: WatermarkOrientation; + horizontalTextAlignment: WatermarkHorizontalAlignment; + verticalTextAlignment: WatermarkVerticalAlignment; } @Component({ @@ -93,10 +92,7 @@ export class WatermarkScreenComponent implements OnInit { #watermark: Partial = {}; readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS); readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS); - currentAlignment: WatermarkAlignment = { - horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS, - vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS, - }; + currentAlignment: WatermarkAlignment; constructor( private readonly _http: HttpClient, @@ -143,7 +139,8 @@ export class WatermarkScreenComponent implements OnInit { fontSize: [null], fontType: [null], orientation: [null], - alignment: [null], + horizontalTextAlignment: [null], + verticalTextAlignment: [null], }); if (!this.currentUser.isAdmin || !this.permissionsService.has(ROLES.watermarks.write)) { @@ -208,21 +205,13 @@ export class WatermarkScreenComponent implements OnInit { } async alignHorizontally(alignment: WatermarkHorizontalAlignment) { - const formValue = this.form.controls['alignment'].value; - this.form.controls['alignment'].setValue({ - ...formValue, - horizontal: alignment, - }); + this.form.controls['horizontalTextAlignment'].setValue(alignment); this.currentAlignment.horizontal = alignment; await this.configChanged(); } async alignVertically(alignment: WatermarkVerticalAlignment) { - const formValue = this.form.controls['alignment'].value; - this.form.controls['alignment'].setValue({ - ...formValue, - vertical: alignment, - }); + this.form.controls['verticalTextAlignment'].setValue(alignment); this.currentAlignment.vertical = alignment; await this.configChanged(); } @@ -230,6 +219,10 @@ export class WatermarkScreenComponent implements OnInit { async #initForm(watermark: Partial) { this.#watermark = { ...watermark, dossierTemplateId: this.#dossierTemplateId }; this.form.patchValue({ ...watermark }); + this.currentAlignment = { + horizontal: this.#watermark.horizontalTextAlignment, + vertical: this.#watermark.verticalTextAlignment, + }; } async #loadViewer() { @@ -285,8 +278,9 @@ export class WatermarkScreenComponent implements OnInit { this.form.controls.text.value || '', this.form.controls.fontSize.value, this.form.controls.fontType.value, - this.form.controls.alignment.value, this.form.controls.orientation.value, + this.form.controls.horizontalTextAlignment.value, + this.form.controls.verticalTextAlignment.value, this.form.controls.opacity.value, this.form.controls.hexColor.value, [1, 2], diff --git a/apps/red-ui/src/app/modules/file-preview/services/stamp.service.ts b/apps/red-ui/src/app/modules/file-preview/services/stamp.service.ts index 7e9cd6b44..76f483d3f 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/stamp.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/stamp.service.ts @@ -59,11 +59,9 @@ export class StampService { this._translateService.instant('file-preview.excluded-from-redaction') as string, 17, 'courier', - { - horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS, - vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS, - }, 'TOP_LEFT', + WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER, + WATERMARK_VERTICAL_ALIGNMENTS.CENTER, 50, '#dd4d50', excludedPages, @@ -80,11 +78,9 @@ export class StampService { watermark.text, watermark.fontSize, watermark.fontType, - { - horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS, - vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS, - }, watermark.orientation, + watermark.horizontalTextAlignment, + watermark.verticalTextAlignment, watermark.opacity, watermark.hexColor, Array.from({ length: await document.getPageCount() }, (_x, i) => i + 1), diff --git a/apps/red-ui/src/app/modules/file-preview/utils/compare-mode.utils.ts b/apps/red-ui/src/app/modules/file-preview/utils/compare-mode.utils.ts index 2b18181de..757bf5703 100644 --- a/apps/red-ui/src/app/modules/file-preview/utils/compare-mode.utils.ts +++ b/apps/red-ui/src/app/modules/file-preview/utils/compare-mode.utils.ts @@ -27,11 +27,9 @@ export const processPage = async ( '<< Compare Placeholder Page >>', 20, 'courier', - { - horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS, - vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS, - }, 'DIAGONAL', + WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER, + WATERMARK_VERTICAL_ALIGNMENTS.CENTER, 33, '#ffb83b', [await mergedDocument.getPageCount()], diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index d91c95afc..3d43160b4 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -13,12 +13,12 @@ export class IconsModule { const icons = [ 'ai', 'alert-circle', - 'align-bottom', - 'align-horizontal-centers', - 'align-left', - 'align-right', - 'align-top', - 'align-vertical-centers', + 'align-horizontal-center', + 'align-horizontal-left', + 'align-horizontal-right', + 'align-vertical-bottom', + 'align-vertical-center', + 'align-vertical-top', 'approved', 'archive', 'arrow-up', diff --git a/apps/red-ui/src/app/translations/watermark-translations.ts b/apps/red-ui/src/app/translations/watermark-translations.ts index 05434948e..302758942 100644 --- a/apps/red-ui/src/app/translations/watermark-translations.ts +++ b/apps/red-ui/src/app/translations/watermark-translations.ts @@ -1,11 +1,15 @@ import { WatermarkAlignment, WatermarkHorizontalAlignment, WatermarkVerticalAlignment } from '@red/domain'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -export const watermarkTranslations: { readonly [key in WatermarkHorizontalAlignment & WatermarkVerticalAlignment]?: string } = { - 'align-left': _('watermark-screen.alignment.align-left'), - 'align-horizontal-centers': _('watermark-screen.alignment.align-horizontal-centers'), - 'align-right': _('watermark-screen.alignment.align-right'), - 'align-top': _('watermark-screen.alignment.align-top'), - 'align-vertical-centers': 'watermark-screen.alignment.align-vertical-centers', - 'align-bottom': _('watermark-screen.alignment.align-bottom'), +export const watermarkTranslations: Record> = { + HORIZONTAL: { + LEFT: _('watermark-screen.alignment.align-left'), + CENTER: _('watermark-screen.alignment.align-horizontal-centers'), + RIGHT: _('watermark-screen.alignment.align-right'), + }, + VERTICAL: { + TOP: _('watermark-screen.alignment.align-top'), + CENTER: 'watermark-screen.alignment.align-vertical-centers', + BOTTOM: _('watermark-screen.alignment.align-bottom'), + }, } as const; diff --git a/apps/red-ui/src/app/utils/page-stamper.ts b/apps/red-ui/src/app/utils/page-stamper.ts index daf1174d0..151322500 100644 --- a/apps/red-ui/src/app/utils/page-stamper.ts +++ b/apps/red-ui/src/app/utils/page-stamper.ts @@ -1,7 +1,12 @@ import { hexToRgb } from './functions'; import { Core } from '@pdftron/webviewer'; import PDFDoc = Core.PDFNet.PDFDoc; -import { WATERMARK_HORIZONTAL_ALIGNMENTS, WATERMARK_VERTICAL_ALIGNMENTS, WatermarkAlignment } from '@red/domain'; +import { + WATERMARK_HORIZONTAL_ALIGNMENTS, + WATERMARK_VERTICAL_ALIGNMENTS, + WatermarkHorizontalAlignment, + WatermarkVerticalAlignment, +} from '@red/domain'; async function createPageSet(pdfNet: typeof Core.PDFNet, pages: number[]) { const pageSet = await pdfNet.PageSet.create(); @@ -39,8 +44,9 @@ export async function stampPDFPage( text: string, fontSize: number, fontType: string, - alignment: WatermarkAlignment, orientation: 'DIAGONAL' | 'HORIZONTAL' | 'VERTICAL' | 'TOP_LEFT', + horizontalTextAlignment: WatermarkHorizontalAlignment, + verticalTextAlignment: WatermarkVerticalAlignment, opacity: number, color: string, pages: number[], @@ -61,27 +67,26 @@ export async function stampPDFPage( let horizontalAlignment: number; let verticalAlignment: number; - console.log(alignment); - switch (alignment.horizontal) { - case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_LEFT: + switch (horizontalTextAlignment) { + case WATERMARK_HORIZONTAL_ALIGNMENTS.LEFT: horizontalAlignment = -1; break; - case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS: + case WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER: horizontalAlignment = 0; break; - case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_RIGHT: + case WATERMARK_HORIZONTAL_ALIGNMENTS.RIGHT: horizontalAlignment = 1; break; } - switch (alignment.vertical) { - case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_TOP: + switch (verticalTextAlignment) { + case WATERMARK_VERTICAL_ALIGNMENTS.TOP: verticalAlignment = 1; break; - case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS: + case WATERMARK_VERTICAL_ALIGNMENTS.CENTER: verticalAlignment = 0; break; - case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_BOTTOM: + case WATERMARK_VERTICAL_ALIGNMENTS.BOTTOM: verticalAlignment = -1; break; } diff --git a/apps/red-ui/src/assets/icons/general/align-horizontal-centers.svg b/apps/red-ui/src/assets/icons/general/align-horizontal-center.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/align-horizontal-centers.svg rename to apps/red-ui/src/assets/icons/general/align-horizontal-center.svg diff --git a/apps/red-ui/src/assets/icons/general/align-left.svg b/apps/red-ui/src/assets/icons/general/align-horizontal-left.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/align-left.svg rename to apps/red-ui/src/assets/icons/general/align-horizontal-left.svg diff --git a/apps/red-ui/src/assets/icons/general/align-right.svg b/apps/red-ui/src/assets/icons/general/align-horizontal-right.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/align-right.svg rename to apps/red-ui/src/assets/icons/general/align-horizontal-right.svg diff --git a/apps/red-ui/src/assets/icons/general/align-bottom.svg b/apps/red-ui/src/assets/icons/general/align-vertical-bottom.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/align-bottom.svg rename to apps/red-ui/src/assets/icons/general/align-vertical-bottom.svg diff --git a/apps/red-ui/src/assets/icons/general/align-vertical-centers.svg b/apps/red-ui/src/assets/icons/general/align-vertical-center.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/align-vertical-centers.svg rename to apps/red-ui/src/assets/icons/general/align-vertical-center.svg diff --git a/apps/red-ui/src/assets/icons/general/align-top.svg b/apps/red-ui/src/assets/icons/general/align-vertical-top.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/align-top.svg rename to apps/red-ui/src/assets/icons/general/align-vertical-top.svg diff --git a/libs/red-domain/src/lib/watermarks/watermark.model.ts b/libs/red-domain/src/lib/watermarks/watermark.model.ts index b08fd0fc1..adb9a11e1 100644 --- a/libs/red-domain/src/lib/watermarks/watermark.model.ts +++ b/libs/red-domain/src/lib/watermarks/watermark.model.ts @@ -1,4 +1,12 @@ -import { IWatermark, WatermarkAlignment, WatermarkOrientation } from './watermark'; +import { + IWatermark, + WATERMARK_HORIZONTAL_ALIGNMENTS, + WATERMARK_VERTICAL_ALIGNMENTS, + WatermarkAlignment, + WatermarkHorizontalAlignment, + WatermarkOrientation, + WatermarkVerticalAlignment, +} from './watermark'; import { Entity } from '@iqser/common-ui'; export class Watermark extends Entity { @@ -10,7 +18,8 @@ export class Watermark extends Entity { readonly hexColor: string; readonly opacity: number; readonly orientation: WatermarkOrientation; - readonly alignment: WatermarkAlignment; + readonly horizontalTextAlignment: WatermarkHorizontalAlignment; + readonly verticalTextAlignment: WatermarkVerticalAlignment; readonly text: string; readonly name: string; readonly createdBy?: string; @@ -29,7 +38,8 @@ export class Watermark extends Entity { this.hexColor = watermark.hexColor; this.opacity = watermark.opacity; this.orientation = watermark.orientation; - this.alignment = watermark.alignment; + this.horizontalTextAlignment = watermark.horizontalTextAlignment ?? WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER; + this.verticalTextAlignment = watermark.verticalTextAlignment ?? WATERMARK_VERTICAL_ALIGNMENTS.CENTER; this.text = watermark.text; this.name = watermark.name; this.createdBy = watermark.createdBy; diff --git a/libs/red-domain/src/lib/watermarks/watermark.ts b/libs/red-domain/src/lib/watermarks/watermark.ts index 10567cead..c7c3fc4eb 100644 --- a/libs/red-domain/src/lib/watermarks/watermark.ts +++ b/libs/red-domain/src/lib/watermarks/watermark.ts @@ -7,7 +7,8 @@ export interface IWatermark { hexColor: string; opacity: number; orientation: WatermarkOrientation; - alignment: WatermarkAlignment; + horizontalTextAlignment: WatermarkHorizontalAlignment; + verticalTextAlignment: WatermarkVerticalAlignment; text: string; name: string; createdBy?: string; @@ -16,17 +17,17 @@ export interface IWatermark { } export const WATERMARK_HORIZONTAL_ALIGNMENTS = { - ALIGN_LEFT: 'align-left', - ALIGN_HORIZONTAL_CENTERS: 'align-horizontal-centers', - ALIGN_RIGHT: 'align-right', + LEFT: 'LEFT', + CENTER: 'CENTER', + RIGHT: 'RIGHT', } as const; export type WatermarkHorizontalAlignmentKey = keyof typeof WATERMARK_HORIZONTAL_ALIGNMENTS; export type WatermarkHorizontalAlignment = (typeof WATERMARK_HORIZONTAL_ALIGNMENTS)[WatermarkHorizontalAlignmentKey]; export const WATERMARK_VERTICAL_ALIGNMENTS = { - ALIGN_TOP: 'align-top', - ALIGN_VERTICAL_CENTERS: 'align-vertical-centers', - ALIGN_BOTTOM: 'align-bottom', + TOP: 'TOP', + CENTER: 'CENTER', + BOTTOM: 'BOTTOM', } as const; export type WatermarkVerticalAlignmentKey = keyof typeof WATERMARK_VERTICAL_ALIGNMENTS; export type WatermarkVerticalAlignment = (typeof WATERMARK_VERTICAL_ALIGNMENTS)[WatermarkVerticalAlignmentKey];