Permalink
Browse files

fix(terminal): fix terminal output

  • Loading branch information...
jkuri committed Aug 8, 2017
1 parent 450c672 commit 102ad37e9af952a292501cd1ee46664c994403f9
@@ -1,10 +1,12 @@
<div class="window-terminal-container dracula-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents">
<div class="window-terminal-container batman-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents">
<div class="terminal" *ngFor="let cmd of commands; let i = index;" [id]="i">
<span class="icon">
<img *ngIf="cmd.visible" src="images/icons/collapse.svg" (click)="toogleCommand(i)">
<img *ngIf="!cmd.visible" src="images/icons/expand.svg" (click)="toogleCommand(i)">
</span>
<span class="command" [innerHTML]="cmd.command"></span>
<div class="command-line" (click)="toogleCommand(i)">
<span class="icon">
<img *ngIf="cmd.visible" src="images/icons/collapse.svg">
<img *ngIf="!cmd.visible" src="images/icons/expand.svg">
</span>
<span class="command" [innerHTML]="cmd.command"></span>
</div>
<pre class="output" [class.is-hidden]="!cmd.visible" [innerHTML]="cmd.output"></pre>
</div>
</div>
@@ -19,16 +19,16 @@ export class AppTerminalComponent implements OnInit {
this.scrollOptions = {
position: 'right',
barBackground: '#11121A',
barOpacity: '0.8',
barOpacity: '0.2',
barWidth: '10',
barBorderRadius: '10',
barBorderRadius: '0',
barMargin: '2px 2px 2px 0',
gridBackground: '#282a36',
gridOpacity: '1',
gridWidth: '10',
gridBorderRadius: '0',
gridMargin: '2px 2px 2px 0',
alwaysVisible: true
alwaysVisible: false
};

this.scrollEvents = new EventEmitter<SlimScrollEvent>();
@@ -62,8 +62,16 @@ export class AppTerminalComponent implements OnInit {
}

this.commands = commands.reduce((acc, curr, i) => {
const next = commands[i + 1] || '';
const re = new RegExp('(' + curr + ')(' + '[\\s\\S]*' + ')(' + next + ')');
let next = commands[i + 1] || '';
next = next.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
const c = curr.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
let re = new RegExp('(' + c + ')(' + '[\\s\\S]+' + ')(' + next + ')');
if (!output.match(re)) {
re = new RegExp('(' + c + ')' + '[\\s\\S]+');
}

console.log(re);

return acc.concat({
command: curr,
visible: i === commands.length - 1 ? true : false,
@@ -72,12 +80,13 @@ export class AppTerminalComponent implements OnInit {
}, this.commands);
} else {
this.commands[this.commands.length - 1].output += output;
this.commands = this.commands.map((cmd, i) => {
cmd.visible = i === this.commands.length - 1 ? true : false;
return cmd;
});
}

this.commands = this.commands.map((cmd, i) => {
cmd.visible = i === this.commands.length - 1 ? true : false;
return cmd;
});

const recalculateEvent = new SlimScrollEvent({ type: 'recalculate' });
const bottomEvent = new SlimScrollEvent({ type: 'scrollToBottom', duration: 300 });

@@ -4,13 +4,12 @@
.window-terminal-container
position: relative
display: block
color: #e5e5e5
color: #F0F0F0
margin: 0
font-family: monaco, monospace
font-size: 12px
padding: 10px 0
height: 400px
background: #111111
background: #1D2021
border-radius: 4px
box-shadow: 1px 2px 10px rgba($background, 0.7)
border: 1px solid $divider
@@ -19,38 +18,44 @@
&.large
height: 700px

.terminal
display: inline-block
text-align: left
padding: 0
margin: 0
width: 100%

.icon
.terminal
display: block
float: left
text-align: left
padding: 0
margin: 0

img
width: 24px
height: 24px

.output
display: inline-block
width: 100%
color: #e5e5e5
margin: 0 !important
font-family: monaco, monospace
font-size: 12px
padding: 0 20px !important
background: #111111

.command
display: block
float: left

.ansi-yellow-fg
color: #FFEE58 !important
font-weight: bold !important
font-size: 13px
.command-line
display: flex
align-items: center
background: #282a36
margin: 2px 5px
padding: 1px 5px
border-radius: 10px
cursor: pointer

.icon
margin-top: 8px

img
width: 24px
height: 24px

.command

span
font-size: 12px
color: #FFEE58
font-weight: bold

.output
display: inline-block
width: 100%
color: #F0F0F0
margin: 0 !important
font-family: Monaco, monospace
font-size: 12px
padding: 10px 20px !important
background: #1D2021
white-space: pre-wrap
word-wrap: break-word

0 comments on commit 102ad37

Please sign in to comment.