Minor Fixes

apps/red-ui/src/app/app.module.ts

@@ -223,8 +223,7 @@ const routes = [
                                         component: WatermarkScreenComponent,
                                         canActivate: [CompositeRouteGuard],
                                         data: {
-                                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
+                                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
-                                            requiredRoles: ['RED_ADMIN']
                                         }
                                     },
                                     { path: '', redirectTo: 'dictionaries', pathMatch: 'full' }

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

@@ -9,34 +9,6 @@
 
             <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
         </div>
-        <!--        <div class="actions">-->
-        <!--            <redaction-circle-button-->
-        <!--                (action)="download()"-->
-        <!--                tooltip="rules-screen.action.download"-->
-        <!--                tooltipPosition="below"-->
-        <!--                icon="red:download"-->
-        <!--            ></redaction-circle-button>-->
-
-        <!--            <redaction-circle-button-->
-        <!--                (action)="fileInput.click()"-->
-        <!--                *ngIf="permissionsService.isAdmin()"-->
-        <!--                tooltip="rules-screen.action.upload"-->
-        <!--                tooltipPosition="below"-->
-        <!--                icon="red:upload"-->
-        <!--            >-->
-        <!--            </redaction-circle-button>-->
-
-        <!--            <input #fileInput (change)="upload($event)" hidden class="file-upload-input" type="file" accept="text/plain" />-->
-
-        <!--            <redaction-circle-button-->
-        <!--                class="ml-6"-->
-        <!--                *ngIf="permissionsService.isUser()"-->
-        <!--                [routerLink]="['/ui/projects/']"-->
-        <!--                tooltip="common.close"-->
-        <!--                tooltipPosition="before"-->
-        <!--                icon="red:close"-->
-        <!--            ></redaction-circle-button>-->
-        <!--        </div>-->
     </div>
 
     <div class="red-content-inner">

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

@@ -40,6 +40,7 @@
                     <textarea
                         redactionHasScrollbar
                         formControlName="text"
+                        [placeholder]="'watermark-screen.placeholder' | translate"
                         (mousemove)="triggerChanges()"
                         class="w-full"
                         name="text"
@@ -55,7 +56,7 @@
                             [class.active]="configForm.get('orientation').value === option"
                             [ngClass]="option"
                             (click)="configForm.get('orientation').setValue(option); configChanged()"
-                            *ngFor="let option of ['horizontal', 'diagonal', 'vertical']"
+                            *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
                         >
                             <span>ABC</span>
                         </div>

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

@@ -62,13 +62,13 @@
                 font-family: monospace;
             }
 
-            &.diagonal {
+            &.DIAGONAL {
                 > span {
                     transform: rotate(-45deg);
                 }
             }
 
-            &.vertical {
+            &.VERTICAL {
                 > span {
                     transform: rotate(-90deg);
                 }

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

@@ -13,16 +13,12 @@ import { TranslateService } from '@ngx-translate/core';
 import { ActivatedRoute } from '@angular/router';
 
 export const DEFAULT_WATERMARK: WatermarkModel = {
-    text:
+    text: null,
-        'This document was submitted to the European Food Safety Authority by a Syngenta Group company.\n' +
-        'It may be subject to rights such as intellectual property and copy rights of the owner and third parties.\n' +
-        'Furthermore, this document may fall under a regulatory data protection regime.\n' +
-        'Consequently, any publication, distribution, reproduction and/or publishing and any commercial exploitation \n' +
-        'and use of this document or its contents without the permission of the owner of this document\n' +
-        'may therefore be prohibited and violate the rights of its owner.',
     hexColor: '#dd4d50',
     opacity: 70,
-    fontSize: 11
+    fontSize: 11,
+    fontType: 'sans-serif',
+    orientation: 'DIAGONAL'
 };
 
 @Component({
@@ -45,7 +41,7 @@ export class WatermarkScreenComponent implements OnInit {
             return true;
         }
         for (const key of Object.keys(this._watermark)) {
-            if (this._watermark[key] !== this.configForm.get(key).value) {
+            if (this._watermark[key] !== this.configForm.get(key)?.value) {
                 return true;
             }
         }
@@ -76,12 +72,12 @@ export class WatermarkScreenComponent implements OnInit {
         this._watermarkControllerService.getWatermark(this.appStateService.activeRuleSetId).subscribe(
             (watermark) => {
                 this._watermark = watermark;
-                this.configForm.setValue({ ...this._watermark, fontType: 'sans-serif', orientation: 'diagonal' });
+                this.configForm.setValue({ ...this._watermark });
                 this._loadViewer();
             },
             () => {
                 this._watermark = DEFAULT_WATERMARK;
-                this.configForm.setValue({ ...this._watermark, fontType: 'sans-serif', orientation: 'diagonal' });
+                this.configForm.setValue({ ...this._watermark });
                 this._loadViewer();
             }
         );
@@ -112,7 +108,7 @@ export class WatermarkScreenComponent implements OnInit {
     }
 
     public revert() {
-        this.configForm.setValue({ ...this._watermark, fontType: 'sans-serif', orientation: 'diagonal' });
+        this.configForm.setValue({ ...this._watermark });
         this.configChanged();
     }
 
@@ -145,7 +141,7 @@ export class WatermarkScreenComponent implements OnInit {
     }
 
     private _drawWatermark() {
-        const text = this.configForm.get('text').value;
+        const text = this.configForm.get('text').value || '';
         const lines = text.split('\n');
         const fontSize = this.configForm.get('fontSize').value;
         const fontType = this.configForm.get('fontType').value;
@@ -154,7 +150,7 @@ export class WatermarkScreenComponent implements OnInit {
         const opacity = this.configForm.get('opacity').value;
         const color = this.configForm.get('hexColor').value;
 
-        if (orientation === 'diagonal') {
+        if (orientation === 'ROTATE_LEFT_45_DEG') {
             this._instance.docViewer.setWatermark({
                 diagonal: {
                     text,
@@ -173,10 +169,10 @@ export class WatermarkScreenComponent implements OnInit {
 
                     for (let idx = 0; idx < lines.length; ++idx) {
                         ctx.save();
-                        if (orientation === 'horizontal') {
+                        if (orientation === 'HORIZONTAL') {
                             ctx.translate(pageWidth / 2, pageHeight / 2 - (lineHeight * lines.length) / 2);
                         }
-                        if (orientation === 'vertical') {
+                        if (orientation === 'VERTICAL') {
                             ctx.translate(pageWidth / 2, 0);
                             ctx.rotate(-Math.PI / 2);
                             ctx.translate(-pageHeight / 2, -(lineHeight * lines.length) / 2);

apps/red-ui/src/assets/i18n/en.json

@@ -665,6 +665,7 @@
         "revert-changes": "Revert"
     },
     "watermark-screen": {
+        "placeholder": "Watermark ... ",
         "form": {
             "text-placeholder": "Enter text",
             "opacity": "Opacity",

libs/red-ui-http/src/lib/model/watermarkModel.ts

@@ -14,15 +14,16 @@ export interface WatermarkModel {
     fontSize?: number;
     hexColor?: string;
     opacity?: number;
+    fontType?: string;
     text?: string;
-    watermarkOrientation?: WatermarkModel.WatermarkOrientationEnum;
+    orientation?: WatermarkModel.WatermarkOrientationEnum;
 }
 
 export namespace WatermarkModel {
-    export type WatermarkOrientationEnum = 'VERTICAL' | 'HORIZONTAL' | 'ROTATE_LEFT_45_DEG';
+    export type WatermarkOrientationEnum = 'VERTICAL' | 'HORIZONTAL' | 'DIAGONAL';
     export const WatermarkOrientationEnum = {
         VERTICAL: 'VERTICAL' as WatermarkOrientationEnum,
         HORIZONTAL: 'HORIZONTAL' as WatermarkOrientationEnum,
-        ROTATELEFT45DEG: 'ROTATE_LEFT_45_DEG' as WatermarkOrientationEnum
+        DIAGONAL: 'DIAGONAL' as WatermarkOrientationEnum
     };
 }