diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index 3bf16b4a2..4bd0681fe 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -21,13 +21,15 @@
+
+
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
index 7b3a81867..1d6dbb5a4 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
+++ b/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;
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
index 2dee11c24..4f68d0f6f 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
+++ b/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({
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index b084734a5..b3b60c130 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -570,10 +570,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",
diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
index d6d0613f2..250b27ea6 100644
--- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
+++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
@@ -37,5 +37,6 @@
mat-icon {
width: 16px;
+ min-width: 16px;
}
}