diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index aeff40854..96423758b 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -7,6 +7,7 @@ import { BaseScreenComponent } from '@components/base-screen/base-screen.compone import { MissingTranslationHandler } from '@ngx-translate/core'; import { CachingModule, + ChevronButtonComponent, CircleButtonComponent, CommonUiModule, EmptyStateComponent, @@ -169,6 +170,7 @@ export const appModuleFactory = (config: AppConfig) => { IconButtonComponent, TenantPipe, MatDividerModule, + ChevronButtonComponent, ], providers: [ { diff --git a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html index 84caaad0b..25dae2bc4 100644 --- a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html +++ b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html @@ -22,10 +22,11 @@ - +
-
+
- + + +
-
+
- + + +
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts index 829937035..cbf1c03af 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts @@ -84,15 +84,15 @@ export class WatermarkScreenComponent implements OnInit { readonly orientationOptions = ['DIAGONAL', 'HORIZONTAL', 'VERTICAL']; instance: WebViewerInstance; readonly loaded$: Observable; + readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS); + readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS); + currentAlignment: WatermarkAlignment; @ViewChild('viewer', { static: true }) private readonly _viewer: ElementRef; 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 = {}; - readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS); - readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS); - currentAlignment: WatermarkAlignment; constructor( private readonly _http: HttpClient, diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts index 9df82e8c9..dc3eabe70 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts @@ -23,10 +23,10 @@ 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'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; const routes: IqserRoutes = [ { @@ -67,9 +67,9 @@ const routes: IqserRoutes = [ MatIconModule, IconButtonComponent, ReactiveFormsModule, - MatLegacySliderModule, + MatSliderModule, ColorPickerModule, - MatLegacySlideToggleModule, + MatSlideToggleModule, CircleButtonComponent, HasScrollbarDirective, IqserAllowDirective, diff --git a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts b/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts index dbc9206cf..695cffa6c 100644 --- a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts +++ b/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts @@ -1,19 +1,18 @@ import { NgModule } from '@angular/core'; 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 { MatButtonModule } from '@angular/material/button'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatMenuModule } from '@angular/material/menu'; 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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; -import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatChipsModule } from '@angular/material/chips'; import { MatDialogModule } from '@angular/material/dialog'; @@ -24,7 +23,6 @@ const matImports = [ MatToolbarModule, MatButtonModule, MatSlideToggleModule, - MatSliderModule, MatMenuModule, MatTooltipModule, MatButtonToggleModule, diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html index 9c3d18d86..1af05cdf0 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html +++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html @@ -12,12 +12,12 @@
@@ -39,32 +39,30 @@ [class.displayed-preview]="currentAttrValue(attr)" class="iqser-input-group image-attribute" > -
- + - + - + - -
+
-
+
{{ label }} diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts index 44cb9732d..bf29d44b6 100644 --- a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts @@ -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]', diff --git a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts index f5e332a64..44e8fb59c 100644 --- a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts @@ -5,7 +5,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { FileDownloadService } from '@upload-download/services/file-download.service'; import { PermissionsService } from '@services/permissions.service'; import { firstValueFrom } from 'rxjs'; -import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu'; +import { MatMenuTrigger } from '@angular/material/menu'; import { DownloadDialogComponent, DownloadDialogData, diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.ts b/apps/red-ui/src/app/modules/shared/components/select/select.component.ts index 58c32dd71..be661e398 100644 --- a/apps/red-ui/src/app/modules/shared/components/select/select.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.ts @@ -15,7 +15,7 @@ import { MatChipListbox, MatChipSelectionChange } from '@angular/material/chips' ], }) export class SelectComponent implements AfterViewInit, ControlValueAccessor { - @Input() optionTemplate?: TemplateRef; + @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 { diff --git a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html index 4a7ea8e6f..86d6a1395 100644 --- a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html +++ b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html @@ -20,12 +20,12 @@
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html index 9cd46b0e0..434eb1f7d 100644 --- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html +++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html @@ -62,9 +62,11 @@
- - {{ 'add-dossier-dialog.form.due-date' | translate }} - +
+ + {{ 'add-dossier-dialog.form.due-date' | translate }} + +
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html index 79ab9a241..83425fcc7 100644 --- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html +++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html @@ -40,8 +40,8 @@
diff --git a/apps/red-ui/src/app/services/permissions.service.ts b/apps/red-ui/src/app/services/permissions.service.ts index 2f915f76f..79a6708d8 100644 --- a/apps/red-ui/src/app/services/permissions.service.ts +++ b/apps/red-ui/src/app/services/permissions.service.ts @@ -394,7 +394,7 @@ export class PermissionsService { private _canEnableAutoAnalysis(file: File, dossier: Dossier): boolean { return ( - dossier.isActive && !!file.lastProcessed && file.excludedFromAutomaticAnalysis && this.isFileAssignee(file) && !file.isApproved + dossier.isActive && file.excludedFromAutomaticAnalysis && this.isFileAssignee(file) && !file.isApproved && !!file.lastProcessed ); } diff --git a/apps/red-ui/src/assets/styles/red-material-theme.scss b/apps/red-ui/src/assets/styles/red-material-theme.scss index 4ddb1afab..d01de1fb8 100644 --- a/apps/red-ui/src/assets/styles/red-material-theme.scss +++ b/apps/red-ui/src/assets/styles/red-material-theme.scss @@ -1,16 +1,7 @@ @use '@angular/material' as mat; @use 'variables'; -// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. -// The following line adds: -// 1. Default typography styles for all components -// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) -// If you specify typography styles for the components you use elsewhere, you should delete this line. -// 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.legacy-core(); +@include mat.core(); $primary-palette: ( default: variables.$primary, @@ -52,7 +43,7 @@ $gn-next-primary: mat.define-palette($primary-palette, default, lighter, darker, $gn-next-secondary: mat.define-palette($secondary-palette, default, lighter, darker, text); $gn-next-warning: mat.define-palette($red-palette, default, lighter, darker, text); -$gn-next-mat-theme: mat.define-light-theme( +$light-theme: mat.define-light-theme( ( color: ( primary: $gn-next-primary, @@ -62,28 +53,33 @@ $gn-next-mat-theme: mat.define-light-theme( ) ); -@include mat.all-legacy-component-themes($gn-next-mat-theme); - -$custom-typography: mat.define-legacy-typography-config( - $font-family: 'Inter, sans-serif', +$dark-theme: mat.define-dark-theme( + ( + color: ( + primary: $gn-next-primary, + accent: $gn-next-secondary, + warn: $gn-next-warning, + ), + ) ); -@include mat.all-legacy-component-typographies($custom-typography); +@include mat.core-theme($light-theme); +@include mat.all-component-themes($light-theme); -.mat-flat-button { - min-width: unset !important; +$custom-typography: mat.define-typography-config( + $font-family: 'Inter, sans-serif', + $body-1: mat.define-typography-level(13px, 18px, 400), + $body-2: mat.define-typography-level(13px, 18px, 400), + $button: mat.define-typography-level(13px, 13px, 400), +); + +@include mat.all-component-typographies($custom-typography); + +* { + --mdc-theme-text-primary-on-background: var(--iqser-text); + --mdc-theme-surface: var(--iqser-popup-background); } -.mat-progress-spinner circle, -.mat-spinner circle { - stroke: var(--iqser-primary); -} - -.mat-progress-bar-fill::after { - background-color: var(--iqser-primary); -} - -.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, -.mat-checkbox-checked.mat-primary .mat-checkbox-background { - background-color: var(--iqser-primary); +.dark { + @include mat.all-component-colors($dark-theme); } diff --git a/libs/common-ui b/libs/common-ui index 226ce2e73..47080bcd8 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 226ce2e73ad52810fc0035fd744c99c0e6866d6c +Subproject commit 47080bcd8b18ac0a01417d5e5b5a433e8b11f581