From 18a10f9b6d919f5d033169e94a57518a952381c1 Mon Sep 17 00:00:00 2001
From: Jan Kuri <jkuri88@gmail.com>
Date: Tue, 8 Aug 2017 10:57:13 +0200
Subject: [PATCH] feat(terminal): scroller

---
 package-lock.json                             |  8 ++++-
 package.json                                  |  1 +
 src/app/app.module.ts                         |  4 ++-
 .../app-terminal/app-terminal.component.html  |  2 +-
 .../app-terminal/app-terminal.component.ts    | 33 +++++++++++++++++--
 src/app/styles/terminal.sass                  |  4 +--
 6 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3cfd97980..d1935e22c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "abstruse",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5607,6 +5607,12 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "ngx-slimscroll": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ngx-slimscroll/-/ngx-slimscroll-3.3.1.tgz",
+      "integrity": "sha512-/cbkt86jUKbt1H2cw0IFMrlLPKM+vvycCvsN5NO/1KWTrDPV4vfu5g5rlzVdjovgcb5APxUxNHwk/AmK957WFA==",
+      "dev": true
+    },
     "no-case": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",
diff --git a/package.json b/package.json
index c8856cb4a..83d2d55df 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "html-webpack-plugin": "^2.30.1",
     "jasmine": "^2.7.0",
     "jasmine-spec-reporter": "^4.1.1",
+    "ngx-slimscroll": "^3.3.1",
     "node-sass": "^4.5.3",
     "portfinder": "^1.0.13",
     "protractor": "^5.1.2",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 23c204ed7..b4d5e14a9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
+import { NgSlimScrollModule } from 'ngx-slimscroll';
 import { ConfigServiceProvider } from './services/config.service';
 import { ApiServiceProvider } from './services/api.service';
 import { SocketServiceProvider } from './services/socket.service';
@@ -87,7 +88,8 @@ import { AppTeamComponent } from './components/app-team';
       { path: 'setup', component: AppSetupComponent }
     ]),
     HttpModule,
-    FormsModule
+    FormsModule,
+    NgSlimScrollModule
   ],
   providers: [
     ConfigServiceProvider,
diff --git a/src/app/components/app-terminal/app-terminal.component.html b/src/app/components/app-terminal/app-terminal.component.html
index 54627c664..a250c31c3 100644
--- a/src/app/components/app-terminal/app-terminal.component.html
+++ b/src/app/components/app-terminal/app-terminal.component.html
@@ -1 +1 @@
-<pre class="window-terminal-container dracula-ansi-theme" [ngClass]="{ large: options.size === 'large' }"></pre>
+<pre class="window-terminal-container dracula-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents"></pre>
diff --git a/src/app/components/app-terminal/app-terminal.component.ts b/src/app/components/app-terminal/app-terminal.component.ts
index f65881a14..b3bf40f36 100644
--- a/src/app/components/app-terminal/app-terminal.component.ts
+++ b/src/app/components/app-terminal/app-terminal.component.ts
@@ -1,4 +1,5 @@
-import { Component, ElementRef, OnInit, Input, SimpleChange } from '@angular/core';
+import { Component, ElementRef, OnInit, Input, SimpleChange, EventEmitter } from '@angular/core';
+import { ISlimScrollOptions, SlimScrollEvent } from 'ngx-slimscroll';
 import * as AnsiUp from 'ansi_up';
 
 @Component({
@@ -9,8 +10,27 @@ export class AppTerminalComponent implements OnInit {
   @Input() data: any;
   @Input() options: { size: 'normal' | 'large' };
   au: any;
+  scrollOptions: ISlimScrollOptions;
+  scrollEvents: EventEmitter<SlimScrollEvent>;
 
-  constructor(private elementRef: ElementRef) { }
+  constructor(private elementRef: ElementRef) {
+    this.scrollOptions = {
+      position: 'right',
+      barBackground: '#11121A',
+      barOpacity: '0.8',
+      barWidth: '10',
+      barBorderRadius: '10',
+      barMargin: '2px 2px 2px 0',
+      gridBackground: '#282a36',
+      gridOpacity: '1',
+      gridWidth: '10',
+      gridBorderRadius: '0',
+      gridMargin: '2px 2px 2px 0',
+      alwaysVisible: true
+    };
+
+    this.scrollEvents = new EventEmitter<SlimScrollEvent>();
+  }
 
   ngOnInit() {
     this.au = new AnsiUp.default();
@@ -27,7 +47,14 @@ export class AppTerminalComponent implements OnInit {
       el.innerHTML = '';
     } else {
       el.innerHTML += this.au.ansi_to_html(this.data);
-      setTimeout(() => el.scrollTop = el.scrollHeight);
+
+      const recalculateEvent = new SlimScrollEvent({ type: 'recalculate' });
+      const bottomEvent = new SlimScrollEvent({ type: 'scrollToBottom', duration: 300 });
+
+      setTimeout(() => {
+        this.scrollEvents.emit(recalculateEvent);
+        this.scrollEvents.emit(bottomEvent);
+      });
     }
   }
 }
diff --git a/src/app/styles/terminal.sass b/src/app/styles/terminal.sass
index 668ec65a6..aa210205a 100644
--- a/src/app/styles/terminal.sass
+++ b/src/app/styles/terminal.sass
@@ -4,10 +4,10 @@
   position: relative
   display: block
   color: #f8f8f2
-  margin: 20px 0
+  margin: 0
   font-family: monaco, monospace
   font-size: 12px
-  padding: 10px
+  padding: 0
   height: 400px
   background: darken(#282a36, 10)
   border-radius: 4px