diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dd2014b..0c07ddf 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -28,6 +28,7 @@ import { } from './services/config.service'; import { FSMUpdateService } from './services/fsmupdate.service'; import { LoaderComponent } from './loader/loader.component'; +import {CapitalizePipe} from './pipes/capitalize.pipe'; @NgModule({ @@ -42,6 +43,7 @@ import { LoaderComponent } from './loader/loader.component'; TestmessengerComponent, SafePipe, SafeHtmlPipe, + CapitalizePipe, ConsoleComponent, LoaderComponent ], diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 5eacbd5..d076712 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,9 +1,9 @@
-
+
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 @@ -
- - Tutorials +
+
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)">
-
{{message.originator}}
{{message.timestamp | date:'HH:mm:ss'}}
+
+ +
+
+ +
+
-
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 @@ -avataologo_small \ 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 @@ -avataobot \ 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', ''); }