From 1427353c64faa1ec39982de693f1529c2f023b3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 6 Jul 2021 14:34:57 +0300
Subject: [PATCH 1/2] Floating scroll up button

---
 .../scroll-button/scroll-button.component.html  | 10 +++++++++-
 .../scroll-button/scroll-button.component.scss  | 13 ++++++++++++-
 .../scroll-button/scroll-button.component.ts    | 17 +++++++++--------
 3 files changed, 30 insertions(+), 10 deletions(-)

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..f065b3cba 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,11 @@
-<button (click)="scroll()" [hidden]="!showScrollButton()" class="scroll-button pointer">
+<button (click)="scroll('top')" [hidden]="!showScroll('top')" class="scroll-button top pointer">
+    <mat-icon svgIcon="red:arrow-down-o"></mat-icon>
+</button>
+
+<button
+    (click)="scroll('bottom')"
+    [hidden]="!showScroll('bottom')"
+    class="scroll-button bottom pointer"
+>
     <mat-icon svgIcon="red:arrow-down-o"></mat-icon>
 </button>
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..23d3d4d1b 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
@@ -12,26 +12,27 @@ export class ScrollButtonComponent {
     @Input()
     itemSize: number;
 
-    scroll(): void {
+    scroll(type: 'top' | 'bottom'): void {
+        const viewportSize =
+            (this.scrollViewport?.getViewportSize() - this.itemSize) * (type === '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: 'top' | 'bottom'): 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('bottom');
+        } else if (['PageUp'].includes(event.code)) {
+            this.scroll('top');
         }
     }
 }

From 9333bfc5934c0b0120eca9b0db68fd858d288726 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 6 Jul 2021 14:55:17 +0300
Subject: [PATCH 2/2] Button type enum

---
 .../scroll-button/scroll-button.component.html | 10 +++++++---
 .../scroll-button/scroll-button.component.ts   | 18 +++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

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 f065b3cba..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,10 +1,14 @@
-<button (click)="scroll('top')" [hidden]="!showScroll('top')" class="scroll-button top 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('bottom')"
-    [hidden]="!showScroll('bottom')"
+    (click)="scroll(ButtonType.BOTTOM)"
+    [hidden]="!showScroll(ButtonType.BOTTOM)"
     class="scroll-button bottom pointer"
 >
     <mat-icon svgIcon="red:arrow-down-o"></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 23d3d4d1b..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,25 +1,33 @@
 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(type: 'top' | 'bottom'): void {
+    scroll(type: ButtonType): void {
         const viewportSize =
-            (this.scrollViewport?.getViewportSize() - this.itemSize) * (type === 'top' ? -1 : 1);
+            (this.scrollViewport?.getViewportSize() - this.itemSize) *
+            (type === ButtonType.TOP ? -1 : 1);
         const scrollOffset = this.scrollViewport?.measureScrollOffset('top');
         this.scrollViewport?.scrollToOffset(scrollOffset + viewportSize, 'smooth');
     }
 
-    showScroll(type: 'top' | 'bottom'): boolean {
+    showScroll(type: ButtonType): boolean {
         const reachedEnd = this.scrollViewport?.measureScrollOffset(type) === 0;
         const scrollSize = this.scrollViewport?.getDataLength() * this.itemSize;
         const scrollIsNeeded = this.scrollViewport?.getViewportSize() < scrollSize;
@@ -30,9 +38,9 @@ export class ScrollButtonComponent {
     @HostListener('document:keyup', ['$event'])
     spaceAndPageDownScroll(event: KeyboardEvent): void {
         if (['Space', 'PageDown'].includes(event.code)) {
-            this.scroll('bottom');
+            this.scroll(ButtonType.BOTTOM);
         } else if (['PageUp'].includes(event.code)) {
-            this.scroll('top');
+            this.scroll(ButtonType.TOP);
         }
     }
 }