Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Pull request #232: Floating scroll up button

Browse Source 
Merge in RED/ui from RED-1730 to master

* commit '9333bfc5934c0b0120eca9b0db68fd858d288726':
  Button type enum
  Floating scroll up button
This commit is contained in:
Adina Teudan 2021-07-06 14:13:50 +02:00
commit 0053c3f84f
3 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html
View File

@ -1,3 +1,15 @@
<button (click)="scroll()" [hidden]="!showScrollButton()" class="scroll-button pointer">
<button
(click)="scroll(ButtonType.TOP)"
[hidden]="!showScroll(ButtonType.TOP)"
class="scroll-button top pointer"
>
<mat-icon svgIcon="red:arrow-down-o"></mat-icon>
</button>
<button
(click)="scroll(ButtonType.BOTTOM)"
[hidden]="!showScroll(ButtonType.BOTTOM)"
class="scroll-button bottom pointer"
>
<mat-icon svgIcon="red:arrow-down-o"></mat-icon>
</button>

13
apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.scss
View File

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

25
apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts
View File

@ -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);
}
}
}