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 b0eaa1c83..655293b39 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 @@ -14,12 +14,8 @@
{{key}} : - +
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 a02699a28..811aa4ee3 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 @@ -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; - right: 200px; + left: 214px; + 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; 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 dcf941546..551df1671 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 } 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 = (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; + } + } diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts index ff38b4929..9d8b40f16 100644 --- a/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts +++ b/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 { }