fix(terminal): fix terminal output

Author: jkuri

src/app/components/app-terminal/app-terminal.component.html

@@ -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>

src/app/components/app-terminal/app-terminal.component.ts

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

src/app/styles/terminal.sass

@@ -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