Permalink
Browse files

feat(terminal): scroller

  • Loading branch information...
jkuri committed Aug 8, 2017
1 parent 576066b commit 18a10f9b6d919f5d033169e94a57518a952381c1

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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",
@@ -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,
@@ -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>
@@ -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);
});
}
}
}
@@ -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

0 comments on commit 18a10f9

Please sign in to comment.