diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.html b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html index 69239e044..87d9f0168 100644 --- a/dmp-frontend/src/app/ui/language-editor/language-editor.component.html +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html @@ -3,7 +3,7 @@
diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss b/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss index 811aa4ee3..874288730 100644 --- a/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss +++ b/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; } } diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts index 551df1671..cb7e28239 100644 --- a/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts +++ b/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; 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 = (ev.target); - if (document.scrollingElement !== undefined) { + let mainPage; + evDoc.childNodes.forEach(child => { + if (( 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; + } } }