From bd880dac26b7e11c9d1d2beae5cd52cba84c66a7 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Tue, 25 Apr 2023 20:05:59 +0300 Subject: [PATCH 1/4] RED-6012 - WIP on Watermark alignment settings --- .../watermark-screen.component.html | 20 ++++++++ .../watermark-screen.component.ts | 51 ++++++++++++++++++- .../file-preview/services/stamp.service.ts | 9 ++++ .../file-preview/utils/compare-mode.utils.ts | 5 ++ .../src/app/modules/icons/icons.module.ts | 8 +++ .../translations/watermark-translations.ts | 11 ++++ apps/red-ui/src/app/utils/page-stamper.ts | 40 +++++++++++++-- apps/red-ui/src/assets/config/config.json | 4 +- apps/red-ui/src/assets/i18n/redact/de.json | 9 ++++ apps/red-ui/src/assets/i18n/redact/en.json | 9 ++++ apps/red-ui/src/assets/i18n/scm/de.json | 9 ++++ apps/red-ui/src/assets/i18n/scm/en.json | 9 ++++ .../src/assets/icons/general/align-bottom.svg | 5 ++ .../general/align-horizontal-centers.svg | 5 ++ .../src/assets/icons/general/align-left.svg | 5 ++ .../src/assets/icons/general/align-right.svg | 5 ++ .../src/assets/icons/general/align-top.svg | 5 ++ .../icons/general/align-vertical-centers.svg | 5 ++ .../icons/general/padding-left-right.svg | 5 ++ .../icons/general/padding-top-bottom.svg | 5 ++ .../src/lib/watermarks/watermark.model.ts | 4 +- .../src/lib/watermarks/watermark.ts | 22 ++++++++ 22 files changed, 242 insertions(+), 8 deletions(-) create mode 100644 apps/red-ui/src/app/translations/watermark-translations.ts create mode 100644 apps/red-ui/src/assets/icons/general/align-bottom.svg create mode 100644 apps/red-ui/src/assets/icons/general/align-horizontal-centers.svg create mode 100644 apps/red-ui/src/assets/icons/general/align-left.svg create mode 100644 apps/red-ui/src/assets/icons/general/align-right.svg create mode 100644 apps/red-ui/src/assets/icons/general/align-top.svg create mode 100644 apps/red-ui/src/assets/icons/general/align-vertical-centers.svg create mode 100644 apps/red-ui/src/assets/icons/general/padding-left-right.svg create mode 100644 apps/red-ui/src/assets/icons/general/padding-top-bottom.svg 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 859bf9fe7..e18693fc2 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 @@ -51,6 +51,26 @@ +
+ +
+ + +
+
+
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 194a20c28..fcf946981 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 @@ -14,8 +14,21 @@ import { LoadingService, TenantContextHolder, Toaster, + trackByFactory, } from '@iqser/common-ui'; -import { DOSSIER_TEMPLATE_ID, type IWatermark, type User, WATERMARK_ID, WatermarkOrientation, WatermarkOrientations } from '@red/domain'; +import { + DOSSIER_TEMPLATE_ID, + type IWatermark, + type User, + WATERMARK_HORIZONTAL_ALIGNMENTS, + WATERMARK_ID, + WATERMARK_VERTICAL_ALIGNMENTS, + WatermarkAlignment, + WatermarkHorizontalAlignment, + WatermarkOrientation, + WatermarkOrientations, + WatermarkVerticalAlignment, +} from '@red/domain'; import { stampPDFPage } from '@utils/page-stamper'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { WatermarkService } from '@services/entity-services/watermark.service'; @@ -27,6 +40,7 @@ import { WatermarksMapService } from '@services/entity-services/watermarks-map.s import { ROLES } from '@users/roles'; import { environment } from '@environments/environment'; import { tap } from 'rxjs/operators'; +import { watermarkTranslations } from '@translations/watermark-translations'; export const DEFAULT_WATERMARK: Partial = { text: 'Watermark', @@ -36,6 +50,10 @@ 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, + }, } as const; interface WatermarkForm { @@ -45,6 +63,7 @@ interface WatermarkForm { opacity: number; fontSize: number; fontType: string; + alignment: WatermarkAlignment; orientation: WatermarkOrientation; } @@ -54,6 +73,8 @@ interface WatermarkForm { }) export class WatermarkScreenComponent implements OnInit { readonly iconButtonTypes = IconButtonTypes; + readonly translations = watermarkTranslations; + readonly trackBy = trackByFactory(); readonly currentUser = getCurrentUser(); readonly form = this.#form; readonly watermark$: Observable>; @@ -69,6 +90,12 @@ export class WatermarkScreenComponent implements OnInit { readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID); readonly #watermarkId = Number(getParam(WATERMARK_ID)); #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, + }; constructor( private readonly _http: HttpClient, @@ -114,6 +141,7 @@ export class WatermarkScreenComponent implements OnInit { fontSize: [null], fontType: [null], orientation: [null], + alignment: [null], }); if (!this.currentUser.isAdmin || !this.permissionsService.has(ROLES.watermarks.write)) { @@ -177,6 +205,26 @@ export class WatermarkScreenComponent implements OnInit { this.instance.Core.documentViewer.displayPageLocation($event, 0, 0); } + async alignHorizontally(alignment: WatermarkHorizontalAlignment) { + const formValue = this.form.controls['alignment'].value; + this.form.controls['alignment'].setValue({ + ...formValue, + horizontal: 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.currentAlignment.vertical = alignment; + await this.configChanged(); + } + async #initForm(watermark: Partial) { this.#watermark = { ...watermark, dossierTemplateId: this.#dossierTemplateId }; this.form.patchValue({ ...watermark }); @@ -235,6 +283,7 @@ 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.opacity.value, this.form.controls.hexColor.value, 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 e90abcf28..7e9cd6b44 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 @@ -9,6 +9,7 @@ import { REDDocumentViewer } from '../../pdf-viewer/services/document-viewer.ser import { LicenseService } from '@services/license.service'; import { WatermarksMapService } from '@services/entity-services/watermarks-map.service'; import PDFNet = Core.PDFNet; +import { WATERMARK_HORIZONTAL_ALIGNMENTS, WATERMARK_VERTICAL_ALIGNMENTS } from '@red/domain'; @Injectable() export class StampService { @@ -58,6 +59,10 @@ 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', 50, '#dd4d50', @@ -75,6 +80,10 @@ 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.opacity, watermark.hexColor, 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 61bdeccda..2b18181de 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 @@ -1,5 +1,6 @@ import { stampPDFPage } from '../../../utils'; import { Core } from '@pdftron/webviewer'; +import { WATERMARK_HORIZONTAL_ALIGNMENTS, WATERMARK_VERTICAL_ALIGNMENTS } from '@red/domain'; export const processPage = async ( pageNumber: number, @@ -26,6 +27,10 @@ export const processPage = async ( '<< Compare Placeholder Page >>', 20, 'courier', + { + horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS, + vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS, + }, 'DIAGONAL', 33, '#ffb83b', 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 71e2161bc..d91c95afc 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -13,6 +13,12 @@ export class IconsModule { const icons = [ 'ai', 'alert-circle', + 'align-bottom', + 'align-horizontal-centers', + 'align-left', + 'align-right', + 'align-top', + 'align-vertical-centers', 'approved', 'archive', 'arrow-up', @@ -52,6 +58,8 @@ export class IconsModule { 'needs-work', 'new-tab', 'notification', + 'padding-left-right', + 'padding-top-bottom', 'page', 'preview', 'put-back', diff --git a/apps/red-ui/src/app/translations/watermark-translations.ts b/apps/red-ui/src/app/translations/watermark-translations.ts new file mode 100644 index 000000000..05434948e --- /dev/null +++ b/apps/red-ui/src/app/translations/watermark-translations.ts @@ -0,0 +1,11 @@ +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'), +} 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 7c428c383..daf1174d0 100644 --- a/apps/red-ui/src/app/utils/page-stamper.ts +++ b/apps/red-ui/src/app/utils/page-stamper.ts @@ -1,6 +1,7 @@ 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'; async function createPageSet(pdfNet: typeof Core.PDFNet, pages: number[]) { const pageSet = await pdfNet.PageSet.create(); @@ -38,6 +39,7 @@ export async function stampPDFPage( text: string, fontSize: number, fontType: string, + alignment: WatermarkAlignment, orientation: 'DIAGONAL' | 'HORIZONTAL' | 'VERTICAL' | 'TOP_LEFT', opacity: number, color: string, @@ -56,21 +58,51 @@ export async function stampPDFPage( await stamper.setFontColor(await pdfNet.ColorPt.init(r / 255, g / 255, b / 255)); await stamper.setOpacity(opacity / 100); + let horizontalAlignment: number; + let verticalAlignment: number; + + console.log(alignment); + switch (alignment.horizontal) { + case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_LEFT: + horizontalAlignment = -1; + break; + case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS: + horizontalAlignment = 0; + break; + case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_RIGHT: + horizontalAlignment = 1; + break; + } + + switch (alignment.vertical) { + case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_TOP: + verticalAlignment = 1; + break; + case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS: + verticalAlignment = 0; + break; + case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_BOTTOM: + verticalAlignment = -1; + break; + } + + await stamper.setAlignment(horizontalAlignment, verticalAlignment); + switch (orientation) { case 'VERTICAL': - await stamper.setAlignment(0, 0); + // await stamper.setAlignment(-1, 1); await stamper.setRotation(-90); break; case 'HORIZONTAL': break; case 'TOP_LEFT': - await stamper.setAlignment(-1, 1); + // await stamper.setAlignment(-1, 1); await stamper.setRotation(90); await stamper.setPosition(20, 20); break; case 'DIAGONAL': default: - await stamper.setAlignment(0, 0); + // await stamper.setAlignment(0, 0); await stamper.setRotation(-45); } @@ -78,7 +110,7 @@ export async function stampPDFPage( // in case there are japanese characters in the text, we add them to the font const fontWithAllTextChars = await pdfNet.Font.createFromFontDescriptor(document, initialFont, text); await stamper.setFont(fontWithAllTextChars); - await stamper.setTextAlignment(0); + await stamper.setTextAlignment(1); await stamper.stampText(document, text, pageSet); }, licenseKey); } diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index 0f864cec1..68f20625d 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -1,7 +1,7 @@ { "ADMIN_CONTACT_NAME": null, "ADMIN_CONTACT_URL": null, - "API_URL": "https://dom2.iqser.cloud/redaction-gateway-v1", + "API_URL": "https://dev-09.iqser.cloud/redaction-gateway-v1", "APP_NAME": "RedactManager", "AUTO_READ_TIME": 3, "BACKEND_APP_VERSION": "4.4.40", @@ -11,7 +11,7 @@ "MAX_RETRIES_ON_SERVER_ERROR": 3, "OAUTH_CLIENT_ID": "redaction", "OAUTH_IDP_HINT": null, - "OAUTH_URL": "https://dom2.iqser.cloud/auth", + "OAUTH_URL": "https://dev-09.iqser.cloud/auth", "RECENT_PERIOD_IN_HOURS": 24, "SELECTION_MODE": "structural", "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview", diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index 6a0bfceb2..7085e9738 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -2259,7 +2259,16 @@ "revert": "Rückgängig machen", "save": "Änderungen speichern" }, + "alignment": { + "align-bottom": "", + "align-horizontal-centers": "", + "align-left": "", + "align-right": "", + "align-top": "", + "align-vertical-centers": "" + }, "form": { + "alignment": "", "color": "Farbe", "color-placeholder": "", "font-size": "Schriftgröße", diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index 893c1decf..04e80eb2e 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -2259,7 +2259,16 @@ "revert": "Revert", "save": "Save Changes" }, + "alignment": { + "align-bottom": "Align bottom", + "align-horizontal-centers": "Align horizontal centers", + "align-left": "Align left", + "align-right": "Align right", + "align-top": "Align top", + "align-vertical-centers": "Align vertical centers" + }, "form": { + "alignment": "Alignment", "color": "Color", "color-placeholder": "#", "font-size": "Font Size", diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index d59d6e4b8..0bc88a714 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -2259,7 +2259,16 @@ "revert": "Rückgängig machen", "save": "Änderungen speichern" }, + "alignment": { + "align-bottom": "", + "align-horizontal-centers": "", + "align-left": "", + "align-right": "", + "align-top": "", + "align-vertical-centers": "" + }, "form": { + "alignment": "", "color": "Farbe", "color-placeholder": "", "font-size": "Schriftgröße", diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index 951f40d13..172497749 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -2259,7 +2259,16 @@ "revert": "Revert", "save": "Save Changes" }, + "alignment": { + "align-bottom": "Align bottom", + "align-horizontal-centers": "Align horizontal centers", + "align-left": "Align left", + "align-right": "Align right", + "align-top": "Align top", + "align-vertical-centers": "Align vertical centers" + }, "form": { + "alignment": "Alignment", "color": "Color", "color-placeholder": "#", "font-size": "Font Size", diff --git a/apps/red-ui/src/assets/icons/general/align-bottom.svg b/apps/red-ui/src/assets/icons/general/align-bottom.svg new file mode 100644 index 000000000..5c0aa5a4b --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/align-bottom.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/align-horizontal-centers.svg b/apps/red-ui/src/assets/icons/general/align-horizontal-centers.svg new file mode 100644 index 000000000..394f1f8e7 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/align-horizontal-centers.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/align-left.svg b/apps/red-ui/src/assets/icons/general/align-left.svg new file mode 100644 index 000000000..1208036c7 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/align-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/align-right.svg b/apps/red-ui/src/assets/icons/general/align-right.svg new file mode 100644 index 000000000..673401d11 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/align-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/align-top.svg b/apps/red-ui/src/assets/icons/general/align-top.svg new file mode 100644 index 000000000..9ffdac14c --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/align-top.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/align-vertical-centers.svg b/apps/red-ui/src/assets/icons/general/align-vertical-centers.svg new file mode 100644 index 000000000..8e65929ff --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/align-vertical-centers.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/padding-left-right.svg b/apps/red-ui/src/assets/icons/general/padding-left-right.svg new file mode 100644 index 000000000..68c674250 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/padding-left-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/padding-top-bottom.svg b/apps/red-ui/src/assets/icons/general/padding-top-bottom.svg new file mode 100644 index 000000000..37331de99 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/padding-top-bottom.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/libs/red-domain/src/lib/watermarks/watermark.model.ts b/libs/red-domain/src/lib/watermarks/watermark.model.ts index 06b667c03..b08fd0fc1 100644 --- a/libs/red-domain/src/lib/watermarks/watermark.model.ts +++ b/libs/red-domain/src/lib/watermarks/watermark.model.ts @@ -1,4 +1,4 @@ -import { IWatermark, WatermarkOrientation } from './watermark'; +import { IWatermark, WatermarkAlignment, WatermarkOrientation } from './watermark'; import { Entity } from '@iqser/common-ui'; export class Watermark extends Entity { @@ -10,6 +10,7 @@ export class Watermark extends Entity { readonly hexColor: string; readonly opacity: number; readonly orientation: WatermarkOrientation; + readonly alignment: WatermarkAlignment; readonly text: string; readonly name: string; readonly createdBy?: string; @@ -28,6 +29,7 @@ export class Watermark extends Entity { this.hexColor = watermark.hexColor; this.opacity = watermark.opacity; this.orientation = watermark.orientation; + this.alignment = watermark.alignment; 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 27270bb51..10567cead 100644 --- a/libs/red-domain/src/lib/watermarks/watermark.ts +++ b/libs/red-domain/src/lib/watermarks/watermark.ts @@ -7,6 +7,7 @@ export interface IWatermark { hexColor: string; opacity: number; orientation: WatermarkOrientation; + alignment: WatermarkAlignment; text: string; name: string; createdBy?: string; @@ -14,9 +15,30 @@ export interface IWatermark { dateModified?: string; } +export const WATERMARK_HORIZONTAL_ALIGNMENTS = { + ALIGN_LEFT: 'align-left', + ALIGN_HORIZONTAL_CENTERS: 'align-horizontal-centers', + ALIGN_RIGHT: 'align-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', +} as const; +export type WatermarkVerticalAlignmentKey = keyof typeof WATERMARK_VERTICAL_ALIGNMENTS; +export type WatermarkVerticalAlignment = (typeof WATERMARK_VERTICAL_ALIGNMENTS)[WatermarkVerticalAlignmentKey]; + export const WatermarkOrientations = { DIAGONAL: 'DIAGONAL', HORIZONTAL: 'HORIZONTAL', VERTICAL: 'VERTICAL', } as const; export type WatermarkOrientation = keyof typeof WatermarkOrientations; + +export interface WatermarkAlignment { + horizontal: WatermarkHorizontalAlignment; + vertical: WatermarkVerticalAlignment; +} From 0e1a732843ea62d78c5ea1b4f881c1806987bd7e Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Tue, 23 May 2023 15:18:38 +0300 Subject: [PATCH 2/4] RED-6012 - Watermark alignment settings --- .../watermark-screen.component.html | 68 +++++++++++++++---- .../watermark-screen.component.scss | 45 +++++++++++- .../watermark-screen.component.ts | 36 ++++------ .../file-preview/services/stamp.service.ts | 12 ++-- .../file-preview/utils/compare-mode.utils.ts | 6 +- .../src/app/modules/icons/icons.module.ts | 12 ++-- .../translations/watermark-translations.ts | 18 +++-- apps/red-ui/src/app/utils/page-stamper.ts | 27 +++++--- ...enters.svg => align-horizontal-center.svg} | 0 ...ign-left.svg => align-horizontal-left.svg} | 0 ...n-right.svg => align-horizontal-right.svg} | 0 ...n-bottom.svg => align-vertical-bottom.svg} | 0 ...-centers.svg => align-vertical-center.svg} | 0 .../{align-top.svg => align-vertical-top.svg} | 0 .../src/lib/watermarks/watermark.model.ts | 16 ++++- .../src/lib/watermarks/watermark.ts | 15 ++-- 16 files changed, 172 insertions(+), 83 deletions(-) rename apps/red-ui/src/assets/icons/general/{align-horizontal-centers.svg => align-horizontal-center.svg} (100%) rename apps/red-ui/src/assets/icons/general/{align-left.svg => align-horizontal-left.svg} (100%) rename apps/red-ui/src/assets/icons/general/{align-right.svg => align-horizontal-right.svg} (100%) rename apps/red-ui/src/assets/icons/general/{align-bottom.svg => align-vertical-bottom.svg} (100%) rename apps/red-ui/src/assets/icons/general/{align-vertical-centers.svg => align-vertical-center.svg} (100%) rename apps/red-ui/src/assets/icons/general/{align-top.svg => align-vertical-top.svg} (100%) 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]; From d9904e1d1364682f17e73d01ee0d82723db4f09a Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Tue, 23 May 2023 22:00:18 +0300 Subject: [PATCH 3/4] RED-6012 - removed commented code --- .../watermark-screen.component.html | 34 +------------------ .../watermark-screen.component.scss | 6 ++-- 2 files changed, 4 insertions(+), 36 deletions(-) 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 0470f3e9b..050bd5ee1 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 @@ -52,40 +52,8 @@
- +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Date: Tue, 23 May 2023 22:21:07 +0300 Subject: [PATCH 4/4] RED-6012 - added tooltips --- .../watermark-screen/watermark-screen.component.html | 4 ++++ .../app/modules/admin/screens/watermark/watermark.module.ts | 2 ++ 2 files changed, 6 insertions(+) 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 050bd5ee1..eb02b8739 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 @@ -60,6 +60,8 @@ class="alignment" [class.active]="currentAlignment.horizontal === alignment" [ngClass]="'horizontal-' + alignment.toLowerCase()" + [matTooltip]="translations.HORIZONTAL[alignment] | translate" + [matTooltipPosition]="'above'" (click)="alignHorizontally(alignment)" > @@ -71,6 +73,8 @@ class="alignment" [class.active]="currentAlignment.vertical === alignment" [ngClass]="'vertical-' + alignment.toLowerCase()" + [matTooltip]="translations.VERTICAL[alignment] | translate" + [matTooltipPosition]="'above'" (click)="alignVertically(alignment)" > 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 02c8c9e28..9df82e8c9 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 @@ -26,6 +26,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { MatLegacySliderModule } from '@angular/material/legacy-slider'; import { ColorPickerModule } from 'ngx-color-picker'; import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle'; +import { MatTooltipModule } from '@angular/material/tooltip'; const routes: IqserRoutes = [ { @@ -73,6 +74,7 @@ const routes: IqserRoutes = [ HasScrollbarDirective, IqserAllowDirective, TenantPipe, + MatTooltipModule, ], }) export class WatermarkModule {}