Merge branch '314-comment-list-auto-scrolling-is-really-disturbing' into 'master'

Add button for scrolling to the top

Closes #314

See merge request !279

src/app/components/shared/comment-list/comment-list.component.html

@@ -72,6 +72,10 @@
   </mat-menu>
 </div>
 
+<button mat-icon-button class="scrollTop" [ngClass]="{'visible': scrollExtended}" (click)="scrollToTop()">
+  <mat-icon>arrow_upward</mat-icon>
+</button>
+
 <div fxLayout="row" fxLayoutAlign="center" *ngIf="comments.length < 3">
   <button mat-fab class="fab-extended" (click)="openCreateDialog()">
     <mat-icon class="add">add</mat-icon>

src/app/components/shared/comment-list/comment-list.component.scss

@@ -33,7 +33,6 @@ input {
   margin-bottom: 2%;
   position: fixed;
   top: 10px;
-  right: center;
   width: 92%;
   max-width: 800px;
   z-index: 1;
@@ -146,3 +145,18 @@ h4  {
   margin-left: 4%;
   color: var(--on-primary);
 }
+
+.scrollTop {
+  position: fixed;
+  bottom: 3%;
+  left: -40px;
+  z-index: 1;
+  background-color: var(--background);
+  transition: 0.5s;
+}
+
+.visible {
+  left: 5%;
+  transition: 0.5s;
+  background-color: var(--secondary);
+}

src/app/components/shared/comment-list/comment-list.component.ts

@@ -41,6 +41,7 @@ export class CommentListComponent implements OnInit {
   currentFilter = '';
   commentVoteMap = new Map<string, Vote>();
   scroll = false;
+  scrollExtended = false;
 
   constructor(private commentService: CommentService,
               private translateService: TranslateService,
@@ -82,11 +83,9 @@ export class CommentListComponent implements OnInit {
   }
 
   checkScroll(): void {
-    if (document.documentElement.scrollTop >= 65) {
-      this.scroll = true;
-    } else {
-      this.scroll = false;
-    }
+    const currentScroll = document.documentElement.scrollTop;
+      this.scroll = currentScroll >= 65;
+      this.scrollExtended = currentScroll >= 300;
   }
 
   scrollToTop(): void {
@@ -215,7 +214,6 @@ export class CommentListComponent implements OnInit {
           return !c.read;
       }
     });
-    this.scrollToTop();
   }
 
   sortComments(type: string): void {
@@ -231,6 +229,5 @@ export class CommentListComponent implements OnInit {
       }
     });
     this.currentSort = type;
-    this.scrollToTop();
   }
 }