Fix Language Editor

dmp-frontend/src/app/ui/language-editor/language-editor.component.html

@@ -14,12 +14,8 @@
 					<div *ngFor="let key of visibleKeys">
 						<mat-form-field >
 							<mat-label>{{key}} :</mat-label>
-							<textarea matInput class="language-area"
+							<textarea matInput class="language-area" cdkTextareaAutosize #autosize="cdkTextareaAutosize" [formControl]="formGroup.get(key)">
-										[formControl]="formGroup.get(key)"
+									</textarea>
-										cdkTextareaAutosize
-										#autosize="cdkTextareaAutosize"
-										cdkAutosizeMinRows="1"
-										cdkAutosizeMaxRows="5"></textarea>
 						</mat-form-field >
 					</div>
 				</div>

dmp-frontend/src/app/ui/language-editor/language-editor.component.scss

@@ -1,5 +1,5 @@
 .language-editor {
-	padding-top: 5em;
+	padding-top: 6em;
 	padding-bottom: 2em;
 
 	.language-area {
@@ -12,13 +12,13 @@
 		width: 56px !important;
 		bottom: 10px;
 		position: fixed;
-		right: 10px;
+		right: 24px;
 	}
 
 	.sticky {
 		position: fixed;
-		left: 200px;
+		left: 214px;
-		right: 200px;
+		right: 214px;
 		width: 50%;
 	}
 
@@ -28,7 +28,7 @@
 		width: 258px !important;
 		top: 100px;
 		position: fixed;
-		right: 10px;
+		right: 24px;
 		background-color: white;
 		border: 1px solid rgb(218, 218, 218);
 		border-radius: 6px;

dmp-frontend/src/app/ui/language-editor/language-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { LanguageService } from '@app/core/services/language/language.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';
@@ -6,6 +6,7 @@ import { FormGroup, FormBuilder } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
 import { Router } from '@angular/router';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 
 @Component({
 	selector: 'app-language-editor',
@@ -13,6 +14,10 @@ import { Router } from '@angular/router';
 	styleUrls: ['./language-editor.component.scss']
 })
 export class LanguageEditorComponent extends BaseComponent implements OnInit, OnDestroy {
+
+	@ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;
+
+
 	readonly rowHeight = 100;
 	readonly maxElements = 12;
 
@@ -63,7 +68,7 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
 			}
 			this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex);
 			this.parseFinished = true;
-
+			this.setupAutosize();
 		};
 		fr.readAsText(blob);
 	}
@@ -108,8 +113,9 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
 	}
 
 	refreshFn = (ev: Event) => {
+		const evDoc = (<HTMLBaseElement>ev.target);
 		if (document.scrollingElement !== undefined) {
-			this.startIndex = Math.floor(document.scrollingElement.scrollTop / this.rowHeight);
+			this.startIndex = Math.floor(evDoc.scrollTop / this.rowHeight);
 			this.endIndex = this.startIndex + this.maxElements;
 			const tempKeys = this.keys.slice(this.startIndex, this.endIndex);
 			this.visibleKeys.length = 0;
@@ -134,4 +140,10 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
 		this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex);
 	}
 
+	private setupAutosize() {
+		this.autosize.minRows = 1;
+		this.autosize.maxRows = 5;
+		this.autosize.enabled = true;
+	}
+
 }

dmp-frontend/src/app/ui/language-editor/language-editor.module.ts

@@ -4,6 +4,7 @@ import { LanguageEditorRoutingModule } from './language-editor.routing';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
+import {TextFieldModule} from '@angular/cdk/text-field';
 
 
 
@@ -13,7 +14,8 @@ import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/co
 	CommonUiModule,
 	CommonFormsModule,
 	ConfirmationDialogModule,
-	LanguageEditorRoutingModule
+	LanguageEditorRoutingModule,
+	TextFieldModule
   ]
 })
 export class LanguageEditorModule { }