Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Pull request #66: Added font size and page title to watermark screen

Browse Source 
Merge in RED/ui from watermark to master

* commit '4e2a53b8d1084ad86bd928d8d7d7f7b9bb47d53f':
  Added font size and page title to watermark screen
This commit is contained in:
Timo Bejan 2020-12-13 16:47:52 +01:00
commit 928b08e63b
5 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

9
apps/red-ui/src/assets/i18n/en.json
View File

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

1
apps/red-ui/src/assets/styles/red-breadcrumbs.scss
View File

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