From 2b301edccce6b250afaa3988fdddb036831da869 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 8 Jun 2020 11:24:39 +0200 Subject: [PATCH 1/7] Redefine color palette --- src/assets/scss/_variables.scss | 60 +++++++-------------------------- 1 file changed, 13 insertions(+), 47 deletions(-) diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index aa82644..9879f55 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -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: #94A6B9; // @10% opacity +$tao-title-color: #6697FF; +$tao-copy-color: #FFFFFF; +$tao-timestamp-color: #94A6B9; +$tao-divider-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; From 0f324a108bc47cdd5191752a4322e4ee26a3f3ea Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 12 Jun 2020 17:04:29 +0200 Subject: [PATCH 2/7] Change look and UI of messages, add new Avatao logo --- src/app/dashboard/dashboard.component.html | 2 +- src/app/dashboard/dashboard.component.scss | 9 ++-- src/app/header/header.component.html | 5 +- src/app/header/header.component.scss | 15 +----- src/app/message-types/bot-messages.ts | 1 + src/app/messages/messages.component.html | 9 +++- src/app/messages/messages.component.scss | 49 +++++++++++++++---- src/app/messages/messages.component.ts | 5 ++ .../images/avatao-tutorial-framework-logo.svg | 9 ++++ src/assets/images/avatao_logo.svg | 1 - src/assets/images/avataobot.svg | 1 - src/assets/scss/_main.scss | 1 + src/assets/scss/_variables.scss | 2 +- src/assets/scss/mixins/_button.scss | 14 ++++++ src/assets/scss/mixins/_layout.scss | 32 ++++++------ src/assets/scss/mixins/_scrollbar.scss | 9 ++-- 16 files changed, 107 insertions(+), 57 deletions(-) create mode 100644 src/assets/images/avatao-tutorial-framework-logo.svg delete mode 100644 src/assets/images/avatao_logo.svg delete mode 100755 src/assets/images/avataobot.svg create mode 100644 src/assets/scss/mixins/_button.scss 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..90fdda4 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; @@ -67,15 +67,14 @@ .tfw-header { padding: $small; padding-top: $tiny; - background-color: $tao-gray-50; + 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: $small; + 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..4ae39a9 100644 --- a/src/app/message-types/bot-messages.ts +++ b/src/app/message-types/bot-messages.ts @@ -4,6 +4,7 @@ export interface MessageData { originator?: string; timestamp?: Date; typing?: boolean; + buttons?: [string]; command?: any; message: string; } diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index a6d3f56..ac12caf 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -4,13 +4,18 @@ [class.highlighted-message]="last" (click)="sendMessageCommand(message)">
-
{{message.originator}}
{{message.timestamp | date:'HH:mm:ss'}}
+
+ +
+ No +
+
-
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 3c08645..f2e14c2 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -1,25 +1,54 @@ @import "../../assets/scss/variables.scss"; @import "../../assets/scss/mixins/layout"; - -.tfw-next-button { - text-align: center; -} +@import "../../assets/scss/mixins/button"; .tfw-grid-message { display: grid; grid-template-rows: 1fr auto; grid-row-gap: $hair; width: 100%; - - background-color: $tao-gray-100; + padding: $small; border-radius: $tao-panel-border-radius-sm; - padding: $tiny; font-size: $font-size-base; - margin-bottom: $hair; + margin-bottom: 8px; 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-btn { + color: $tao-btn-font-color; + + display: flex; + align-items: center; + text-align: center; + + .no { + @include set-button-style($tao-red-color); + } + + .yes { + @include set-button-style($tao-green-color); + } + + .solution { + @include set-button-style($tao-green-color); + } + + .hint { + @include set-button-style($tao-yellow-color); + } + + .fix { + @include set-button-style($tao-yellow-color); + } + + .next { + @include set-button-style($tao-blue-color); + } + } } .highlighted-message { @@ -44,7 +73,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; @@ -84,5 +113,5 @@ } .tfw-grid-message-body { - @include word-break() + @include word-break(); } diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 32c4b51..d783a81 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -13,6 +13,11 @@ export class MessagesComponent implements OnInit { @Output() newMessageEvent: EventEmitter = new EventEmitter(); newMessage: Subject = new Subject(); showTypingIndicator = false; + showButton = true; + noButton = false; + solutionButton = false; + hintButton = false; + fixButton = false; messages: MessageData[] = []; 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 9879f55..51b4482 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -94,7 +94,7 @@ $tao-gray-900: #000000; // Tao messages $tao-base-color: #2A324C; $tao-btn-font-color: #1F2836; -$tao-card-color: #94A6B9; // @10% opacity +$tao-card-color: #363E56; $tao-title-color: #6697FF; $tao-copy-color: #FFFFFF; $tao-timestamp-color: #94A6B9; diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss new file mode 100644 index 0000000..4e82f0f --- /dev/null +++ b/src/assets/scss/mixins/_button.scss @@ -0,0 +1,14 @@ +@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; +} + 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; } } + From 31cf75f63b441e98dabb5e6abe00792f02a6598f Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 17 Jun 2020 17:19:22 +0200 Subject: [PATCH 3/7] Add message buttons to control the user flow --- src/app/app.module.ts | 2 ++ src/app/dashboard/dashboard.component.scss | 6 ++-- src/app/message-types/bot-messages.ts | 2 +- src/app/messages/messages.component.html | 11 +++++-- src/app/messages/messages.component.scss | 37 ++++++++++++++++------ src/app/messages/messages.component.ts | 13 ++++---- src/app/pipes/capitalize.pipe.ts | 13 ++++++++ src/assets/scss/_variables.scss | 4 +-- src/assets/scss/mixins/_button.scss | 2 ++ 9 files changed, 65 insertions(+), 25 deletions(-) create mode 100644 src/app/pipes/capitalize.pipe.ts 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.scss b/src/app/dashboard/dashboard.component.scss index 90fdda4..421c749 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -65,15 +65,15 @@ } .tfw-header { - padding: $small; - padding-top: $tiny; + padding: $tiny; + padding-top: $hair; background-color: $tao-base-color; } @include set-scrollbar-style('dark', '.tfw-messages'); .tfw-messages { - padding: $small; + padding: $tiny; background-color: $tao-base-color; overflow-y: scroll; max-height: 95vmin; diff --git a/src/app/message-types/bot-messages.ts b/src/app/message-types/bot-messages.ts index 4ae39a9..f374d15 100644 --- a/src/app/message-types/bot-messages.ts +++ b/src/app/message-types/bot-messages.ts @@ -4,7 +4,7 @@ export interface MessageData { originator?: string; timestamp?: Date; typing?: boolean; - buttons?: [string]; + buttons?: Array<'yes'|'no'|'solution'|'hint'|'fix'>; command?: any; message: string; } diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index ac12caf..8b50843 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -8,10 +8,15 @@
{{message.timestamp | date:'HH:mm:ss'}}
-
+
-
- No +
+
+
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index f2e14c2..c406c12 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -5,9 +5,9 @@ .tfw-grid-message { display: grid; grid-template-rows: 1fr auto; - grid-row-gap: $hair; + grid-row-gap: $nano; width: 100%; - padding: $small; + padding: $hair; border-radius: $tao-panel-border-radius-sm; font-size: $font-size-base; margin-bottom: 8px; @@ -18,31 +18,41 @@ color: white; background-color: $tao-card-color; - .tfw-btn { + .tfw-message-btn-divider { + opacity: 0.25; + border: 1px solid $tao-divider-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-green-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; } .next { @@ -94,16 +104,19 @@ .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: 14px; + line-height: 26px; + + display: flex; + align-items: center; + color: $tao-message-originator-color; } .timestamp { @@ -114,4 +127,8 @@ .tfw-grid-message-body { @include word-break(); + + & p { + margin-bottom: $tiny !important; + } } diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index d783a81..d46ba35 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -13,12 +13,6 @@ export class MessagesComponent implements OnInit { @Output() newMessageEvent: EventEmitter = new EventEmitter(); newMessage: Subject = new Subject(); showTypingIndicator = false; - showButton = true; - noButton = false; - solutionButton = false; - hintButton = false; - fixButton = false; - messages: MessageData[] = []; constructor( @@ -76,4 +70,11 @@ export class MessagesComponent implements OnInit { this.websocketService.send(message.command); } } + + sendButtonCommand(button: string) { + this.websocketService.send({ + 'key': 'button.click', + 'value': button + }); + } } 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/scss/_variables.scss b/src/assets/scss/_variables.scss index 51b4482..b6b1062 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; @@ -95,7 +95,7 @@ $tao-gray-900: #000000; $tao-base-color: #2A324C; $tao-btn-font-color: #1F2836; $tao-card-color: #363E56; -$tao-title-color: #6697FF; +$tao-message-originator-color: #6697FF; $tao-copy-color: #FFFFFF; $tao-timestamp-color: #94A6B9; $tao-divider-color: #94A6B9; // @25% opacity diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss index 4e82f0f..75ff7b1 100644 --- a/src/assets/scss/mixins/_button.scss +++ b/src/assets/scss/mixins/_button.scss @@ -10,5 +10,7 @@ font-weight: bold; font-size: 14px; line-height: 26px; + height: $space; + margin-right: $tiny; } From fb2735ccc795949a34ca7cdf5ab3ff2329871ff4 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 17 Jun 2020 17:47:57 +0200 Subject: [PATCH 4/7] Fix style of message buttons --- src/app/message-types/bot-messages.ts | 5 +++++ src/app/messages/messages.component.html | 2 +- src/app/messages/messages.component.scss | 7 +++++-- src/app/messages/messages.component.ts | 10 +++++++++- src/assets/scss/mixins/_button.scss | 1 + src/index.html | 1 + src/styles.scss | 1 + 7 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/app/message-types/bot-messages.ts b/src/app/message-types/bot-messages.ts index f374d15..1defaf4 100644 --- a/src/app/message-types/bot-messages.ts +++ b/src/app/message-types/bot-messages.ts @@ -9,4 +9,9 @@ export interface MessageData { message: string; } +export interface MessageButton { + [Key: string]: string; +} + + export interface Message extends MessageData, WebSocketMessage {} diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 8b50843..278e6e2 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -15,7 +15,7 @@
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index c406c12..1748035 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -3,6 +3,8 @@ @import "../../assets/scss/mixins/button"; .tfw-grid-message { + font-family: "Roboto"; + font-style: normal; display: grid; grid-template-rows: 1fr auto; grid-row-gap: $nano; @@ -41,7 +43,7 @@ } .solution { - @include set-button-style($tao-green-color); + @include set-button-style($tao-blue-color); width: $xlarge + $medium + $tiny; } @@ -52,11 +54,12 @@ .fix { @include set-button-style($tao-yellow-color); - width: $xlarge; + width: $xlarge + $medium + $tiny; } .next { @include set-button-style($tao-blue-color); + width: $xlarge; } } } diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index d46ba35..f1a3b7e 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 } from '../message-types/bot-messages'; import { MarkdownService } from '../services/markdown.service'; import { WebSocketService } from '../services/websocket.service'; import { Subject } from 'rxjs'; @@ -14,6 +14,14 @@ export class MessagesComponent implements OnInit { newMessage: Subject = new Subject(); showTypingIndicator = false; messages: MessageData[] = []; + buttons: MessageButton = { + 'yes' : 'Yes', + 'no' : 'No', + 'fix' : 'Ready to fix', + 'solution' : 'Show solution', + 'hint' : 'Hint', + 'next' : 'Next', + }; constructor( private markdownService: MarkdownService, diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss index 75ff7b1..95084bb 100644 --- a/src/assets/scss/mixins/_button.scss +++ b/src/assets/scss/mixins/_button.scss @@ -12,5 +12,6 @@ line-height: 26px; height: $space; margin-right: $tiny; + color: $tao-btn-font-color; } 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', ''); } From aacd8aea60c742bcbeb94e43b22b48960d118206 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 17 Jun 2020 17:58:31 +0200 Subject: [PATCH 5/7] Fix active message button style --- src/app/messages/messages.component.scss | 7 ++++--- src/assets/scss/_variables.scss | 2 +- src/assets/scss/mixins/_button.scss | 8 ++++++++ 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 1748035..608a97a 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -22,7 +22,7 @@ .tfw-message-btn-divider { opacity: 0.25; - border: 1px solid $tao-divider-color; + border: 1px solid $tao-gray-color; } .tfw-message-btn { color: $tao-btn-font-color; @@ -114,7 +114,7 @@ .originator { font-style: normal; font-weight: bold; - font-size: 14px; + font-size: $font-size-base; line-height: 26px; display: flex; @@ -123,7 +123,8 @@ } .timestamp { - font-size: $font-size-tiny; + font-size: $font-size-base; + color: $tao-gray-color; opacity: 0.37; } } diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index b6b1062..685854a 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -98,7 +98,7 @@ $tao-card-color: #363E56; $tao-message-originator-color: #6697FF; $tao-copy-color: #FFFFFF; $tao-timestamp-color: #94A6B9; -$tao-divider-color: #94A6B9; // @25% opacity +$tao-gray-color: #94A6B9; // @25% opacity $tao-yellow-color: #FFD68F; $tao-blue-color: #6697FF; $tao-green-color: #48BEB0; diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss index 95084bb..ab95fae 100644 --- a/src/assets/scss/mixins/_button.scss +++ b/src/assets/scss/mixins/_button.scss @@ -13,5 +13,13 @@ 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; + } } From d92f3da04d8c0e363ba399140e2e86da1137a412 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 22 Jun 2020 12:19:33 +0200 Subject: [PATCH 6/7] Refactor message buttons using Records for mapping --- src/app/dashboard/dashboard.component.scss | 2 +- src/app/message-types/bot-messages.ts | 10 ++++------ src/app/messages/messages.component.html | 2 +- src/app/messages/messages.component.scss | 3 ++- src/app/messages/messages.component.ts | 16 ++++++++-------- 5 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 421c749..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-base-color; + border: 2px solid $tao-base-color; border-top: 0; border-left: 0; border-bottom: 0; diff --git a/src/app/message-types/bot-messages.ts b/src/app/message-types/bot-messages.ts index 1defaf4..484e512 100644 --- a/src/app/message-types/bot-messages.ts +++ b/src/app/message-types/bot-messages.ts @@ -1,17 +1,15 @@ 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?: Array<'yes'|'no'|'solution'|'hint'|'fix'>; + buttons?: MessageButton[]; command?: any; message: string; } -export interface MessageButton { - [Key: string]: string; -} - - export interface Message extends MessageData, WebSocketMessage {} diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 278e6e2..70ffe8a 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -15,7 +15,7 @@
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 608a97a..6c01006 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -12,7 +12,7 @@ padding: $hair; border-radius: $tao-panel-border-radius-sm; font-size: $font-size-base; - margin-bottom: 8px; + margin-bottom: $hair; animation-name: inflate; animation-duration: 0.5s; @@ -131,6 +131,7 @@ .tfw-grid-message-body { @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 f1a3b7e..86cb161 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, MessageButton } 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'; @@ -14,13 +14,13 @@ export class MessagesComponent implements OnInit { newMessage: Subject = new Subject(); showTypingIndicator = false; messages: MessageData[] = []; - buttons: MessageButton = { - 'yes' : 'Yes', - 'no' : 'No', - 'fix' : 'Ready to fix', - 'solution' : 'Show solution', - 'hint' : 'Hint', - 'next' : 'Next', + buttonMap: MessageButtonMap = { + fix: {caption: 'Ready to fix'}, + solution: {caption: 'Show solution'}, + hint: {caption: 'Hint'}, + next: {caption: 'Next'}, + yes: {caption: 'Yes'}, + no: {caption: 'No'}, }; constructor( From 2f9aa9c2982a96a371127c9c829b1c4015471f18 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 22 Jun 2020 13:43:55 +0200 Subject: [PATCH 7/7] Change message button type in send message --- src/app/messages/messages.component.html | 8 ++++---- src/app/messages/messages.component.ts | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 70ffe8a..91789ca 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -12,10 +12,10 @@
-
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 86cb161..629d720 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -79,10 +79,10 @@ export class MessagesComponent implements OnInit { } } - sendButtonCommand(button: string) { + sendButtonCommand(messageButton: MessageButton) { this.websocketService.send({ - 'key': 'button.click', - 'value': button + 'key': 'message.button.click', + 'value': messageButton }); } }