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

Disable changes in watermark screen when no permissions to update

Browse Source
This commit is contained in:
Adina Țeudan 2021-01-18 18:05:39 +02:00
parent 89c0f32fe6
commit 9c05136206
5 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,8 +53,9 @@
<div class="square-options">
<div
[class.active]="configForm.get('orientation').value === option"
[class.disabled]="configForm.get('orientation').disabled"
[ngClass]="option"
(click)="configForm.get('orientation').setValue(option); configChanged()"
(click)="setValue('orientation', option)"
*ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
>
<span>ABC</span>
@ -83,12 +84,14 @@
/>
<div
class="input-icon"
[class.disabled]="configForm.get('hexColor').disabled"
[style.background]="configForm.get('hexColor').value"
[colorPicker]="configForm.get('hexColor').value"
[cpDisabled]="configForm.get('hexColor').disabled"
[cpOutputFormat]="'hex'"
[cpPosition]="'top-right'"
[cpUseRootViewContainer]="true"
(colorPickerChange)="configForm.get('hexColor').setValue($event); configChanged()"
(colorPickerChange)="setValue('hexColor', $event)"
>
<mat-icon
*ngIf="!configForm.get('hexColor')?.value || configForm.get('hexColor').value?.length === 0"
@ -102,8 +105,9 @@
<div class="square-options">
<div
[class.active]="configForm.get('fontType').value === option.value"
[class.disabled]="configForm.get('fontType').disabled"
[ngClass]="option.value"
(click)="configForm.get('fontType').setValue(option.value); configChanged()"
(click)="setValue('fontType', option.value)"
*ngFor="
let option of [
{ value: 'sans-serif', display: 'Sans Serif' },

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

@ -41,7 +41,11 @@
cursor: pointer;
transition: background-color 0.2s;
&:hover {
&.disabled {
cursor: default;
}
&:hover:not(.disabled) {
background-color: darken($grey-6, 2);
}

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

@ -190,12 +190,19 @@ export class WatermarkScreenComponent implements OnInit {
private _initForm() {
this.configForm = this._formBuilder.group({
text: [null, Validators.required],
hexColor: [null, Validators.required],
opacity: [null, Validators.required],
fontSize: [null, Validators.required],
fontType: [null, Validators.required],
orientation: [null, Validators.required]
text: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
hexColor: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
opacity: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
fontSize: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
fontType: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
orientation: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required]
});
}
public setValue(type: 'fontType' | 'orientation' | 'hexColor', value: any) {
if (!this.configForm.get(type).disabled) {
this.configForm.get(type).setValue(value);
this.configChanged();
}
}
}

4
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -45,6 +45,10 @@ form {
height: 14px;
color: $grey-1;
}
&.disabled {
cursor: default;
}
}
.mat-form-field-underline {

16
apps/red-ui/src/assets/styles/red-slider.scss
View File

@ -15,6 +15,11 @@
border-radius: 3px;
}
// For disabled state
.mat-slider-track-fill {
background-color: $primary;
}
.mat-slider-track-background {
height: 4px !important;
margin-top: 1px;
@ -31,6 +36,15 @@
width: 16px !important;
height: 16px !important;
border-width: 0 !important;
transform: none !important;
background-color: $primary !important;
}
.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
transform: scale(1) !important;
}
.mat-slider-horizontal.mat-slider-disabled {
.mat-slider-thumb {
transform: translateX(-3px);
}
}