fixed distances between fields and texts on description editor
This commit is contained in:
parent
b320b6c212
commit
0c501eaecb
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue