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

Merge branch 'RED-9131' into 'master'

Browse Source 
RED-9131: more design improvements.

See merge request redactmanager/red-ui!424
This commit is contained in:
Valentin-Gabriel Mihai 2024-05-20 10:43:47 +02:00
commit 63ee7e17b8
6 changed files with 137 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html
View File

@ -7,8 +7,8 @@
<div class="content-inner">
<div class="content-container full-height">
<div class="overlay-shadow"></div>
<div class="dialog">
<div *ngIf="!shouldHideTitle" class="dialog-header">
<div [ngClass]="!isWarningsScreen && 'dialog'">
<div *ngIf="!isWarningsScreen" class="dialog-header">
<div class="heading-l" [translate]="translations[path]"></div>
</div>

4
apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts
View File

@ -11,14 +11,14 @@ import { accountTranslations } from '@translations/account-translations';
export class BaseAccountScreenComponent implements OnInit {
readonly translations = accountTranslations;
readonly path: string;
readonly shouldHideTitle: boolean;
readonly isWarningsScreen: boolean;
constructor(
private readonly _router: Router,
private readonly _hostRef: ViewContainerRef,
) {
this.path = this._router.url.split('/').pop();
this.shouldHideTitle = this.path === 'warnings-preferences';
this.isWarningsScreen = this.path === 'warnings-preferences';
}
ngOnInit(): void {

152
apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.html
View File

@ -1,77 +1,79 @@
<form [formGroup]="form">
<div class="dialog-content">
<h1>{{ 'dialog-defaults-form.title' | translate }}</h1>
<h3>{{ 'dialog-defaults-form.redaction.title' | translate }}</h3>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.redaction.add-dialog"></label>
<mat-form-field>
<mat-select formControlName="addRedaction">
<mat-option *ngFor="let option of redactionAddOptions" [value]="option.value">{{
option.label | translate
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionAddRedaction" formControlName="addRedactionApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
<div class="dialog">
<form [formGroup]="form">
<div class="dialog-content">
<h1>{{ 'dialog-defaults-form.title' | translate }}</h1>
<h3>{{ 'dialog-defaults-form.redaction.title' | translate }}</h3>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.redaction.add-dialog"></label>
<mat-form-field>
<mat-select formControlName="addRedaction">
<mat-option *ngFor="let option of redactionAddOptions" [value]="option.value">{{
option.label | translate
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionAddRedaction" formControlName="addRedactionApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.redaction.remove-dialog"></label>
<mat-form-field>
<mat-select formControlName="removeRedaction">
<mat-option *ngFor="let option of redactionRemoveOptions" [value]="option.value">{{
option.label | translate
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveRedaction" formControlName="removeRedactionApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
<h3>{{ 'dialog-defaults-form.recommendation.title' | translate }}</h3>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.recommendation.remove-dialog"></label>
<mat-form-field>
<mat-select formControlName="removeRecommendation">
<mat-option *ngFor="let option of recommendationRemoveOptions" [value]="option.value">{{
option.label | translate
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation" formControlName="removeRecommendationApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
<h3>{{ 'dialog-defaults-form.hint.title' | translate }}</h3>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.hint.add-dialog"></label>
<mat-form-field>
<mat-select formControlName="addHint">
<mat-option *ngFor="let option of hintAddOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionAddHint" formControlName="addHintApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.hint.remove-dialog"></label>
<mat-form-field>
<mat-select formControlName="removeHint">
<mat-option *ngFor="let option of removeOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveHint" formControlName="removeHintApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
</div>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.redaction.remove-dialog"></label>
<mat-form-field>
<mat-select formControlName="removeRedaction">
<mat-option *ngFor="let option of redactionRemoveOptions" [value]="option.value">{{
option.label | translate
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveRedaction" formControlName="removeRedactionApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
<div class="dialog-actions">
<iqser-icon-button
(action)="save()"
[disabled]="!valid || !changed"
[label]="'preferences-screen.actions.save' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
</div>
<h3>{{ 'dialog-defaults-form.recommendation.title' | translate }}</h3>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.recommendation.remove-dialog"></label>
<mat-form-field>
<mat-select formControlName="removeRecommendation">
<mat-option *ngFor="let option of recommendationRemoveOptions" [value]="option.value">{{
option.label | translate
}}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation" formControlName="removeRecommendationApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
<h3>{{ 'dialog-defaults-form.hint.title' | translate }}</h3>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.hint.add-dialog"></label>
<mat-form-field>
<mat-select formControlName="addHint">
<mat-option *ngFor="let option of hintAddOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionAddHint" formControlName="addHintApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
<div class="iqser-input-group w-450">
<label translate="dialog-defaults-form.hint.remove-dialog"></label>
<mat-form-field>
<mat-select formControlName="removeHint">
<mat-option *ngFor="let option of removeOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveHint" formControlName="removeHintApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox>
</div>
</div>
<div class="dialog-actions">
<iqser-icon-button
(action)="save()"
[disabled]="!valid || !changed"
[label]="'preferences-screen.actions.save' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
</div>
</form>
</form>
</div>

13
apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.scss
View File

@ -2,6 +2,15 @@ mat-checkbox {
margin: 8px 0 0 8px;
}
.dialog-actions {
border-top: none;
h3 {
margin-top: 24px;
margin-bottom: 4px;
}
form .iqser-input-group:not(first-of-type) {
margin-top: 8px;
}
.dialog {
margin-bottom: 0;
}

89
apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.html
View File

@ -1,52 +1,53 @@
<redaction-dialog-defaults *ngIf="currentScreen === screens.WARNING_PREFERENCES && !config.IS_DOCUMINE"></redaction-dialog-defaults>
<div *ngIf="currentScreen === screens.WARNING_PREFERENCES" class="content-delimiter"></div>
<form [formGroup]="form">
<div class="dialog-content">
<div class="dialog-content-left">
<ng-container *ngIf="currentScreen === screens.PREFERENCES">
<div class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="autoExpandFiltersOnActions">
{{ 'preferences-screen.form.auto-expand-filters-on-action' | translate }}
</mat-slide-toggle>
</div>
<div [ngClass]="currentScreen === screens.WARNING_PREFERENCES && 'dialog'">
<form [formGroup]="form">
<div class="dialog-content">
<div class="dialog-content-left">
<ng-container *ngIf="currentScreen === screens.PREFERENCES">
<div class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="autoExpandFiltersOnActions">
{{ 'preferences-screen.form.auto-expand-filters-on-action' | translate }}
</mat-slide-toggle>
</div>
<div *ngIf="config.IS_DOCUMINE" class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="openScmDialogByDefault">
{{ 'preferences-screen.form.open-structured-view-by-default' | translate }}
</mat-slide-toggle>
</div>
<div *ngIf="config.IS_DOCUMINE" class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="openScmDialogByDefault">
{{ 'preferences-screen.form.open-structured-view-by-default' | translate }}
</mat-slide-toggle>
</div>
<div *allow="roles.getTables" class="iqser-input-group">
<label [translate]="'preferences-screen.form.table-extraction-type'"></label>
<input formControlName="tableExtractionType" />
</div>
</ng-container>
<div *allow="roles.getTables" class="iqser-input-group">
<label [translate]="'preferences-screen.form.table-extraction-type'"></label>
<input formControlName="tableExtractionType" />
</div>
</ng-container>
<ng-container *ngIf="currentScreen === screens.WARNING_PREFERENCES">
<h1>{{ 'preferences-screen.warnings-subtitle' | translate }}</h1>
<p class="warnings-description">{{ 'preferences-screen.warnings-description' | translate }}</p>
<ng-container *ngIf="currentScreen === screens.WARNING_PREFERENCES">
<h1>{{ 'preferences-screen.warnings-subtitle' | translate }}</h1>
<p class="warnings-description">{{ 'preferences-screen.warnings-description' | translate }}</p>
<div class="iqser-input-group">
<mat-checkbox color="primary" formControlName="loadAllAnnotationsWarning">
{{ 'preferences-screen.form.load-all-annotations-warning' | translate }}
</mat-checkbox>
</div>
<div class="iqser-input-group">
<mat-checkbox color="primary" formControlName="helpModeDialog">
{{ 'preferences-screen.form.help-mode-dialog' | translate }}
</mat-checkbox>
</div>
</ng-container>
<div class="iqser-input-group">
<mat-checkbox color="primary" formControlName="loadAllAnnotationsWarning">
{{ 'preferences-screen.form.load-all-annotations-warning' | translate }}
</mat-checkbox>
</div>
<div class="iqser-input-group">
<mat-checkbox color="primary" formControlName="helpModeDialog">
{{ 'preferences-screen.form.help-mode-dialog' | translate }}
</mat-checkbox>
</div>
</ng-container>
</div>
</div>
</div>
<div class="dialog-actions">
<iqser-icon-button
(action)="save()"
[disabled]="!valid || !changed"
[label]="'preferences-screen.actions.save' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
</div>
</form>
<div class="dialog-actions">
<iqser-icon-button
(action)="save()"
[disabled]="!valid || !changed"
[label]="'preferences-screen.actions.save' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
</div>
</form>
</div>

6
apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.scss
View File

@ -1,9 +1,3 @@
@use 'variables';
.content-delimiter {
border-top: 1px solid var(--iqser-separator);
}
.warnings-description {
width: 105%;
}