MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Fix various issues and styling of the language editor

This commit is contained in:
George Kalampokis 2020-11-04 16:58:24 +02:00
parent 07e8c51b79
commit 2ed23c4676
3 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<div class="row"> <div class="row">
<div class="search-bar"> <div class="search-bar">
<input class="search-text" mat-input #search placeholder="{{ 'DASHBOARD.SEARCH' | translate }}"> <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> <mat-icon>search</mat-icon>
</button> </button>
</div> </div>

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

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

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

@ -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 { LanguageService } from '@app/core/services/language/language.service';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@ -13,13 +13,12 @@ import { CdkTextareaAutosize } from '@angular/cdk/text-field';
templateUrl: './language-editor.component.html', templateUrl: './language-editor.component.html',
styleUrls: ['./language-editor.component.scss'] styleUrls: ['./language-editor.component.scss']
}) })
export class LanguageEditorComponent extends BaseComponent implements OnInit, OnDestroy { export class LanguageEditorComponent extends BaseComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;
@ViewChildren('autosize', {read: CdkTextareaAutosize}) elements: QueryList<CdkTextareaAutosize>;
readonly rowHeight = 100; readonly rowHeight = 100;
readonly maxElements = 12; readonly maxElements = 10;
allkeys = []; allkeys = [];
keys = []; keys = [];
@ -38,6 +37,21 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
private router: Router, private router: Router,
) { super(); } ) { 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() { ngOnInit() {
this.formBuilder = new FormBuilder(); this.formBuilder = new FormBuilder();
this.formGroup = this.formBuilder.group({}); 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.visibleKeys = this.keys.slice(this.startIndex, this.endIndex);
this.parseFinished = true; this.parseFinished = true;
this.setupAutosize();
}; };
fr.readAsText(blob); fr.readAsText(blob);
} }
@ -114,7 +128,13 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
refreshFn = (ev: Event) => { refreshFn = (ev: Event) => {
const evDoc = (<HTMLBaseElement>ev.target); 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.startIndex = Math.floor(evDoc.scrollTop / this.rowHeight);
this.endIndex = this.startIndex + this.maxElements; this.endIndex = this.startIndex + this.maxElements;
const tempKeys = this.keys.slice(this.startIndex, this.endIndex); 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); this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex);
} }
private setupAutosize() { private setupAutosize(autosize: CdkTextareaAutosize) {
this.autosize.minRows = 1; if (autosize !== undefined && autosize !== null) {
this.autosize.maxRows = 5; autosize.minRows = 1;
this.autosize.enabled = true; autosize.maxRows = 5;
autosize.enabled = true;
}
} }
} }