Permalink
Browse files

fix(terminal): fix terminal spinner

  • Loading branch information...
jkuri committed Oct 1, 2017
1 parent 6e2445b commit 46b11bddffd1cccc1514a7e1bd61231ab0002d85
@@ -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();
@@ -0,0 +1,16 @@
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#ffffff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#ffffff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="1.5s"
repeatCount="indefinite"/>
</path>
</svg>
@@ -1,31 +1,31 @@
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#fff" stop-opacity="0" offset="0%"/>
<stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#fff" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1.5s"
repeatCount="indefinite" />
</path>
<circle fill="#fff" cx="36" cy="18" r="1">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1.5s"
repeatCount="indefinite" />
</circle>
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#fff" stop-opacity="0" offset="0%"/>
<stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#fff" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite" />
</path>
<circle fill="#fff" cx="36" cy="18" r="1">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite" />
</circle>
</g>
</g>
</g>
</svg>
@@ -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);
}
@@ -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>
@@ -138,7 +138,7 @@ export class AppTerminalComponent implements OnInit {
duration: 50
};
this.scrollEvents.emit(ev);
});
}, 50);
}

toggleCommand(index: number) {
@@ -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

0 comments on commit 46b11bd

Please sign in to comment.