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

RED-5875: Material upgrade - slider

Browse Source
This commit is contained in:
Adina Țeudan 2023-05-29 22:11:11 +03:00
parent 51ecce60a8
commit f8fc7a753c
5 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,26 +56,26 @@
<div class="flex">
<div class="alignment-buttons">
<div
*ngFor="let alignment of watermarkHorizontalAlignments"
class="alignment"
[class.active]="currentAlignment.horizontal === alignment"
[ngClass]="'horizontal-' + alignment.toLowerCase()"
[matTooltip]="translations.HORIZONTAL[alignment] | translate"
[matTooltipPosition]="'above'"
(click)="alignHorizontally(alignment)"
*ngFor="let alignment of watermarkHorizontalAlignments"
[class.active]="currentAlignment.horizontal === alignment"
[matTooltipPosition]="'above'"
[matTooltip]="translations.HORIZONTAL[alignment] | translate"
[ngClass]="'horizontal-' + alignment.toLowerCase()"
class="alignment"
>
<mat-icon [svgIcon]="'red:align-horizontal-' + alignment.toLowerCase()"></mat-icon>
</div>
</div>
<div class="alignment-buttons">
<div
*ngFor="let alignment of watermarkVerticalAlignments"
class="alignment"
[class.active]="currentAlignment.vertical === alignment"
[ngClass]="'vertical-' + alignment.toLowerCase()"
[matTooltip]="translations.VERTICAL[alignment] | translate"
[matTooltipPosition]="'above'"
(click)="alignVertically(alignment)"
*ngFor="let alignment of watermarkVerticalAlignments"
[class.active]="currentAlignment.vertical === alignment"
[matTooltipPosition]="'above'"
[matTooltip]="translations.VERTICAL[alignment] | translate"
[ngClass]="'vertical-' + alignment.toLowerCase()"
class="alignment"
>
<mat-icon [svgIcon]="'red:align-vertical-' + alignment.toLowerCase()"></mat-icon>
</div>
@ -83,14 +83,18 @@
</div>
</div>
<div class="iqser-input-group">
<div class="iqser-input-group w-150">
<label [translate]="'watermark-screen.form.font-size'" class="all-caps-label"></label>
<mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
<mat-slider (change)="configChanged()" color="primary" max="50" min="5">
<input formControlName="fontSize" matSliderThumb />
</mat-slider>
</div>
<div class="iqser-input-group">
<div class="iqser-input-group w-150">
<label [translate]="'watermark-screen.form.opacity'" class="all-caps-label"></label>
<mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
<mat-slider (change)="configChanged()" color="primary" min="1">
<input formControlName="opacity" matSliderThumb />
</mat-slider>
</div>
<div class="iqser-input-group w-150">

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

@ -84,15 +84,15 @@ export class WatermarkScreenComponent implements OnInit {
readonly orientationOptions = ['DIAGONAL', 'HORIZONTAL', 'VERTICAL'];
instance: WebViewerInstance;
readonly loaded$: Observable<boolean>;
readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS);
readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS);
currentAlignment: WatermarkAlignment;
@ViewChild('viewer', { static: true }) private readonly _viewer: ElementRef<HTMLDivElement>;
private readonly _convertPath = inject(BASE_HREF_FN);
readonly #loaded$ = new BehaviorSubject(false);
readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
readonly #watermarkId = Number(getParam(WATERMARK_ID));
#watermark: Partial<IWatermark> = {};
readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS);
readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS);
currentAlignment: WatermarkAlignment;
constructor(
private readonly _http: HttpClient,

4
apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
View File

@ -23,7 +23,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { PaginatorComponent } from './paginator/paginator.component';
import { MatIconModule } from '@angular/material/icon';
import { ReactiveFormsModule } from '@angular/forms';
import { MatLegacySliderModule } from '@angular/material/legacy-slider';
import { MatSliderModule } from '@angular/material/slider';
import { ColorPickerModule } from 'ngx-color-picker';
import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
@ -67,7 +67,7 @@ const routes: IqserRoutes = [
MatIconModule,
IconButtonComponent,
ReactiveFormsModule,
MatLegacySliderModule,
MatSliderModule,
ColorPickerModule,
MatLegacySlideToggleModule,
CircleButtonComponent,

2
apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
View File

@ -3,7 +3,6 @@ import { MatNativeDateModule } from '@angular/material/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
@ -24,7 +23,6 @@ const matImports = [
MatToolbarModule,
MatButtonModule,
MatSlideToggleModule,
MatSliderModule,
MatMenuModule,
MatTooltipModule,
MatButtonToggleModule,

2
libs/common-ui

@ -1 +1 @@
Subproject commit e884d8a513c8dd2df3564b3021bfa0d46bfe74d1
Subproject commit 2ec18cc91db5548d086e0fc59a3351f6d373d5a3