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 { }