Add ability to scroll on table of contents (dataset templates admin)

This commit is contained in:
Kristian Ntavidi 2021-07-21 16:41:38 +03:00
parent 008b6321ea
commit 1d397d28cf
4 changed files with 92 additions and 8 deletions

View File

@ -247,7 +247,7 @@
<div class="col-3">
<div class="row sticky-top" style="top : 7em;">
<div class="row sticky-top table-container" style="top : 7em;">
<dataset-profile-table-of-contents class="toc-pane-container col"
style="margin-bottom: 2em;"
[links]="toCEntries"

View File

@ -1,5 +1,5 @@
<div>
<h3 id="guide-steps">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TEMPLATE-OUTLINE' | translate}}</h3>
<div class="table-container">
<h3 id="guide-steps" [class.opacity-0]="isDragging">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TEMPLATE-OUTLINE' | translate}}</h3>
<div class="scroll-container" id="tocentrytable">
<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"
@ -18,6 +18,15 @@
[colorizeInvalid]="colorizeInvalid"
>
</app-dataset-profile-table-of-contents-internal-section>
<div class="top-scroller table-scroller" [hidden]="!isDragging">
<div class="col-auto">
<mat-icon>keyboard_arrow_up</mat-icon>
</div>
</div>
<div class="bottom-scroller table-scroller" [hidden]="!isDragging">
<div class="col-auto">
<mat-icon>keyboard_arrow_down</mat-icon>
</div>
</div>
</div>
</div>

View File

@ -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
@ -60,3 +62,31 @@
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;
}

View File

@ -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){