Fix various issues and styling of the language editor

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

@@ -3,7 +3,7 @@
 		<div class="row">
 			<div class="search-bar">
 				<input class="search-text" mat-input #search placeholder="{{ 'DASHBOARD.SEARCH' | translate }}">
-				<button mat-raised-button type="button" class="lightblue-btn" (click)="findKeys(search)">
+				<button mat-raised-button type="button" class="lightblue-btn search-btn" (click)="findKeys(search)">
 					<mat-icon>search</mat-icon>
 				</button>
 			</div>

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

@@ -42,5 +42,10 @@
 	}
 	.search-text::placeholder {
 		color: rgb(197, 194, 194);
+		line-height: 150%;
+	}
+
+	.search-btn {
+		left: 4px;
 	}
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit, ChangeDetectorRef, AfterViewChecked, ElementRef, ViewChildren, QueryList } from '@angular/core';
 import { LanguageService } from '@app/core/services/language/language.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';
@@ -13,13 +13,12 @@ import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 	templateUrl: './language-editor.component.html',
 	styleUrls: ['./language-editor.component.scss']
 })
-export class LanguageEditorComponent extends BaseComponent implements OnInit, OnDestroy {
-
-	@ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;
+export class LanguageEditorComponent extends BaseComponent implements OnInit, AfterViewInit, OnDestroy {
 
+	@ViewChildren('autosize', {read: CdkTextareaAutosize}) elements: QueryList<CdkTextareaAutosize>;
 
 	readonly rowHeight = 100;
-	readonly maxElements = 12;
+	readonly maxElements = 10;
 
 	allkeys = [];
 	keys = [];
@@ -38,6 +37,21 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
 		private router: Router,
 	) { super(); }
 
+
+	ngAfterViewInit(): void {
+		this.elements.changes.pipe(takeUntil(this._destroyed)).subscribe(items => {
+			if (this.elements.length > 0) {
+				this.elements.toArray().forEach(autosize => {
+					if (autosize instanceof CdkTextareaAutosize) {
+						this.setupAutosize(autosize);
+					} else {
+						console.log(autosize);
+					}
+				})
+			}
+		});
+	}
+
 	ngOnInit() {
 		this.formBuilder = new FormBuilder();
 		this.formGroup = this.formBuilder.group({});
@@ -68,7 +82,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);
 	}
@@ -114,7 +128,13 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
 
 	refreshFn = (ev: Event) => {
 		const evDoc = (<HTMLBaseElement>ev.target);
-		if (document.scrollingElement !== undefined) {
+		let mainPage;
+		evDoc.childNodes.forEach(child => {
+			if ((<HTMLDivElement> child).id === 'main-page') {
+				mainPage = child;
+			}
+		});
+		if (document.scrollingElement !== undefined && mainPage !== undefined) {
 			this.startIndex = Math.floor(evDoc.scrollTop / this.rowHeight);
 			this.endIndex = this.startIndex + this.maxElements;
 			const tempKeys = this.keys.slice(this.startIndex, this.endIndex);
@@ -140,10 +160,12 @@ 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;
+	private setupAutosize(autosize: CdkTextareaAutosize) {
+		if (autosize !== undefined && autosize !== null) {
+			autosize.minRows = 1;
+			autosize.maxRows = 5;
+			autosize.enabled = true;
+		}
 	}
 
 }