feat(terminal): scroller

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",

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,

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>

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

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