From 1d397d28cf2bab75904b12ae311f17bbf3eebf04 Mon Sep 17 00:00:00 2001 From: Kristan Ntavidi Date: Wed, 21 Jul 2021 16:41:38 +0300 Subject: [PATCH] Add ability to scroll on table of contents (dataset templates admin) --- .../dataset-profile-editor.component.html | 2 +- .../table-of-contents/table-of-contents.html | 15 ++++-- .../table-of-contents/table-of-contents.scss | 32 +++++++++++- .../table-of-contents/table-of-contents.ts | 51 +++++++++++++++++-- 4 files changed, 92 insertions(+), 8 deletions(-) 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}}

- +
+
+ keyboard_arrow_up +
+
+
+
+ keyboard_arrow_down +
+
\ 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){