From bc16f8a2c4c5516c7df1f454eee6d78ca79ad40a Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 2 Apr 2024 14:46:25 +0300
Subject: [PATCH] styling changes

1. description template > fixed import dialog
2. description template editor > fixed autocomplete input for editors on screen resize
---
 ...description-template-editor.component.html | 22 +++----
 ...description-template.dialog.component.html | 62 ++++++++++---------
 dmp-frontend/src/assets/i18n/en.json          |  4 +-
 3 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html b/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
index a23171b25..dcece46a4 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
@@ -134,18 +134,16 @@
 
 					<div class="col-12">
 						<div class="row justify-content-end">
-							<div class="col d-flex justify-content-end" style="overflow: hidden;">
-								<div style="min-width: 20em;max-width: 25em;">
-									<!-- <mat-form-field>
-											<input matInput #email placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}" (focus)="onUserFieldFocus()" (blur)="onUserFieldBlur()" (keyup.enter)="addUser(email)">
-										</mat-form-field> -->
-									<mat-form-field class="full-width basic-info-input" *ngIf="!formGroup.disabled">
-										<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS' | translate}}</mat-label>
-										<app-single-auto-complete [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
-										</app-single-auto-complete>
-										<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-									</mat-form-field>
-								</div>
+							<div class="col-12 col-lg-4 d-flex justify-content-end" style="overflow: hidden;">
+								<!-- <mat-form-field>
+										<input matInput #email placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}" (focus)="onUserFieldFocus()" (blur)="onUserFieldBlur()" (keyup.enter)="addUser(email)">
+									</mat-form-field> -->
+								<mat-form-field class="full-width basic-info-input" *ngIf="!formGroup.disabled">
+									<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS' | translate}}</mat-label>
+									<app-single-auto-complete [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
+									</app-single-auto-complete>
+									<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
 							</div>
 
 							<!-- <div class="col-auto">
diff --git a/dmp-frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html b/dmp-frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html
index 5f0e0a138..540aba5de 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html
+++ b/dmp-frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html
@@ -1,5 +1,5 @@
-<div class="confirmation-dialog">
-	<div class="row d-flex">
+<div class="container-fluid">
+	<div class="row d-flex mt-2">
 		<div class="confirmation-message col-auto align-self-center">
 			<h4>{{ data.message }}</h4>
 		</div>
@@ -7,35 +7,37 @@
 			<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
 		</div>
 	</div>
-	<div class="row">
-		<div class="col-12">
-			<ngx-dropzone class="drop-file" (change)="selectXML($event)" [accept]="'text/xml'" [multiple]="false">
-				<ngx-dropzone-preview class="file-preview" [removable]="true" *ngIf="hasBlueprint()" (removed)="onRemove()">
-					<ngx-dropzone-label class="file-label">{{ selectedFileName }}</ngx-dropzone-label>
-				</ngx-dropzone-preview>
-			</ngx-dropzone>
+	<mat-dialog-content>
+		<div class="row">
+			<div class="col-12">
+				<ngx-dropzone class="drop-file" (change)="selectXML($event)" [accept]="'text/xml'" [multiple]="false">
+					<ngx-dropzone-preview class="file-preview" [removable]="true" *ngIf="hasBlueprint()" (removed)="onRemove()">
+						<ngx-dropzone-label class="file-label">{{ selectedFileName }}</ngx-dropzone-label>
+					</ngx-dropzone-preview>
+				</ngx-dropzone>
+			</div>
 		</div>
-	</div>
-	<div class="row">
-		<div class="col-12 d-flex justify-content-center attach-btn">
-			<button mat-button type="button" class="col-auto attach-file" (click)="imgFileInput.click()">
-				<mat-icon class="mr-2">input</mat-icon>
-				<span *ngIf="!hasBlueprint()">{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}</span>
-				<span *ngIf="hasBlueprint()">{{'GENERAL.START-NEW-DMP-DIALOG.REPLACE-FILE' | translate}}</span>
-			</button>
-			<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
+		<div class="row">
+			<div class="col-12 d-flex justify-content-center attach-btn">
+				<button mat-button type="button" class="col-auto attach-file" (click)="imgFileInput.click()">
+					<mat-icon class="mr-2">input</mat-icon>
+					<span *ngIf="!hasBlueprint()">{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-FILE' | translate}}</span>
+					<span *ngIf="hasBlueprint()">{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.REPLACE-FILE' | translate}}</span>
+				</button>
+				<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
+			</div>
 		</div>
-	</div>
-	<div class="row">
-		<mat-form-field class="col-12">
-			<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="datasetBlueprintName" [(ngModel)]="data.name">
-		</mat-form-field>
-		<div class="col-auto">
-			<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
+		<div class="row">
+			<mat-form-field class="col-12">
+				<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="datasetBlueprintName" [(ngModel)]="data.name">
+			</mat-form-field>
+			<div class="col-auto">
+				<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
+			</div>
+			<div class="col"></div>
+			<div class="col-auto">
+				<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+			</div>
 		</div>
-		<div class="col"></div>
-		<div class="col-auto">
-			<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
-		</div>
-	</div>
+	</mat-dialog-content>
 </div>
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 4b310778a..621edf6d0 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -773,7 +773,9 @@
 			"UPLOAD-XML": "Import",
 			"UPLOAD-XML-FILE-TITLE": "Import Description Template",
 			"UPLOAD-XML-NAME": "Name Of Description Template",
-			"UPLOAD-XML-FILE-CANCEL": "Cancel"
+			"UPLOAD-XML-FILE-CANCEL": "Cancel",
+			"UPLOAD-FILE": "Upload File",
+			"REPLACE-FILE": "Replace File"
 		}
 	},
 	"DESCRIPTION-TEMPLATE-TYPE-LISTING": {