fixed distances between fields and texts on description editor

This commit is contained in:
Sofia Papacharalampous 2024-05-24 12:32:27 +03:00
parent b320b6c212
commit 0c501eaecb
4 changed files with 60 additions and 42 deletions
dmp-frontend/src/app/ui/description/editor/description-form/components

View File

@ -10,14 +10,14 @@
<ng-container *ngIf="fieldSet && propertiesFormGroup" class="row">
<div class="col-12">
<div mat-dialog-content>
<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path"></app-description-form-field-set-title>
<app-description-form-field-set-title [fieldSet]="fieldSet" [path]="path"></app-description-form-field-set-title>
</div>
</div>
<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
<div class="row">
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
</div>
<app-description-form-field class="col-12 compositeField" [propertiesFormGroup]="propertiesFormGroup.get('fields')" [field]="field" [fieldSet]="fieldSet" [isChild]="true"></app-description-form-field>
<app-description-form-field [propertiesFormGroup]="propertiesFormGroup.get('fields')" [field]="field" [fieldSet]="fieldSet" [isChild]="true"></app-description-form-field>
</div>
</ng-container>
</div>

View File

@ -1,24 +1,32 @@
<div class="col-12">
<div class="row">
<h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id">
{{path}}
{{fieldSet.title}}
</h5>
<mat-icon class="col-auto info-icon" *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
<div class="row">
<div class="col-12">
<div class="row">
<h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id">
{{path}}
{{fieldSet.title}}
</h5>
<mat-icon class="col-auto info-icon" *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
</div>
</div>
</div>
<h6 *ngIf="fieldSet.description && !isChild" class="col-12" [innerHTML]="fieldSet.description"></h6>
<div *ngIf="fieldSet.extendedDescription && !isChild" class="col-12 mt-3 mb-3">
<div *ngIf="!showExtendedDescription" (click)="showExtendedDescription = !showExtendedDescription">
<span class="more d-flex justify-content-center">{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-MORE' | translate}}</span>
</div>
<div *ngIf="showExtendedDescription">
<h6 [innerHTML]="fieldSet.extendedDescription"></h6>
<span class="more d-flex justify-content-center" (click)="showExtendedDescription = !showExtendedDescription">
{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-LESS' | translate}}
</span>
<div class="row">
<div class="col-12">
<h6 *ngIf="fieldSet.description && !isChild" [innerHTML]="fieldSet.description"></h6>
</div>
</div>
<div class="row">
<div *ngIf="fieldSet.extendedDescription && !isChild" class="col-12 mt-3 mb-3">
<div *ngIf="!showExtendedDescription" (click)="showExtendedDescription = !showExtendedDescription">
<span class="more d-flex justify-content-center">{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-MORE' | translate}}</span>
</div>
<div *ngIf="showExtendedDescription">
<h6 [innerHTML]="fieldSet.extendedDescription"></h6>
<span class="more d-flex justify-content-center" (click)="showExtendedDescription = !showExtendedDescription">
{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-LESS' | translate}}
</span>
</div>
</div>
</div>

View File

@ -3,7 +3,7 @@
<div *ngIf="showTitle" class="col-12">
<div class="row">
<div class="col">
<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
<app-description-form-field-set-title [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
</div>
<div *ngIf="!hideAnnotations" class="col-auto">
<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(fieldSet.id)" [disabled]="!canReview">
@ -21,7 +21,7 @@
<div class="row">
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
</div>
<app-description-form-field class="col-12" [propertiesFormGroup]="fieldSetItemPropertiesControl.get('fields')" [field]="field" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-description-form-field>
<app-description-form-field [propertiesFormGroup]="fieldSetItemPropertiesControl.get('fields')" [field]="field" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-description-form-field>
</ng-container>
</div>
</div>

View File

@ -7,13 +7,17 @@
<h5 *ngIf="fieldSet.extendedDescription && !isChild" class="col-12">
<i>{{fieldSet.extendedDescription}}</i>
</h5>
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.FREE_TEXT" class="col-12">
<mat-label>{{ field.data.label }}</mat-label>
<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
</mat-form-field>
<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.FREE_TEXT">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{ field.data.label }}</mat-label>
<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
</mat-form-field>
</div>
</ng-container>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES" class="col-12">
<ng-container *ngIf="field.data.multipleSelect">
@ -97,19 +101,25 @@
{{field.data.label}}</mat-checkbox>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('booleanValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('booleanValue').getError('backendError').message}}</mat-error>
</div>
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="col-12">
<mat-label>{{ field.data.label }}</mat-label>
<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="isRequired" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
<button mat-icon-button type="button" *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').disabled && propertiesFormGroup?.get(field.id).get('textValue').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup?.get(field.id).get('textValue').patchValue('')">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue')['errors'] && propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="col-12">
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="w-100">
<mat-label>{{ field.data.label }}</mat-label>
<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="isRequired" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
<button mat-icon-button type="button" *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').disabled && propertiesFormGroup?.get(field.id).get('textValue').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup?.get(field.id).get('textValue').patchValue('')">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue')['errors'] && propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
<rich-text-editor-component class="col-12" [form]="propertiesFormGroup?.get(field.id).get('textValue')" [placeholder]="field.data.label" [required]="isRequired" [wrapperClasses]="'full-width editor ' +
((isRequired && propertiesFormGroup?.get(field.id).get('textValue').touched && propertiesFormGroup?.get(field.id).get('textValue').hasError('required')) ? 'required' : '')" [editable]="!propertiesFormGroup?.get(field.id).get('textValue').disabled">
</rich-text-editor-component>
<div class="col-12">
<rich-text-editor-component [form]="propertiesFormGroup?.get(field.id).get('textValue')" [placeholder]="field.data.label" [required]="isRequired" [wrapperClasses]="'full-width editor ' +
((isRequired && propertiesFormGroup?.get(field.id).get('textValue').touched && propertiesFormGroup?.get(field.id).get('textValue').hasError('required')) ? 'required' : '')" [editable]="!propertiesFormGroup?.get(field.id).get('textValue').disabled">
</rich-text-editor-component>
</div>
<div [class]="(propertiesFormGroup?.get(field.id).get('textValue')['errors'] && propertiesFormGroup?.get(field.id).get('textValue').hasError('required') && propertiesFormGroup?.get(field.id).get('textValue').touched) ? 'visible' : 'invisible'" class="col-12">
<div class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>