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

RED-5875: Material upgrade - checkbox

Browse Source
This commit is contained in:
Adina Țeudan 2023-05-29 21:32:44 +03:00
parent 37ec802a9a
commit 51ecce60a8
9 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,9 +21,9 @@ import { ReactiveFormsModule } from '@angular/forms';
import { ColorPickerModule } from 'ngx-color-picker';
import { MatIconModule } from '@angular/material/icon';
import { ConfirmDeleteDossierStateDialogComponent } from './confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatDialogModule } from '@angular/material/dialog';
import { MatCheckboxModule } from '@angular/material/checkbox';
@NgModule({
declarations: [
@ -55,7 +55,7 @@ import { MatDialogModule } from '@angular/material/dialog';
ReactiveFormsModule,
ColorPickerModule,
MatIconModule,
MatLegacyCheckboxModule,
MatCheckboxModule,
MatSelectModule,
],
})

4
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
View File

@ -9,7 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { NgForOf } from '@angular/common';
import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ROLES } from '@users/roles';
@ -84,6 +84,4 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
displayedInFileList: { value: fileAttribute?.displayedInFileList, disabled: !this.canSetDisplayed },
});
}
protected readonly ROLES = ROLES;
}

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

@ -9,7 +9,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';

2
apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html
View File

@ -1,5 +1,5 @@
<div *ngIf="watermarks$ | async as watermarks" class="mt-14">
<div class="iqser-input-group w-300">
<div class="iqser-input-group">
<mat-checkbox (change)="changeChecked($event)" [checked]="!!value" [disabled]="disabled || isReadonly" color="primary">
{{ label }}
</mat-checkbox>

2
apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts
View File

@ -5,7 +5,7 @@ import { filter, map, tap } from 'rxjs/operators';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Watermark } from '@red/domain';
import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
import { MatCheckboxChange } from '@angular/material/checkbox';
@Component({
selector: 'redaction-watermark-selector [dossierTemplateId] [label]',

12
apps/red-ui/src/app/modules/shared/components/select/select.component.ts
View File

@ -15,7 +15,7 @@ import { MatChipListbox, MatChipSelectionChange } from '@angular/material/chips'
],
})
export class SelectComponent implements AfterViewInit, ControlValueAccessor {
@Input() optionTemplate?: TemplateRef<unknown>;
@Input() optionTemplate?: TemplateRef<{ option: any }>;
@Input() label: string;
@Input() options: any[];
@Input() disabled = false;
@ -26,11 +26,6 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
constructor(private readonly _changeDetector: ChangeDetectorRef, private readonly _elementRef: ElementRef) {}
@HostBinding('class.fixed-height')
get isFixedHeight(): boolean {
return !!this._height;
}
private _height?: number;
@Input()
@ -42,6 +37,11 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
}
}
@HostBinding('class.fixed-height')
get isFixedHeight(): boolean {
return !!this._height;
}
@Input() valueMapper: (option: any) => any = option => option.key;
ngAfterViewInit(): void {

8
apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
View File

@ -62,9 +62,11 @@
</redaction-watermark-selector>
<div class="due-date">
<mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" class="filter-menu-checkbox" color="primary">
{{ 'add-dossier-dialog.form.due-date' | translate }}
</mat-checkbox>
<div class="iqser-input-group">
<mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" color="primary">
{{ 'add-dossier-dialog.form.due-date' | translate }}
</mat-checkbox>
</div>
<div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
<input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />

21
apps/red-ui/src/assets/styles/red-material-theme.scss
View File

@ -9,7 +9,7 @@
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
//@include mat.all-legacy-component-typographies();
@include mat.legacy-core();
$primary-palette: (
@ -62,13 +62,26 @@ $gn-next-mat-theme: mat.define-light-theme(
)
);
@include mat.all-legacy-component-themes($gn-next-mat-theme);
@include mat.all-component-themes($gn-next-mat-theme);
$custom-typography: mat.define-legacy-typography-config(
$custom-typography: mat.define-typography-config(
$font-family: 'Inter, sans-serif',
$headline-1: null,
$headline-2: null,
$headline-3: null,
$headline-4: null,
$headline-5: null,
$headline-6: null,
$subtitle-1: null,
$subtitle-2: null,
$body-1: mat.define-typography-level(13px, 18px, 400),
$body-2: mat.define-typography-level(13px, 18px, 400),
$caption: null,
$button: mat.define-typography-level(13px, 13px, 400),
$overline: null,
);
@include mat.all-legacy-component-typographies($custom-typography);
@include mat.all-component-typographies($custom-typography);
.mat-flat-button {
min-width: unset !important;

2
libs/common-ui

@ -1 +1 @@
Subproject commit 226ce2e73ad52810fc0035fd744c99c0e6866d6c
Subproject commit e884d8a513c8dd2df3564b3021bfa0d46bfe74d1