diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 87758ae..3ac0eb6 100755
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -13,4 +13,5 @@
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index dd55167..377d731 100755
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -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 {
diff --git a/src/app/services/terminado.service.ts b/src/app/services/terminado.service.ts
index c197ef0..0571be8 100644
--- a/src/app/services/terminado.service.ts
+++ b/src/app/services/terminado.service.ts
@@ -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');
}
diff --git a/src/app/terminal/terminal.component.html b/src/app/terminal/terminal.component.html
index 7e89d46..32ea922 100644
--- a/src/app/terminal/terminal.component.html
+++ b/src/app/terminal/terminal.component.html
@@ -1 +1 @@
-
+
diff --git a/src/app/terminal/terminal.component.scss b/src/app/terminal/terminal.component.scss
index df17230..0bde71f 100644
--- a/src/app/terminal/terminal.component.scss
+++ b/src/app/terminal/terminal.component.scss
@@ -2,7 +2,11 @@
.tfw-xterm {
- .xterm {
+ .xterm-viewport {
@include set-component-size('terminal');
}
+
+ .xterm .composition-view {
+ background: blue;
+ }
}
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 5e07734..b25ebc5 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -161,4 +161,4 @@ $company-logo-width: 130px;
// Change this to switch template. Options: 'default', 'vraw', 'hraw'
-$layout-template: 'default';
+$layout-template: 'hraw';
diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss
index 060f282..783a740 100644
--- a/src/assets/scss/mixins/_layout.scss
+++ b/src/assets/scss/mixins/_layout.scss
@@ -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': (),
);