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="square-options">
<div <div
[class.active]="configForm.get('orientation').value === option" [class.active]="configForm.get('orientation').value === option"
[class.disabled]="configForm.get('orientation').disabled"
[ngClass]="option" [ngClass]="option"
(click)="configForm.get('orientation').setValue(option); configChanged()" (click)="setValue('orientation', option)"
*ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']" *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
> >
<span>ABC</span> <span>ABC</span>
@ -83,12 +84,14 @@
/> />
<div <div
class="input-icon" class="input-icon"
[class.disabled]="configForm.get('hexColor').disabled"
[style.background]="configForm.get('hexColor').value" [style.background]="configForm.get('hexColor').value"
[colorPicker]="configForm.get('hexColor').value" [colorPicker]="configForm.get('hexColor').value"
[cpDisabled]="configForm.get('hexColor').disabled"
[cpOutputFormat]="'hex'" [cpOutputFormat]="'hex'"
[cpPosition]="'top-right'" [cpPosition]="'top-right'"
[cpUseRootViewContainer]="true" [cpUseRootViewContainer]="true"
(colorPickerChange)="configForm.get('hexColor').setValue($event); configChanged()" (colorPickerChange)="setValue('hexColor', $event)"
> >
<mat-icon <mat-icon
*ngIf="!configForm.get('hexColor')?.value || configForm.get('hexColor').value?.length === 0" *ngIf="!configForm.get('hexColor')?.value || configForm.get('hexColor').value?.length === 0"
@ -102,8 +105,9 @@
<div class="square-options"> <div class="square-options">
<div <div
[class.active]="configForm.get('fontType').value === option.value" [class.active]="configForm.get('fontType').value === option.value"
[class.disabled]="configForm.get('fontType').disabled"
[ngClass]="option.value" [ngClass]="option.value"
(click)="configForm.get('fontType').setValue(option.value); configChanged()" (click)="setValue('fontType', option.value)"
*ngFor=" *ngFor="
let option of [ let option of [
{ value: 'sans-serif', display: 'Sans Serif' }, { 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; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &.disabled {
cursor: default;
}
&:hover:not(.disabled) {
background-color: darken($grey-6, 2); 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() { private _initForm() {
this.configForm = this._formBuilder.group({ this.configForm = this._formBuilder.group({
text: [null, Validators.required], text: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
hexColor: [null, Validators.required], hexColor: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
opacity: [null, Validators.required], opacity: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
fontSize: [null, Validators.required], fontSize: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
fontType: [null, Validators.required], fontType: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
orientation: [null, 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; height: 14px;
color: $grey-1; color: $grey-1;
} }
&.disabled {
cursor: default;
}
} }
.mat-form-field-underline { .mat-form-field-underline {

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

@ -15,6 +15,11 @@
border-radius: 3px; border-radius: 3px;
} }
// For disabled state
.mat-slider-track-fill {
background-color: $primary;
}
.mat-slider-track-background { .mat-slider-track-background {
height: 4px !important; height: 4px !important;
margin-top: 1px; margin-top: 1px;
@ -31,6 +36,15 @@
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
border-width: 0 !important; border-width: 0 !important;
transform: none !important;
background-color: $primary !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);
}
}