fixed distances between fields and texts on description editor

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html

@@ -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>

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html

@@ -1,24 +1,32 @@
-<div class="col-12">
+<div class="row">
-	<div class="row">
+	<div class="col-12">
-		<h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id">
+		<div class="row">
-			{{path}}
+			<h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id">
-			{{fieldSet.title}}
+				{{path}}
-		</h5>
+				{{fieldSet.title}}
-		<mat-icon class="col-auto info-icon" *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
+			</h5>
+			<mat-icon class="col-auto info-icon" *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
+		</div>
 	</div>
 </div>
 
-
+<div class="row">
-<h6 *ngIf="fieldSet.description && !isChild" class="col-12" [innerHTML]="fieldSet.description"></h6>
+	<div class="col-12">
-
+		<h6 *ngIf="fieldSet.description && !isChild" [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>
 </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>
+	

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html

@@ -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>

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html

@@ -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">
+	<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.FREE_TEXT">
-		<mat-label>{{ field.data.label }}</mat-label>
+		<div class="col-12">
-		<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
+			<mat-form-field class="w-100">
-		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
+				<mat-label>{{ field.data.label }}</mat-label>
-		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				<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('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
+				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
-	</mat-form-field>
+				<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>
+	<div class="col-12">
-		<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>
+		<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="w-100">
-		<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-label>{{ field.data.label }}</mat-label>
-			<mat-icon>close</mat-icon>
+			<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>
+			<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-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
+				<mat-icon>close</mat-icon>
-		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue')['errors'] && propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</button>
-	</mat-form-field>
+			<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 ' +
+		<div class="col-12">
-														((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 [form]="propertiesFormGroup?.get(field.id).get('textValue')" [placeholder]="field.data.label" [required]="isRequired" [wrapperClasses]="'full-width editor ' +
-		</rich-text-editor-component>
+															((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>