Add ability to scroll on table of contents (dataset templates admin)
This commit is contained in:
parent
008b6321ea
commit
1d397d28cf
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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){
|
||||
|
|
|
|||
Loading…
Reference in New Issue