diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 8552c99..a3d76e8 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -57,7 +57,7 @@
.tfw-messages {
// Check whether the layout contains a web component
div[class*="web"] & {
- border: 2px solid $tao-gray-100;
+ border: 2px solid $tao-base-color;
border-top: 0;
border-left: 0;
border-bottom: 0;
@@ -65,17 +65,16 @@
}
.tfw-header {
- padding: $small;
- padding-top: $tiny;
- background-color: $tao-gray-50;
+ padding: $tiny;
+ padding-top: $hair;
+ background-color: $tao-base-color;
}
@include set-scrollbar-style('dark', '.tfw-messages');
.tfw-messages {
- padding: $space;
- padding-top: $hair;
- background-color: $tao-gray-50;
+ padding: $tiny;
+ background-color: $tao-base-color;
overflow-y: scroll;
max-height: 95vmin;
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 069490e..2859a1f 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,4 +1,3 @@
-
-
-
+
+
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 675dad1..115b1d7 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,19 +1,8 @@
@import "../../assets/scss/variables.scss";
-.tfw-header-title {
- color: $tao-blue-500;
- font-size: $font-size-h3;
-}
-
-.tfw-grid-navbar {
- display: grid;
- grid-template-columns: $company-logo-width 1fr;
- grid-column-gap: 8px;
- width: 100%;
-}
-
.tfw-company-logo {
display: block;
- width: $company-logo-width;
+ padding: $tiny;
+ width: 80%;
}
diff --git a/src/app/message-types/bot-messages.ts b/src/app/message-types/bot-messages.ts
index 4b7fd94..484e512 100644
--- a/src/app/message-types/bot-messages.ts
+++ b/src/app/message-types/bot-messages.ts
@@ -1,9 +1,13 @@
import { WebSocketMessage } from './websocket-message';
+export type MessageButton = 'yes' | 'no' | 'fix' | 'hint' | 'solution' | 'next';
+export type MessageButtonMap = Record
;
+
export interface MessageData {
originator?: string;
timestamp?: Date;
typing?: boolean;
+ buttons?: MessageButton[];
command?: any;
message: string;
}
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index a6d3f56..91789ca 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -4,13 +4,23 @@
[class.highlighted-message]="last"
(click)="sendMessageCommand(message)">
+
+
+
+
+
+
+
-
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index 3c08645..6c01006 100644
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -1,25 +1,67 @@
@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout";
-
-.tfw-next-button {
- text-align: center;
-}
+@import "../../assets/scss/mixins/button";
.tfw-grid-message {
+ font-family: "Roboto";
+ font-style: normal;
display: grid;
grid-template-rows: 1fr auto;
- grid-row-gap: $hair;
+ grid-row-gap: $nano;
width: 100%;
-
- background-color: $tao-gray-100;
+ padding: $hair;
border-radius: $tao-panel-border-radius-sm;
- padding: $tiny;
font-size: $font-size-base;
margin-bottom: $hair;
animation-name: inflate;
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1);
+ color: white;
+ background-color: $tao-card-color;
+
+ .tfw-message-btn-divider {
+ opacity: 0.25;
+ border: 1px solid $tao-gray-color;
+ }
+ .tfw-message-btn {
+ color: $tao-btn-font-color;
+ padding-top: $tiny;
+ padding-bottom: $hair;
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ .no {
+ @include set-button-style($tao-red-color);
+ width: $xlarge;
+ }
+
+ .yes {
+ @include set-button-style($tao-green-color);
+ width: $xlarge;
+ }
+
+ .solution {
+ @include set-button-style($tao-blue-color);
+ width: $xlarge + $medium + $tiny;
+ }
+
+ .hint {
+ @include set-button-style($tao-yellow-color);
+ width: $xlarge + $medium + $tiny;
+ }
+
+ .fix {
+ @include set-button-style($tao-yellow-color);
+ width: $xlarge + $medium + $tiny;
+ }
+
+ .next {
+ @include set-button-style($tao-blue-color);
+ width: $xlarge;
+ }
+ }
}
.highlighted-message {
@@ -44,7 +86,7 @@
background-color: gray;
margin-top: 0.3em;
margin-left: 0.3em;
-
+
animation-name: float;
animation-duration: 1.7s;
animation-timing-function: ease-in-out;
@@ -65,24 +107,33 @@
.tfw-grid-message-header {
display: grid;
- grid-template-columns: 1fr 5fr 8fr;
+ grid-template-columns: 5fr 8fr;
grid-column-gap: 4px;
width: 100%;
- img {
- width: 12px;
- }
-
.originator {
- font-weight: 500;
+ font-style: normal;
+ font-weight: bold;
+ font-size: $font-size-base;
+ line-height: 26px;
+
+ display: flex;
+ align-items: center;
+ color: $tao-message-originator-color;
}
.timestamp {
- font-size: $font-size-tiny;
+ font-size: $font-size-base;
+ color: $tao-gray-color;
opacity: 0.37;
}
}
.tfw-grid-message-body {
- @include word-break()
+ @include word-break();
+ line-height: 26px;
+
+ & p {
+ margin-bottom: $tiny !important;
+ }
}
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index 32c4b51..629d720 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
-import { MessageData, Message } from '../message-types/bot-messages';
+import {MessageData, Message, MessageButton, MessageButtonMap} from '../message-types/bot-messages';
import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service';
import { Subject } from 'rxjs';
@@ -13,8 +13,15 @@ export class MessagesComponent implements OnInit {
@Output() newMessageEvent: EventEmitter
= new EventEmitter();
newMessage: Subject = new Subject();
showTypingIndicator = false;
-
messages: MessageData[] = [];
+ buttonMap: MessageButtonMap = {
+ fix: {caption: 'Ready to fix'},
+ solution: {caption: 'Show solution'},
+ hint: {caption: 'Hint'},
+ next: {caption: 'Next'},
+ yes: {caption: 'Yes'},
+ no: {caption: 'No'},
+ };
constructor(
private markdownService: MarkdownService,
@@ -71,4 +78,11 @@ export class MessagesComponent implements OnInit {
this.websocketService.send(message.command);
}
}
+
+ sendButtonCommand(messageButton: MessageButton) {
+ this.websocketService.send({
+ 'key': 'message.button.click',
+ 'value': messageButton
+ });
+ }
}
diff --git a/src/app/pipes/capitalize.pipe.ts b/src/app/pipes/capitalize.pipe.ts
new file mode 100644
index 0000000..5a7c605
--- /dev/null
+++ b/src/app/pipes/capitalize.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'capitalize',
+})
+export class CapitalizePipe implements PipeTransform {
+ transform(value: string): string {
+ if (!value) {
+ return '';
+ }
+ return value[0].toLocaleUpperCase() + value.toLocaleLowerCase().slice(1);
+ }
+}
diff --git a/src/assets/images/avatao-tutorial-framework-logo.svg b/src/assets/images/avatao-tutorial-framework-logo.svg
new file mode 100644
index 0000000..ea8518a
--- /dev/null
+++ b/src/assets/images/avatao-tutorial-framework-logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/images/avatao_logo.svg b/src/assets/images/avatao_logo.svg
deleted file mode 100644
index 29bceab..0000000
--- a/src/assets/images/avatao_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/images/avataobot.svg b/src/assets/images/avataobot.svg
deleted file mode 100755
index 70bbbe2..0000000
--- a/src/assets/images/avataobot.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/scss/_main.scss b/src/assets/scss/_main.scss
index 0761e87..4680f9c 100644
--- a/src/assets/scss/_main.scss
+++ b/src/assets/scss/_main.scss
@@ -3,6 +3,7 @@
'grid';
@import
+ 'mixins/button',
'mixins/scrollbar';
@import
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index aa82644..685854a 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -2,7 +2,7 @@
// Spaces
//
-$space: 24px;
+$space: 32px;
$sxlarge: 9 * $space;
$xxxlarge: 6 * $space;
@@ -30,30 +30,6 @@ $tao-blue-700: #195684;
$tao-blue-800: #103B5B;
$tao-blue-900: #081A2B;
-// Tao sky palette
-$tao-sky-50: #F1FAFD;
-$tao-sky-100: #C5E9F5;
-$tao-sky-200: #9AD8EE;
-$tao-sky-300: #6EC7E6;
-$tao-sky-400: #42B7DF;
-$tao-sky-500: #19A7D8;
-$tao-sky-600: #0E8BA8;
-$tao-sky-700: #04647A;
-$tao-sky-800: #004251;
-$tao-sky-900: #002028;
-
-// Tao phtalo palette
-$tao-phtalo-50: #F2FBFC;
-$tao-phtalo-100: #C8EDF1;
-$tao-phtalo-200: #9FDFE6;
-$tao-phtalo-300: #75D1DB;
-$tao-phtalo-400: #4CC3D0;
-$tao-phtalo-500: #24B6C6;
-$tao-phtalo-600: #16989E;
-$tao-phtalo-700: #0C7575;
-$tao-phtalo-800: #034C4F;
-$tao-phtalo-900: #002426;
-
// Tao turqoise palette
$tao-turqoise-50: #F1FBFB;
$tao-turqoise-100: #C3EFEF;
@@ -90,29 +66,6 @@ $tao-warm-yellow-700: #CC8B36;
$tao-warm-yellow-800: #B2762F;
$tao-warm-yellow-900: #996526;
-// Tao plum palette
-$tao-plum-50: #F6F8FD;
-$tao-plum-100: #DADFF8;
-$tao-plum-200: #BEC7F3;
-$tao-plum-300: #A2AFED;
-$tao-plum-400: #8797E8;
-$tao-plum-500: #6C80E3;
-$tao-plum-600: #5E77BF;
-$tao-plum-700: #4B5E99;
-$tao-plum-800: #384672;
-$tao-plum-900: #272F4C;
-
-// Tao pink palette
-$tao-pink-50: #FFF0F7;
-$tao-pink-100: #FFBFDF;
-$tao-pink-200: #FF8FC6;
-$tao-pink-300: #FF5EAE;
-$tao-pink-400: #FF2E95;
-$tao-pink-500: #FF007E;
-$tao-pink-600: #D8007C;
-$tao-pink-700: #B20066;
-$tao-pink-800: #8C0050;
-$tao-pink-900: #66003A;
// Tao red palette
$tao-red-50: #FFF5F5;
@@ -138,6 +91,19 @@ $tao-gray-700: #232323;
$tao-gray-800: #0C0C0C;
$tao-gray-900: #000000;
+// Tao messages
+$tao-base-color: #2A324C;
+$tao-btn-font-color: #1F2836;
+$tao-card-color: #363E56;
+$tao-message-originator-color: #6697FF;
+$tao-copy-color: #FFFFFF;
+$tao-timestamp-color: #94A6B9;
+$tao-gray-color: #94A6B9; // @25% opacity
+$tao-yellow-color: #FFD68F;
+$tao-blue-color: #6697FF;
+$tao-green-color: #48BEB0;
+$tao-red-color: #FF4583;
+
// Panel border radius
$tao-panel-border-radius: 14px;
diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss
new file mode 100644
index 0000000..ab95fae
--- /dev/null
+++ b/src/assets/scss/mixins/_button.scss
@@ -0,0 +1,25 @@
+@import "../variables.scss";
+
+@mixin set-button-style($color) {
+ box-sizing: border-box;
+ border-radius: 10px;
+ background: $color;
+ border: 1.5px solid $color;
+
+ font-style: normal;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 26px;
+ height: $space;
+ margin-right: $tiny;
+ color: $tao-btn-font-color;
+ outline: none;
+
+ &:active {
+ background: $tao-btn-font-color;
+ border: $tao-btn-font-color;
+ color: $color;
+ border-radius: 10px;
+ }
+}
+
diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss
index dc6d682..839bcda 100644
--- a/src/assets/scss/mixins/_layout.scss
+++ b/src/assets/scss/mixins/_layout.scss
@@ -2,8 +2,8 @@ $grid-columns-count: 100;
$grid-rows-count: 30;
$terminal-ide-web-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 60),
+ 'messages': (0, 20, 0, 52),
+ 'header': (0, 20, 52, 60),
'ide': (56, 96, 0, 100),
'terminal': (0, 56, 60, 100),
'web': (20, 56, 0, 60),
@@ -11,8 +11,8 @@ $terminal-ide-web-layout: (
);
$terminal-web-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 100),
+ 'messages': (0, 20, 0, 92),
+ 'header': (0, 20, 92, 100),
'ide': (),
'terminal': (56, 96, 0, 100),
'web': (20, 56, 0, 100),
@@ -20,8 +20,8 @@ $terminal-web-layout: (
);
$terminal-ide-vertical-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 100),
+ 'messages': (0, 20, 0, 92),
+ 'header': (0, 20, 92, 100),
'ide': (56, 96, 0, 100),
'terminal': (20, 56, 0, 100),
'web': (),
@@ -29,8 +29,8 @@ $terminal-ide-vertical-layout: (
);
$terminal-ide-horizontal-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 100),
+ 'messages': (0, 20, 0, 92),
+ 'header': (0, 20, 92, 100),
'ide': (20, 96, 0, 60),
'terminal': (20, 96, 60, 100),
'web': (),
@@ -38,8 +38,8 @@ $terminal-ide-horizontal-layout: (
);
$ide-web-vertical-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 100),
+ 'messages': (0, 20, 0, 92),
+ 'header': (0, 20, 92, 100),
'ide': (56, 96, 0, 100),
'terminal': (),
'web': (20, 56, 0, 100),
@@ -47,8 +47,8 @@ $ide-web-vertical-layout: (
);
$terminal-only-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 100),
+ 'messages': (0, 20, 0, 92),
+ 'header': (0, 20, 92, 100),
'ide': (),
'terminal': (20, 96, 0, 100),
'web': (),
@@ -56,8 +56,8 @@ $terminal-only-layout: (
);
$ide-only-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 100),
+ 'messages': (0, 20, 0, 92),
+ 'header': (0, 20, 92, 100),
'ide': (20, 96, 0, 100),
'terminal': (),
'web': (),
@@ -65,8 +65,8 @@ $ide-only-layout: (
);
$web-only-layout: (
- 'header': (0, 20, 0, 8),
- 'messages': (0, 20, 8, 100),
+ 'messages': (0, 20, 0, 92),
+ 'header': (0, 20, 92, 100),
'ide': (),
'terminal': (),
'web': (20, 96, 0, 100),
diff --git a/src/assets/scss/mixins/_scrollbar.scss b/src/assets/scss/mixins/_scrollbar.scss
index 41bae4d..81e0251 100644
--- a/src/assets/scss/mixins/_scrollbar.scss
+++ b/src/assets/scss/mixins/_scrollbar.scss
@@ -1,10 +1,10 @@
-@mixin set-scrollbar-style($style, $selctor) {
+@mixin set-scrollbar-style($style, $selector) {
::-webkit-scrollbar {
width: 3px !important;
height: 3px !important;
}
- #{$selctor}::-webkit-scrollbar-track {
+ #{$selector}::-webkit-scrollbar-track {
border-radius: 10px !important;
width: 3px !important;
@if ($style == 'light') {
@@ -15,7 +15,7 @@
};
}
- #{$selctor}::-webkit-scrollbar-thumb {
+ #{$selector}::-webkit-scrollbar-thumb {
@if ($style == 'dark') {
background: #8a8a8a !important;
@@ -25,7 +25,7 @@
border-radius: 10px !important;
}
- #{$selctor}::-webkit-scrollbar-thumb:hover {
+ #{$selector}::-webkit-scrollbar-thumb:hover {
@if ($style == 'dark') {
background: #424242 !important;
@@ -35,3 +35,4 @@
cursor: pointer !important;
}
}
+
diff --git a/src/index.html b/src/index.html
index 5b60894..c5cfa55 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,7 @@
+
diff --git a/src/styles.scss b/src/styles.scss
index 73b0579..828afbd 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,5 +8,6 @@ body, html {
height: 100vh;
width: 100vw;
overflow: hidden;
+
@include set-scrollbar-style('light', '');
}