From 0f324a108bc47cdd5191752a4322e4ee26a3f3ea Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Fri, 12 Jun 2020 17:04:29 +0200 Subject: [PATCH] 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; } } +