mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-11-04 12:22:54 +00:00
Code Issues Releases Wiki Activity

Change terminal colors

Browse Source
This commit is contained in:
Gabor PEK
2018-03-14 14:34:17 +01:00
parent ba2e2ace6d
commit a7dbd15370
7 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/dashboard/dashboard.component.html
View File

@@ -13,4 +13,5 @@
<div class="tfw-terminal">
<app-terminal></app-terminal>
</div>
<div class="tfw-terminal-footer"></div>
</div>

7
src/app/dashboard/dashboard.component.scss
View File

@@ -30,6 +30,7 @@
.tfw-messages {
padding: $space;
padding-top: $hair;
background-color: $tao-gray-50;
overflow-y: scroll;
@@ -61,12 +62,16 @@
}
.tfw-terminal {
border: 1px solid $tao-gray-500;
border: 2px solid $tao-plum-100;
border-left: 0;
border-right: 0;
border-bottom: 0;
background-color: black;
}
.tfw-terminal-footer {
background-color: $tao-phtalo-900;
}
}
.deploy-blur {

27
src/app/services/terminado.service.ts
View File

@@ -11,7 +11,32 @@ export class TerminadoService {
constructor() {
Terminal.applyAddon(fit);
Terminal.applyAddon(terminado);
this.xterm = new Terminal();
this.xterm = new Terminal({
theme: {
foreground: '#ffffff',
background: '#002426', // $tao-phtalo-900
cursor: '#ffffff',
selection: 'rgba(255, 255, 255, 0.3)',
black: '#000000',
red: '#FF5252', // $tao-red-500
brightRed: '#FF7171', // $tao-red-400
green: '#2fd19f', // $tao-bright-green-500
brightGreen: '#2fd19f', // $tao-bright-green-500
brightYellow: '#FFD283', // $tao-warm-yellow-300
yellow: '#FFB83B', // $tao-warm-yellow-500
magenta: '#FF8FC6', // $tao-pink-200
brightMagenta: '#FF8FC6', // $tao-pink-200
cyan: '#277EEC', // $tao-blue-500
blue: '#277EEC', // $tao-blue-500
brightCyan: '#42B7DF', // $tao-sky-400
brightBlue: '#19A7D8', // $tao-sky-500
white: '#FAFAFA', // $tao-gray-50
brightBlack: '#808080',
brightWhite: '#ffffff'
},
fontSize: 14
});
const wsproto = (location.protocol === 'https:') ? 'wss://' : 'ws://';
this.ws = new WebSocket(wsproto + window.location.host + '/terminal');
}

2
src/app/terminal/terminal.component.html
View File

@@ -1 +1 @@
<div #xterm class="tfw-xterm"></div>
<div #xterm class="tfw-xterm" (window:resize)="fit()"></div>

6
src/app/terminal/terminal.component.scss
View File

@@ -2,7 +2,11 @@
.tfw-xterm {
.xterm {
.xterm-viewport {
@include set-component-size('terminal');
}
.xterm .composition-view {
background: blue;
}
}

2
src/assets/scss/_variables.scss
View File

@@ -161,4 +161,4 @@ $company-logo-width: 130px;
// Change this to switch template. Options: 'default', 'vraw', 'hraw'
$layout-template: 'default';
$layout-template: 'hraw';

11
src/assets/scss/mixins/_layout.scss
View File

@@ -4,8 +4,9 @@ $grid-rows-count: 15;
$default-layout: (
'header': (1, 2, 1, 2),
'messages': (1, 2, 2, 10),
'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
'terminal': (1, 4, 10,$grid-rows-count+1),
'webide': (4,$grid-rows-count+1, 1, $grid-rows-count+1),
'terminal': (1, 4, 10, $grid-rows-count),
'terminal-footer': (1, 4, $grid-rows-count, -1),
'web': (2, 4, 1, 10)
);
@@ -13,7 +14,8 @@ $vraw-layout: (
'header': (1, 2, 1, 2),
'messages': (1, 2, 2,$grid-rows-count+1),
'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
'terminal': (2, 4, 1,$grid-rows-count+1),
'terminal': (2, 4, 1,$grid-rows-count),
'terminal-footer': (2, 4, $grid-rows-count, -1),
'web': (),
);
@@ -21,7 +23,8 @@ $hraw-layout: (
'header': (1, 2, 1,$grid-rows-count+1),
'messages': (1, 2, 2,$grid-rows-count+1),
'webide': (2,$grid-rows-count+1, 1, 10),
'terminal': (2,$grid-rows-count+1, 10,$grid-rows-count+1),
'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count),
'terminal-footer': (2, $grid-rows-count+1, $grid-rows-count, -1),
'web': (),
);