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

RED-6012 - disabled alignment when all form is disabled

Browse Source
This commit is contained in:
Valentin Mihai 2023-05-30 17:08:03 +02:00
parent 172fa9f1b4
commit c4ab01ac9d
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,7 @@
<div class="iqser-input-group"> <div class="iqser-input-group">
<label [translate]="'watermark-screen.form.alignment'" class="all-caps-label mb-8"></label> <label [translate]="'watermark-screen.form.alignment'" class="all-caps-label mb-8"></label>
<div class="flex"> <div class="flex">
<div class="alignment-buttons"> <div class="alignment-buttons" [class.disabled]="form.controls.horizontalTextAlignment.disabled">
<div <div
*ngFor="let alignment of watermarkHorizontalAlignments" *ngFor="let alignment of watermarkHorizontalAlignments"
class="alignment" class="alignment"
@ -62,12 +62,13 @@
[ngClass]="'horizontal-' + alignment.toLowerCase()" [ngClass]="'horizontal-' + alignment.toLowerCase()"
[matTooltip]="translations.HORIZONTAL[alignment] | translate" [matTooltip]="translations.HORIZONTAL[alignment] | translate"
[matTooltipPosition]="'above'" [matTooltipPosition]="'above'"
[class.disabled]="form.controls.horizontalTextAlignment.disabled"
(click)="alignHorizontally(alignment)" (click)="alignHorizontally(alignment)"
> >
<mat-icon [svgIcon]="'red:align-horizontal-' + alignment.toLowerCase()"></mat-icon> <mat-icon [svgIcon]="'red:align-horizontal-' + alignment.toLowerCase()"></mat-icon>
</div> </div>
</div> </div>
<div class="alignment-buttons"> <div class="alignment-buttons" [class.disabled]="form.controls.verticalTextAlignment.disabled">
<div <div
*ngFor="let alignment of watermarkVerticalAlignments" *ngFor="let alignment of watermarkVerticalAlignments"
class="alignment" class="alignment"
@ -75,6 +76,7 @@
[ngClass]="'vertical-' + alignment.toLowerCase()" [ngClass]="'vertical-' + alignment.toLowerCase()"
[matTooltip]="translations.VERTICAL[alignment] | translate" [matTooltip]="translations.VERTICAL[alignment] | translate"
[matTooltipPosition]="'above'" [matTooltipPosition]="'above'"
[class.disabled]="form.controls.verticalTextAlignment.disabled"
(click)="alignVertically(alignment)" (click)="alignVertically(alignment)"
> >
<mat-icon [svgIcon]="'red:align-vertical-' + alignment.toLowerCase()"></mat-icon> <mat-icon [svgIcon]="'red:align-vertical-' + alignment.toLowerCase()"></mat-icon>

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

@ -100,6 +100,10 @@
border: 1px solid var(--iqser-grey-5); border: 1px solid var(--iqser-grey-5);
margin-right: 10px; margin-right: 10px;
&.disabled {
cursor: not-allowed;
}
.alignment { .alignment {
width: 33px; width: 33px;
display: flex; display: flex;
@ -127,6 +131,10 @@
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
&.disabled {
pointer-events: none;
}
} }
.alignment:not(.active):hover { .alignment:not(.active):hover {