From e224c94c7c27b86f8b741d1e6acd87c1f993ce48 Mon Sep 17 00:00:00 2001
From: Vincenzo Filetti <vzfiletti@gmail.com>
Date: Wed, 18 Dec 2019 17:56:52 +0100
Subject: [PATCH 1/2] fix(scroll): divs scroll top after content changes

The scroll bar now goes top after the content changes on each scroll-box div. The previous behaviour was to leave the scroll bar at the previous scroll point
---
 .../command-documentation.component.html                 | 2 +-
 .../command-documentation.component.ts                   | 9 +++++++--
 .../command/command-list/command-list.component.html     | 2 +-
 .../command/command-list/command-list.component.ts       | 4 +++-
 .../pattern-content/pattern-content.component.html       | 2 +-
 .../pattern/pattern-content/pattern-content.component.ts | 9 +++++++--
 6 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/app/features/command/command-documentation/command-documentation.component.html b/src/app/features/command/command-documentation/command-documentation.component.html
index f113781..f1af925 100644
--- a/src/app/features/command/command-documentation/command-documentation.component.html
+++ b/src/app/features/command/command-documentation/command-documentation.component.html
@@ -1,6 +1,6 @@
 <h3 class="h4 mt-2">Documentation</h3>
 <div class="flex-fill scroll-box-container">
-  <div class="scroll-box">
+  <div class="scroll-box" #scrollBox>
     <div *ngIf="documentation; else noDoc" [innerHTML]="documentation | markdown"></div>
   </div>
 </div>
diff --git a/src/app/features/command/command-documentation/command-documentation.component.ts b/src/app/features/command/command-documentation/command-documentation.component.ts
index 469072d..8a4594e 100644
--- a/src/app/features/command/command-documentation/command-documentation.component.ts
+++ b/src/app/features/command/command-documentation/command-documentation.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'tr-command-documentation',
@@ -7,5 +7,10 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 })
 
 export class CommandDocumentationComponent {
-  @Input() documentation = '';
+  public documentation = '';
+  @ViewChild('scrollBox', {static: true}) scrollBox: ElementRef;
+  @Input('documentation') set resetScroll(document: string){
+    this.documentation = document;
+    this.scrollBox.nativeElement.scrollTop = 0
+  }
 }
diff --git a/src/app/features/command/command-list/command-list.component.html b/src/app/features/command/command-list/command-list.component.html
index d2f7cb0..680c075 100644
--- a/src/app/features/command/command-list/command-list.component.html
+++ b/src/app/features/command/command-list/command-list.component.html
@@ -18,7 +18,7 @@ <h3 class="h4">Commands</h3>
       <input type="text" class="form-control form-control-sm" placeholder="Search command" #search (input)="true">
     </div>
     <div class="flex-fill scroll-box-container command-list-container">
-      <div class="scroll-box">
+      <div class="scroll-box" #scrollBox>
         <ul>
           <li
             *ngFor="let command of filteredCommands | searchFilter: 'key': search.value | searchFilter: 'group': activeCategory"
diff --git a/src/app/features/command/command-list/command-list.component.ts b/src/app/features/command/command-list/command-list.component.ts
index e948459..2f67e18 100644
--- a/src/app/features/command/command-list/command-list.component.ts
+++ b/src/app/features/command/command-list/command-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
 
 import { Command } from '@app/shared/models/command.interface';
 
@@ -15,6 +15,7 @@ export class CommandListComponent {
   activeCommand: Command;
   activeCategory = '';
 
+  @ViewChild('scrollBox', {static: true}) scrollBox: ElementRef;
   @Input('commands') set setCommands(data: Array<Command>) {
     this.filteredCommands = data;
     const array = this.filteredCommands.map(item => item.group);
@@ -55,6 +56,7 @@ export class CommandListComponent {
    * @param category category name
    */
   setActiveCategory(category: string) {
+    this.scrollBox.nativeElement.scrollTop = 0;
     this.activeCategory = category;
   }
 }
diff --git a/src/app/features/pattern/pattern-content/pattern-content.component.html b/src/app/features/pattern/pattern-content/pattern-content.component.html
index 1b919d0..c577c72 100644
--- a/src/app/features/pattern/pattern-content/pattern-content.component.html
+++ b/src/app/features/pattern/pattern-content/pattern-content.component.html
@@ -15,7 +15,7 @@ <h3 class="h4 position-relative">{{activePattern.title}}</h3>
       </button>
     </div>
 
-    <div class="scroll-box">
+    <div class="scroll-box" #scrollBox>
       <p [innerHTML]="steps[currentStep]  | markdown" *ngIf='steps && steps[currentStep]'></p>
     </div>
 </div>
diff --git a/src/app/features/pattern/pattern-content/pattern-content.component.ts b/src/app/features/pattern/pattern-content/pattern-content.component.ts
index 1768679..0cc46ad 100644
--- a/src/app/features/pattern/pattern-content/pattern-content.component.ts
+++ b/src/app/features/pattern/pattern-content/pattern-content.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, Output, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
 
 import { Pattern } from '@app/shared/models/pattern.interface';
 
@@ -15,7 +15,10 @@ enum Paginator {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PatternContentComponent {
+  @ViewChild('scrollBox', {static: false}) scrollBox: ElementRef;
   @Input('patternContent') set newStep(data: Array<string>) {
+    if(this.scrollBox)
+      this.scrollBox.nativeElement.scrollTop = 0;
     this.steps = data;
     this.currentStep = 0;
   }
@@ -40,7 +43,7 @@ export class PatternContentComponent {
       if (targetElement.target.hash === '#run') {
         this.run.emit(command);
       } else {
-        this.help.emit(command);
+        this.help.emit(command);  
       }
     }
 
@@ -49,6 +52,8 @@ export class PatternContentComponent {
    * @param type boolean (TRUE: previous step, FALSE: next step)
    */
   changeStep(type: Paginator) {
+    if(this.scrollBox)
+      this.scrollBox.nativeElement.scrollTop = 0;
     switch (type) {
       case Paginator.FIRST_PAGE:
         this.currentStep = 0;

From 85c65c422cc9098641ce78d339d71dacff8c849d Mon Sep 17 00:00:00 2001
From: Andrea Ortis <andrea.ortis@gmail.com>
Date: Thu, 26 Mar 2020 18:37:58 +0100
Subject: [PATCH 2/2] fix: code identation

---
 .../command-documentation.component.ts            |  4 ++--
 .../pattern-content/pattern-content.component.ts  | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/features/command/command-documentation/command-documentation.component.ts b/src/app/features/command/command-documentation/command-documentation.component.ts
index 8a4594e..8fd0214 100644
--- a/src/app/features/command/command-documentation/command-documentation.component.ts
+++ b/src/app/features/command/command-documentation/command-documentation.component.ts
@@ -9,8 +9,8 @@ import { Component, Input, ChangeDetectionStrategy, ViewChild, ElementRef } from
 export class CommandDocumentationComponent {
   public documentation = '';
   @ViewChild('scrollBox', {static: true}) scrollBox: ElementRef;
-  @Input('documentation') set resetScroll(document: string){
+  @Input('documentation') set resetScroll(document: string) {
     this.documentation = document;
-    this.scrollBox.nativeElement.scrollTop = 0
+    this.scrollBox.nativeElement.scrollTop = 0;
   }
 }
diff --git a/src/app/features/pattern/pattern-content/pattern-content.component.ts b/src/app/features/pattern/pattern-content/pattern-content.component.ts
index 0cc46ad..c4cb728 100644
--- a/src/app/features/pattern/pattern-content/pattern-content.component.ts
+++ b/src/app/features/pattern/pattern-content/pattern-content.component.ts
@@ -17,8 +17,7 @@ enum Paginator {
 export class PatternContentComponent {
   @ViewChild('scrollBox', {static: false}) scrollBox: ElementRef;
   @Input('patternContent') set newStep(data: Array<string>) {
-    if(this.scrollBox)
-      this.scrollBox.nativeElement.scrollTop = 0;
+    this.resetScroll();
     this.steps = data;
     this.currentStep = 0;
   }
@@ -43,7 +42,7 @@ export class PatternContentComponent {
       if (targetElement.target.hash === '#run') {
         this.run.emit(command);
       } else {
-        this.help.emit(command);  
+        this.help.emit(command);
       }
     }
 
@@ -52,8 +51,8 @@ export class PatternContentComponent {
    * @param type boolean (TRUE: previous step, FALSE: next step)
    */
   changeStep(type: Paginator) {
-    if(this.scrollBox)
-      this.scrollBox.nativeElement.scrollTop = 0;
+    this.resetScroll();
+
     switch (type) {
       case Paginator.FIRST_PAGE:
         this.currentStep = 0;
@@ -68,4 +67,10 @@ export class PatternContentComponent {
         this.currentStep = this.steps.length - 1;
     }
   }
+
+  private resetScroll() {
+    if (this.scrollBox) {
+      this.scrollBox.nativeElement.scrollTop = 0;
+    }
+  }
 }