Added font size and page title to watermark screen

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

@@ -21,13 +21,15 @@
         </div>
 
         <div class="right-container">
+            <div class="heading-xl" [translate]="'watermark-screen.title'"></div>
+
             <form [formGroup]="configForm" (keyup)="configChanged()">
                 <div class="red-input-group">
-                    <label translate="Text"></label>
+                    <label translate="watermark-screen.form.text"></label>
                     <textarea formControlName="text" name="text" type="text" rows="3"></textarea>
                 </div>
                 <div class="red-input-group">
-                    <label translate="Color"></label>
+                    <label translate="watermark-screen.form.color"></label>
                     <input formControlName="color" name="color" type="text" placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}" />
                     <div
                         class="input-icon"
@@ -38,10 +40,16 @@
                         <mat-icon svgIcon="red:color-picker"></mat-icon>
                     </div>
                 </div>
+
                 <div class="red-input-group">
-                    <label translate="Opacity"></label>
+                    <label translate="watermark-screen.form.opacity"></label>
                     <input formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
                 </div>
+
+                <div class="red-input-group">
+                    <label translate="watermark-screen.form.font-size"></label>
+                    <input formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
+                </div>
             </form>
 
             <div class="actions-container">

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

@@ -13,6 +13,10 @@
     min-width: 353px;
     padding: 25px;
 
+    .heading-xl {
+        margin-bottom: 24px;
+    }
+
     .actions-container {
         display: flex;
         align-items: center;

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

@@ -18,7 +18,8 @@ export class WatermarkScreenComponent implements OnInit {
     private _initialConfig = {
         text: 'Watermark\nWatermark line 2\nWatermark line3',
         color: '#000000',
-        opacity: 50
+        opacity: 50,
+        fontSize: 40
     };
 
     @ViewChild('viewer', { static: true })
@@ -38,7 +39,8 @@ export class WatermarkScreenComponent implements OnInit {
         this.configForm = this._formBuilder.group({
             text: [this._initialConfig.text],
             color: [this._initialConfig.color],
-            opacity: [this._initialConfig.opacity]
+            opacity: [this._initialConfig.opacity],
+            fontSize: [this._initialConfig.fontSize]
         });
     }
 
@@ -84,7 +86,7 @@ export class WatermarkScreenComponent implements OnInit {
 
     private _drawWatermark() {
         const lines = this.configForm.get('text').value.split('\n');
-        const fontSize = 40;
+        const fontSize = this.configForm.get('fontSize').value;
         const lineHeight = fontSize + 10;
 
         this._instance.docViewer.setWatermark({

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

@@ -569,10 +569,17 @@
         "revert-changes": "Revert"
     },
     "watermark-screen": {
+        "form": {
+            "text": "Text",
+            "opacity": "Opacity",
+            "color": "Color",
+            "font-size": "Font Size"
+        },
         "action": {
             "save": "Save",
             "revert": "Revert"
-        }
+        },
+        "title": "Configure Watermark"
     },
     "dictionaries": "Dictionaries",
     "user-management": "User Management",

apps/red-ui/src/assets/styles/red-breadcrumbs.scss

@@ -38,5 +38,6 @@
 
     mat-icon {
         width: 16px;
+        min-width: 16px;
     }
 }