fix(terminal): fix terminal spinner

src/api/socket.ts

@@ -83,6 +83,7 @@ export class SocketServer {
                 userId = Number(event.data);
               }
               break;
+
               case 'buildImage': {
                 const imageData = event.data;
                 buildDockerImage(imageData);
@@ -96,30 +97,27 @@ export class SocketServer {
               }
               break;
 
-              case 'startBuild':
-                startBuild({ repositories_id: event.data.repositoryId })
-                  .then(buildId => {
-                    console.log('New Build: ', buildId);
-                  });
-              break;
               case 'stopBuild':
                 stopBuild(event.data.buildId)
                   .then(() => {
                     conn.next({ type: 'build stopped', data: event.data.buildId });
                   });
               break;
+
               case 'restartBuild':
                 restartBuild(event.data.buildId)
                   .then(() => {
                     conn.next({ type: 'build restarted', data: event.data.buildId });
                   });
               break;
+
               case 'restartJob':
                 restartJob(parseInt(event.data.jobId, 10))
                   .then(() => {
                     conn.next({ type: 'job restarted', data: event.data.jobId });
                   });
               break;
+
               case 'stopJob':
                 stopJob(event.data.jobId)
                   .then(() => {
@@ -162,6 +160,7 @@ export class SocketServer {
                   memory(), cpu(), docker.getContainersStats()
                 ]).subscribe(event => conn.next(event));
               break;
+
               case 'unsubscribeFromStats':
                 if (this.clients[clientIndex].sub) {
                   this.clients[clientIndex].sub.unsubscribe();

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

@@ -68,7 +68,7 @@ export class AppJobComponent implements OnInit, OnDestroy {
 
     this.termSub = this.socketService.outputEvents
       .subscribe(event => {
-        if (event.type === 'data') {
+        if (event.type === 'data' || event.type === 'exit') {
           if (typeof event.data === 'string') {
             this.ngZone.run(() => this.terminalInput = event.data);
           }

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

@@ -3,8 +3,8 @@
     <div class="command-line" (click)="toggleCommand(i)" [class.is-opened]="cmd.visible">
       <span class="command" [innerHTML]="cmd.command"></span>
       <span class="time" *ngIf="cmd.time">{{ cmd.time }}</span>
-      <span class="time" *ngIf="!cmd.time">
-        <img src="images/icons/oval-loader.svg" class="command-loader">
+      <span class="command-loader" *ngIf="!cmd.time">
+        <img src="images/icons/spinner.svg">
       </span>
     </div>
     <pre class="output" [class.is-hidden]="!cmd.visible" [innerHTML]="cmd.output"></pre>

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

@@ -138,7 +138,7 @@ export class AppTerminalComponent implements OnInit {
         duration: 50
       };
       this.scrollEvents.emit(ev);
-    });
+    }, 50);
   }
 
   toggleCommand(index: number) {

src/app/styles/terminal.sass

@@ -5,16 +5,15 @@
 .window-terminal-container
   position: relative
   display: block
-  color: #f8f8f2
+  color: #ffffff
   margin: 0
   font-family: $font-family-roboto-mono
-  padding: 10px 0
+  padding: 0
   height: 100%
   background: #000000
   border-radius: 4px
-  box-shadow: 1px 2px 10px rgba($background, 0.7)
-  border: 1px solid $divider
   height: 600px
+  -webkit-font-smoothing: auto
 
   +mobile
     height: 400px
@@ -35,50 +34,42 @@
     .command-line
       display: flex
       align-items: center
-      margin: 1px 5px
+      margin: 0 5px
       cursor: pointer
-      height: 20px
+      height: 28px
       position: relative
       padding-left: 15px
-      background: lighten(#000000, 5)
-
-      .icon
-        margin-right: 3px
-
-        img
-          margin-top: 1px
-          width: 8px
-          height: 8px
+      background: lighten(#000000, 7)
+      font-family: $font-family-roboto-mono
 
       .command
         font-size: 12px
         color: $white
-        font-weight: $weight-bold !important
-
-        span
-          font-size: 12px
-          color: $white
 
       .time
         position: absolute
         display: block
         font-size: 12px
+        right: 10px
         color: $white
+
+      .command-loader
+        position: absolute
         right: 10px
-        outline: none
-        border: none
+        top: 4px
+        display: block
+        overflow: hidden
+        width: 16px
+        height: 16px
 
-        .command-loader
-          margin-top: 2px
+        svg
           width: 16px
           height: 16px
-          outline: none
-          border: none
 
     .output
       display: inline-block
       width: 100%
-      color: #f8f8f2
+      color: #ffffff
       margin: 0 !important
       font-family: $font-family-roboto-mono
       font-size: 12px