diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index 1e90e19a7..f3d90a719 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
@@ -247,7 +247,7 @@
-
+
- {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TEMPLATE-OUTLINE' | translate}}
+
+
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TEMPLATE-OUTLINE' | translate}}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss
index ebd142270..dc1e64f35 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss
@@ -1,10 +1,12 @@
-
+$scroller-height: 3em;
.scroll-container {
// overflow-y: auto;
max-height: 60vh;
overflow-y: scroll;
padding-left: .2em;
padding-right: 1em;
+ // padding-top: $scroller-height;
+ // padding-bottom: $scroller-height;
}
// #style-6::-webkit-scrollbar-track
@@ -59,4 +61,32 @@
opacity: 0.6;
font-size: 1.6em;
margin-top: 0px;
+}
+
+.table-container{
+ position: relative;
+}
+.table-scroller{
+ // background-color: #5cf7f221;
+ position: absolute;
+ width: 95%;
+ height: $scroller-height;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ // z-index: -9999;
+}
+.top-scroller{
+ top: 1px;
+ background: rgb(255,255,255);
+ background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(92,247,242,0.4542191876750701) 100%);
+}
+.bottom-scroller{
+ bottom: 1px;
+ background: rgb(255,255,255);
+ background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(92,247,242,0.4542191876750701) 100%);
+}
+
+.opacity-0{
+ opacity: 0 !important;
}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
index 69717e782..685742eff 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
@@ -1,8 +1,8 @@
import { DOCUMENT } from '@angular/common';
-import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
+import { Component, EventEmitter, Inject, OnInit, Output, Input, AfterViewInit } from '@angular/core';
import { BaseComponent } from '@common/base/base.component';
import { interval, Subject, Subscription } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
import { type } from 'os';
import { SimpleChanges } from '@angular/core';
import { NewEntryType, TableUpdateInfo, ToCEntry, ToCEntryType } from './table-of-contents-entry';
@@ -18,7 +18,7 @@ import { ContentObserver } from '@angular/cdk/observers';
styleUrls: ['./table-of-contents.scss'],
templateUrl: './table-of-contents.html'
})
-export class DatasetProfileTableOfContents extends BaseComponent implements OnInit {
+export class DatasetProfileTableOfContents extends BaseComponent implements OnInit, AfterViewInit {
@Input() links: ToCEntry[];
@Input() itemSelected: ToCEntry;
@@ -42,6 +42,11 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
private VALID_DROP_TIME = 500;//ms
overcontainer: string = null;
+ $clock = interval(10);
+ scrollTableTop = false;
+ scrollTableBottom = false;
+ pxToScroll = 15;
+
constructor(
@Inject(DOCUMENT) private _document: Document,
private dragulaService: DragulaService,
@@ -449,6 +454,46 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
+ }
+ ngAfterViewInit(): void {
+
+ const top = document.querySelector('.top-scroller');
+ const bottom = document.querySelector('.bottom-scroller');
+ const tableDiv = document.querySelector('#tocentrytable');
+
+ try {
+ top.addEventListener('mouseover', (e) => {this.scrollTableTop = true; });
+ bottom.addEventListener('mouseover', (e) => {this.scrollTableBottom = true; });
+
+ top.addEventListener('mouseout', (e) => {this.scrollTableTop = false});
+ bottom.addEventListener('mouseout', (e) => {this.scrollTableBottom = false;});
+
+
+ this.$clock
+ .pipe(
+ takeUntil(this._destroyed),
+ filter(() => this.scrollTableTop)
+ )
+ .subscribe(()=>{
+ try{
+ tableDiv.scrollBy(0, -this.pxToScroll);
+ } catch {}
+ });
+ this.$clock
+ .pipe(
+ takeUntil(this._destroyed),
+ filter(() => this.scrollTableBottom)
+ )
+ .subscribe(()=>{
+ try{
+ tableDiv.scrollBy(0, this.pxToScroll);
+ } catch {}
+ });
+ } catch {
+ console.log('could not find scrolling elements');
+ }
+
+
}
private _scrollIntoDragginItem(id: string){