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; } }