diff --git a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html index 5267ba6db..0ca366bbc 100644 --- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html @@ -1,3 +1,15 @@ - + + diff --git a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss index a90c7d912..259750da0 100644 --- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss @@ -3,13 +3,24 @@ .scroll-button { background-color: $white; position: absolute; - bottom: 30px; right: 0; height: 40px; width: 44px; border: none; border-radius: 8px 0 0 8px; box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25); + + &.bottom { + bottom: 30px; + } + + &.top { + top: 100px; + + mat-icon { + transform: rotate(180deg); + } + } } mat-icon { diff --git a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts index a085e6a63..a5ddb6665 100644 --- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts @@ -1,37 +1,46 @@ import { Component, HostListener, Input } from '@angular/core'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; +enum ButtonType { + TOP = 'top', + BOTTOM = 'bottom' +} + @Component({ selector: 'redaction-scroll-button', templateUrl: './scroll-button.component.html', styleUrls: ['./scroll-button.component.scss'] }) export class ScrollButtonComponent { + ButtonType = ButtonType; + @Input() scrollViewport: CdkVirtualScrollViewport; @Input() itemSize: number; - scroll(): void { + scroll(type: ButtonType): void { + const viewportSize = + (this.scrollViewport?.getViewportSize() - this.itemSize) * + (type === ButtonType.TOP ? -1 : 1); const scrollOffset = this.scrollViewport?.measureScrollOffset('top'); - const ligaturePortion = 50; - const viewportSize = this.scrollViewport?.getViewportSize() - ligaturePortion; - this.scrollViewport?.scrollToOffset(scrollOffset + viewportSize, 'smooth'); } - showScrollButton(): boolean { - const reachedBottom = this.scrollViewport?.measureScrollOffset('bottom') === 0; + showScroll(type: ButtonType): boolean { + const reachedEnd = this.scrollViewport?.measureScrollOffset(type) === 0; const scrollSize = this.scrollViewport?.getDataLength() * this.itemSize; const scrollIsNeeded = this.scrollViewport?.getViewportSize() < scrollSize; - return scrollIsNeeded && !reachedBottom; + return scrollIsNeeded && !reachedEnd; } @HostListener('document:keyup', ['$event']) spaceAndPageDownScroll(event: KeyboardEvent): void { if (['Space', 'PageDown'].includes(event.code)) { - this.scroll(); + this.scroll(ButtonType.BOTTOM); + } else if (['PageUp'].includes(event.code)) { + this.scroll(ButtonType.TOP); } } }