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

RED-5875: Upgrade to new Angular Material components (form field)

Browse Source
This commit is contained in:
Adina Țeudan 2023-02-21 19:51:37 +02:00
parent 1b7c1f3560
commit 3e19349618
31 changed files with 228 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html
View File

@ -18,11 +18,13 @@
<div *ngIf="userPreferences.areDevFeaturesEnabled" class="iqser-input-group">
<label [translate]="'top-bar.navigation-items.my-account.children.language.label'"></label>
<mat-select formControlName="language">
<mat-option *ngFor="let language of languages" [value]="language">
{{ translations[language] | translate }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select formControlName="language">
<mat-option *ngFor="let language of languages" [value]="language">
{{ translations[language] | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="iqser-input-group">

12
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
View File

@ -20,11 +20,13 @@
<div class="iqser-input-group w-300">
<label [translate]="'add-edit-dossier-attribute.form.type'"></label>
<mat-select formControlName="type">
<mat-option *ngFor="let type of typeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select formControlName="type">
<mat-option *ngFor="let type of typeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="dialog-actions">

12
apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
View File

@ -25,11 +25,13 @@
<div class="iqser-input-group w-300 required">
<label [translate]="'add-edit-file-attribute.form.type'"></label>
<mat-select formControlName="type">
<mat-option *ngFor="let type of typeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select formControlName="type">
<mat-option *ngFor="let type of typeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="options-wrapper">

18
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
View File

@ -15,14 +15,16 @@
<div *ngIf="form.get('replace').value" class="iqser-input-group w-300 min-h-55">
<label translate="confirm-delete-dossier-state.form.state"></label>
<mat-select
[placeholder]="'confirm-delete-dossier-state.form.state-placeholder' | translate"
formControlName="replaceDossierStatusId"
>
<mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
{{ state.name }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select
[placeholder]="'confirm-delete-dossier-state.form.state-placeholder' | translate"
formControlName="replaceDossierStatusId"
>
<mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
{{ state.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
</div>

12
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
View File

@ -31,11 +31,13 @@
<div class="iqser-input-group w-150 required">
<label [translate]="'file-attributes-configurations.form.encoding-type'"></label>
<mat-select formControlName="encodingType">
<mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select formControlName="encodingType">
<mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
</div>

2
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
View File

@ -70,7 +70,7 @@
<div class="cell">
<div class="iqser-input-group">
<mat-form-field class="no-label">
<mat-form-field>
<mat-select [(ngModel)]="field.type">
<mat-option *ngFor="let type of typeOptions" [value]="type">
{{ translations[type] | translate }}

16
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
View File

@ -12,8 +12,8 @@
<div class="right">
<form (submit)="changedParseConfig && readFile()" [formGroup]="form">
<div class="iqser-input-group required w-250">
<mat-form-field floatLabel="always">
<mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
<label>{{ 'file-attributes-csv-import.key-column' | translate }}</label>
<mat-form-field>
<input
[matAutocomplete]="auto"
[placeholder]="'file-attributes-csv-import.key-column-placeholder' | translate"
@ -45,11 +45,13 @@
<div class="iqser-input-group required w-160">
<label translate="file-attributes-csv-import.encoding"></label>
<mat-select (selectionChange)="readFile()" formControlName="encoding">
<mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select (selectionChange)="readFile()" formControlName="encoding">
<mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
{{ translations[type] | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<iqser-circle-button
(action)="readFile()"

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

@ -5,13 +5,13 @@
></iqser-page-header>
<iqser-table
[emptyColumnWidth]="'2fr'"
[headerTemplate]="headerTemplate"
[itemSize]="80"
[noDataIcon]="'iqser:document'"
[noDataText]="'audit-screen.no-data.title' | translate"
[tableColumnConfigs]="tableColumnConfigs"
[totalSize]="logs?.totalHits || 0"
[emptyColumnWidth]="'2fr'"
></iqser-table>
<ng-template #headerTemplate>
@ -26,7 +26,7 @@
<form [formGroup]="form">
<div class="iqser-input-group w-150 mr-20">
<mat-form-field class="no-label">
<mat-form-field>
<mat-select (selectionChange)="filterChange()" formControlName="category">
<mat-option *ngFor="let category of categories" [value]="category">
{{ (translations[category] | translate) || category }}
@ -36,7 +36,7 @@
</div>
<div class="iqser-input-group w-150">
<mat-form-field class="no-label">
<mat-form-field>
<mat-select (selectionChange)="filterChange()" formControlName="userId">
<mat-select-trigger>
<iqser-initials-avatar
@ -87,7 +87,7 @@
</div>
<div class="cell">
<span class="small-label">{{ log.recordDate | date: 'd MMM yyyy, hh:mm a' }}</span>
<span class="small-label">{{ log.recordDate | date : 'd MMM yyyy, hh:mm a' }}</span>
</div>
<div class="user-column cell">
@ -99,11 +99,11 @@
<div class="cell">
<div class="action-buttons">
<iqser-circle-button
*ngIf="log.hasDetails"
(action)="openAuditDetails($event, log)"
*ngIf="log.hasDetails"
[tooltip]="'audit-screen.action.info' | translate"
icon="red:info"
[type]="circleButtonTypes.dark"
icon="red:info"
></iqser-circle-button>
</div>
</div>

30
apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
View File

@ -1,19 +1,21 @@
<div *ngIf="licenses$ | async as licenses" class="iqser-input-group w-400">
<mat-select
(valueChange)="licenseChanged($event)"
*ngIf="value"
[(ngModel)]="value"
[disabled]="isReadonly$ | async"
[iqserHelpMode]="'license_information'"
>
<mat-select-trigger>
<ng-container *ngTemplateOutlet="licenseInfo; context: { license: value }"></ng-container>
</mat-select-trigger>
<mat-form-field>
<mat-select
(valueChange)="licenseChanged($event)"
*ngIf="value"
[(ngModel)]="value"
[disabled]="isReadonly$ | async"
[iqserHelpMode]="'license_information'"
>
<mat-select-trigger>
<ng-container *ngTemplateOutlet="licenseInfo; context: { license: value }"></ng-container>
</mat-select-trigger>
<mat-option *ngFor="let license of licenses" [value]="license">
<ng-container *ngTemplateOutlet="licenseInfo; context: { license: this.license }"></ng-container>
</mat-option>
</mat-select>
<mat-option *ngFor="let license of licenses" [value]="license">
<ng-container *ngTemplateOutlet="licenseInfo; context: { license: this.license }"></ng-container>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<ng-template #licenseInfo let-license="license">

2
apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
View File

@ -4,7 +4,7 @@ import { LicenseSelectComponent } from './license-select/license-select.componen
import { LicenseChartComponent } from './license-chart/license-chart.component';
import { RouterModule, Routes } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { IqserHelpModeModule, IqserListingModule } from '@iqser/common-ui';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { ComboChartComponent, ComboSeriesVerticalComponent, YAxisComponent } from './combo-chart';

1
apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
View File

@ -188,7 +188,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
async #updateDossierAttributes(): Promise<void> {
try {
this.dossierAttributes = await this._dossierAttributesService.getWithValues(this.#currentDossier);
console.log('this.dossierAttributes: ', this.dossierAttributes);
} catch (e) {
this._logger.error('[DOSSIER ATTRIBUTES] Error: ', e);
}

28
apps/red-ui/src/app/modules/file-preview/dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component.html
View File

@ -15,19 +15,21 @@
<div class="iqser-input-group required w-400">
<label translate="manual-annotation.dialog.content.dictionary"></label>
<mat-select formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-option
*ngFor="let dictionary of possibleDictionaries"
[matTooltip]="dictionary.description"
[value]="dictionary.type"
matTooltipPosition="after"
>
<span>
{{ dictionary.label }}
</span>
</mat-option>
</mat-select>
<mat-form-field>
<mat-select formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-option
*ngFor="let dictionary of possibleDictionaries"
[matTooltip]="dictionary.description"
[value]="dictionary.type"
matTooltipPosition="after"
>
<span>
{{ dictionary.label }}
</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="iqser-input-group w-300">

20
apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
View File

@ -5,15 +5,17 @@
<div class="dialog-content">
<div class="iqser-input-group required w-400">
<label translate="change-legal-basis-dialog.content.reason"></label>
<mat-select
[placeholder]="'change-legal-basis-dialog.content.reason-placeholder' | translate"
class="full-width"
formControlName="reason"
>
<mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
{{ option.label }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select
[placeholder]="'change-legal-basis-dialog.content.reason-placeholder' | translate"
class="full-width"
formControlName="reason"
>
<mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="iqser-input-group w-400">

20
apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html
View File

@ -6,15 +6,17 @@
<div class="dialog-content">
<div *ngIf="!isHintDialog" class="iqser-input-group required w-400">
<label translate="manual-annotation.dialog.content.reason"></label>
<mat-select
[placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
class="full-width"
formControlName="reason"
>
<mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
{{ option.label }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select
[placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
class="full-width"
formControlName="reason"
>
<mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="!isHintDialog" class="iqser-input-group w-400">

52
apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
View File

@ -38,35 +38,39 @@
<label *ngIf="isDictionaryRequest" translate="manual-annotation.dialog.content.dictionary"></label>
<label *ngIf="!isDictionaryRequest" translate="manual-annotation.dialog.content.type"></label>
<mat-select formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-option
*ngFor="let dictionary of possibleDictionaries"
[matTooltip]="dictionary.description"
[value]="dictionary.type"
matTooltipPosition="after"
>
<span> {{ dictionary.label }} </span>
</mat-option>
</mat-select>
<mat-form-field>
<mat-select formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-option
*ngFor="let dictionary of possibleDictionaries"
[matTooltip]="dictionary.description"
[value]="dictionary.type"
matTooltipPosition="after"
>
<span> {{ dictionary.label }} </span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *deny="roles.getRss; if: !isDictionaryRequest" class="iqser-input-group required w-450">
<label translate="manual-annotation.dialog.content.reason"></label>
<mat-select
[placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
class="full-width"
formControlName="reason"
>
<mat-option
*ngFor="let option of legalOptions"
[matTooltip]="option.description"
[value]="option"
matTooltipPosition="after"
<mat-form-field>
<mat-select
[placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
class="full-width"
formControlName="reason"
>
{{ option.label }}
</mat-option>
</mat-select>
<mat-option
*ngFor="let option of legalOptions"
[matTooltip]="option.description"
[value]="option"
matTooltipPosition="after"
>
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *deny="roles.getRss; if: !isDictionaryRequest" class="iqser-input-group w-450">

20
apps/red-ui/src/app/modules/file-preview/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
View File

@ -5,15 +5,17 @@
<div class="dialog-content">
<div class="iqser-input-group required w-400">
<label translate="recategorize-image-dialog.content.type"></label>
<mat-select
[placeholder]="'recategorize-image-dialog.content.type-placeholder' | translate"
class="full-width"
formControlName="type"
>
<mat-option *ngFor="let option of typeOptions" [value]="option">
{{ translations[option] | translate }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select
[placeholder]="'recategorize-image-dialog.content.type-placeholder' | translate"
class="full-width"
formControlName="type"
>
<mat-option *ngFor="let option of typeOptions" [value]="option">
{{ translations[option] | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="iqser-input-group w-300">

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

@ -7,14 +7,14 @@ import { MatLegacySliderModule as MatSliderModule } from '@angular/material/lega
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
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 { MatDatepickerModule } from '@angular/material/datepicker';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
import { MatDialogModule } from '@angular/material/dialog';

4
apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
View File

@ -4,8 +4,8 @@
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group w-300 required">
<mat-form-field floatLabel="always">
<mat-label>{{ 'assign-owner.dialog.label' | translate : { type: mode } }}</mat-label>
<label>{{ 'assign-owner.dialog.label' | translate : { type: mode } }}</label>
<mat-form-field>
<mat-select [placeholder]="'initials-avatar.unassigned' | translate" formControlName="user">
<mat-option *ngFor="let userId of userOptions" [value]="userId">
{{ userId | name : { defaultValue: 'initials-avatar.unassigned' | translate } }}

14
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
View File

@ -1,5 +1,3 @@
@use '../../../../../apps/red-ui/src/assets/styles/variables';
redaction-select {
flex: 1;
}
@ -14,21 +12,11 @@ form {
}
}
.watermark {
width: 315px;
max-width: 315px;
mat-form-field {
margin-left: 22px;
margin-top: -10px;
}
}
.heading {
margin-top: 32px !important;
margin-bottom: 0 !important;
}
.no-watermark {
color: variables.$grey-7;
color: var(--iqser-grey-7);
}

4
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
View File

@ -1,7 +1,7 @@
<form [formGroup]="form">
<div class="iqser-input-group w-300 required">
<mat-form-field floatLabel="always">
<mat-label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</mat-label>
<label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</label>
<mat-form-field>
<mat-select (valueChange)="onChangeOwner($event)" formControlName="owner" id="editDossierOwnerSelect">
<mat-option *ngFor="let userId of ownersSelectOptions; let index = index" [id]="'mat-option-' + index" [value]="userId">
{{ userId | name }}

22
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
View File

@ -12,8 +12,8 @@
</div>
<div class="iqser-input-group required w-400">
<mat-form-field floatLabel="always">
<mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
<label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</label>
<mat-form-field>
<mat-select formControlName="dossierTemplateId">
<mat-option
*ngFor="let dossierTemplate of dossierTemplates"
@ -43,14 +43,16 @@
<div class="flex fields-container">
<div class="iqser-input-group w-300">
<label translate="edit-dossier-dialog.general-info.form.dossier-state.label"></label>
<mat-select [placeholder]="statusPlaceholder" formControlName="dossierStatusId">
<mat-option *ngFor="let stateId of states" [value]="stateId">
<div [matTooltip]="getStateName(stateId)" class="flex-align-items-center" matTooltipPosition="after">
<iqser-small-chip *ngIf="!!stateId" [color]="getStateColor(stateId)"></iqser-small-chip>
<div class="clamp-1">{{ getStateName(stateId) }}</div>
</div>
</mat-option>
</mat-select>
<mat-form-field>
<mat-select [placeholder]="statusPlaceholder" formControlName="dossierStatusId">
<mat-option *ngFor="let stateId of states" [value]="stateId">
<div [matTooltip]="getStateName(stateId)" class="flex-align-items-center" matTooltipPosition="after">
<iqser-small-chip *ngIf="!!stateId" [color]="getStateColor(stateId)"></iqser-small-chip>
<div class="clamp-1">{{ getStateName(stateId) }}</div>
</div>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="due-date">

8
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
View File

@ -1,11 +1,3 @@
.watermark {
margin-top: 24px;
}
.watermark-preview {
margin-top: 8px;
}
.due-date {
margin-top: 8px;
min-height: 34px;

10
apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.html
View File

@ -58,10 +58,12 @@
<div *ngIf="form.get('defaultReason')" class="iqser-input-group w-400">
<label translate="add-edit-entity.form.default-reason"></label>
<mat-select
[placeholder]="'add-edit-entity.form.default-reason-placeholder' | translate"
formControlName="defaultReason"
></mat-select>
<mat-form-field>
<mat-select
[placeholder]="'add-edit-entity.form.default-reason-placeholder' | translate"
formControlName="defaultReason"
></mat-select>
</mat-form-field>
</div>
<div *ngIf="form.get('description')" class="iqser-input-group w-400">

18
apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
View File

@ -1,13 +1,15 @@
<div class="flex-align-items-center space-between">
<div class="iqser-input-group w-250">
<mat-select [(ngModel)]="value" [placeholder]="'initials-avatar.unassigned' | translate" id="select-assignee">
<mat-select-trigger>
<ng-container *ngTemplateOutlet="avatar; context: getContext(value)"></ng-container>
</mat-select-trigger>
<mat-option *ngFor="let user of options" [id]="'assignee-option-' + user" [value]="user">
<ng-container *ngTemplateOutlet="avatar; context: getContext(user)"></ng-container>
</mat-option>
</mat-select>
<mat-form-field>
<mat-select [(ngModel)]="value" [placeholder]="'initials-avatar.unassigned' | translate" id="select-assignee">
<mat-select-trigger>
<ng-container *ngTemplateOutlet="avatar; context: getContext(value)"></ng-container>
</mat-select-trigger>
<mat-option *ngFor="let user of options" [id]="'assignee-option-' + user" [value]="user">
<ng-container *ngTemplateOutlet="avatar; context: getContext(user)"></ng-container>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<iqser-circle-button

44
apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
View File

@ -27,8 +27,8 @@
<iqser-circle-button
(action)="download()"
*ngIf="canDownload"
[matTooltip]="'dictionary-overview.download' | translate"
[iqserHelpMode]="helpModeKey"
[matTooltip]="'dictionary-overview.download' | translate"
class="ml-8"
icon="iqser:download"
></iqser-circle-button>
@ -42,31 +42,37 @@
<ng-container *ngIf="filterByDossierTemplate">
<div *ngIf="dossierTemplatesService.all$ | async as templates" class="iqser-input-group w-200 mt-0 mr-8">
<mat-select [(ngModel)]="dossierTemplate" [disabled]="!compare">
<mat-option [value]="selectDossierTemplate">{{ selectDossierTemplate.name | translate }}</mat-option>
<mat-option *ngFor="let dossierTemplate of templates" [value]="dossierTemplate">
{{ dossierTemplate.name }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select [(ngModel)]="dossierTemplate" [disabled]="!compare">
<mat-option [value]="selectDossierTemplate">{{ selectDossierTemplate.name | translate }}</mat-option>
<mat-option *ngFor="let dossierTemplate of templates" [value]="dossierTemplate">
{{ dossierTemplate.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="iqser-input-group w-200 mt-0">
<mat-select [(ngModel)]="compareDictionary" [disabled]="!compare || dossierTemplateIsNotSelected">
<mat-option [value]="selectDictionary">{{ selectDictionary.label | translate }}</mat-option>
<mat-option *ngFor="let dictionary of dictionaries" [value]="dictionary">
{{ dictionary.label }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select [(ngModel)]="compareDictionary" [disabled]="!compare || dossierTemplateIsNotSelected">
<mat-option [value]="selectDictionary">{{ selectDictionary.label | translate }}</mat-option>
<mat-option *ngFor="let dictionary of dictionaries" [value]="dictionary">
{{ dictionary.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
<div *ngIf="!filterByDossierTemplate && activeDossiersService.all$ | async as dossiers" class="iqser-input-group w-200 mt-0">
<mat-select [(ngModel)]="dossier" [disabled]="!compare">
<mat-option [value]="selectDossier">{{ selectDossier.dossierName | translate }}</mat-option>
<mat-option *ngFor="let dossier of dossiers" [value]="dossier">
{{ dossier.dossierName }}
</mat-option>
</mat-select>
<mat-form-field>
<mat-select [(ngModel)]="dossier" [disabled]="!compare">
<mat-option [value]="selectDossier">{{ selectDossier.dossierName | translate }}</mat-option>
<mat-option *ngFor="let dossier of dossiers" [value]="dossier">
{{ dossier.dossierName }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>

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

@ -1,19 +1,21 @@
<div *ngIf="watermarks$ | async as watermarks" class="container">
<div class="iqser-input-group watermark">
<div *ngIf="watermarks$ | async as watermarks" class="mt-14">
<div class="iqser-input-group w-300">
<mat-checkbox (change)="changeChecked($event)" [checked]="!!value" [disabled]="disabled || isReadonly" color="primary">
{{ label }}
</mat-checkbox>
<mat-select (selectionChange)="selectWatermark($event.value)" *ngIf="!!value" [value]="value" [disabled]="disabled || isReadonly">
<mat-select-trigger *ngIf="!!value">
<mat-icon *ngIf="!watermarksMap.get(value)?.enabled" svgIcon="red:warning"></mat-icon>
<span> {{ watermarksMap.get(value)?.name }} </span>
</mat-select-trigger>
<mat-form-field *ngIf="!!value">
<mat-select (selectionChange)="selectWatermark($event.value)" [disabled]="disabled || isReadonly" [value]="value">
<mat-select-trigger *ngIf="!!value">
<mat-icon *ngIf="!watermarksMap.get(value)?.enabled" svgIcon="red:warning"></mat-icon>
<span> {{ watermarksMap.get(value)?.name }} </span>
</mat-select-trigger>
<mat-option *ngFor="let watermark of watermarks" [disabled]="!watermark.enabled" [value]="watermark.id">
<mat-icon *ngIf="!watermark.enabled" svgIcon="red:warning"></mat-icon>
{{ watermark.name }}
</mat-option>
</mat-select>
<mat-option *ngFor="let watermark of watermarks" [disabled]="!watermark.enabled" [value]="watermark.id">
<mat-icon *ngIf="!watermark.enabled" svgIcon="red:warning"></mat-icon>
{{ watermark.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>

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

@ -1,24 +0,0 @@
.container {
margin-top: 14px;
.watermark {
width: 300px;
max-width: 300px;
mat-select {
margin-left: 22px;
mat-select-trigger,
mat-option {
display: flex;
align-items: center;
gap: 18px;
}
span {
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}

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

@ -15,8 +15,8 @@
</div>
<div class="iqser-input-group required w-400">
<mat-form-field floatLabel="always">
<mat-label>{{ 'add-dossier-dialog.form.template.label' | translate }}</mat-label>
<label>{{ 'add-dossier-dialog.form.template.label' | translate }}</label>
<mat-form-field>
<mat-select
(valueChange)="dossierTemplateChanged($event)"
[placeholder]="'add-dossier-dialog.form.template.placeholder' | translate"

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

@ -19,13 +19,3 @@
redaction-select {
flex: 1;
}
.watermark {
width: 315px;
max-width: 315px;
mat-form-field {
margin-left: 22px;
margin-top: -10px;
}
}

2
apps/red-ui/src/styles.scss
View File

@ -68,6 +68,7 @@
$iqser-yellow-2: vars.$yellow-2,
$iqser-helpmode-primary: vars.$green-2,
$iqser-inputs-outline: vars.$grey-5,
$iqser-inputs-height: 36px,
$iqser-popup-background: vars.$white,
$iqser-shadow: vars.$grey-4,
$iqser-toggle-bg: vars.$grey-4,
@ -123,6 +124,7 @@ $dark-accent-10: darken(vars.$accent, 10%);
$iqser-yellow-2: vars.$yellow-2,
$iqser-helpmode-primary: vars.$green-2,
$iqser-inputs-outline: $light-accent-10,
$iqser-inputs-height: 36px,
$iqser-popup-background: $dark-accent-5,
$iqser-shadow: rgba(0, 0, 0, 0.4),
$iqser-toggle-bg: $light-accent-5,

2
libs/common-ui

@ -1 +1 @@
Subproject commit 66f13e9ef0e0cb6c2c323806baf5b0d2ab2446e4
Subproject commit daa92eeccf25713f75f674ab0b8a4df0becdb083