Change look and UI of messages, add new Avatao logo

This commit is contained in:
Gabor PEK 2020-06-12 17:04:29 +02:00
parent 2b301edccc
commit 0f324a108b
16 changed files with 107 additions and 57 deletions

View File

@ -1,9 +1,9 @@
<div [attr.class]="layout | async"> <div [attr.class]="layout | async">
<div class="tfw-grid-main-components"> <div class="tfw-grid-main-components">
<div class="tfw-header"><app-header></app-header></div>
<div [ngClass]="{'hide-attribute': hideMessages | async}" class="tfw-messages"> <div [ngClass]="{'hide-attribute': hideMessages | async}" class="tfw-messages">
<app-messages></app-messages> <app-messages></app-messages>
</div> </div>
<div class="tfw-header"><app-header></app-header></div>
<div class="tfw-web tao-grid-top-left" <div class="tfw-web tao-grid-top-left"
[ngClass]="{'deploy-blur': deploying || (iframeReloadPoller.isPolling | async)}"> [ngClass]="{'deploy-blur': deploying || (iframeReloadPoller.isPolling | async)}">
<div *ngIf="iframeUrl | async" class="iframe-container"> <div *ngIf="iframeUrl | async" class="iframe-container">

View File

@ -57,7 +57,7 @@
.tfw-messages { .tfw-messages {
// Check whether the layout contains a web component // Check whether the layout contains a web component
div[class*="web"] & { div[class*="web"] & {
border: 2px solid $tao-gray-100; border: 2px solid $tao-base-color;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
border-bottom: 0; border-bottom: 0;
@ -67,15 +67,14 @@
.tfw-header { .tfw-header {
padding: $small; padding: $small;
padding-top: $tiny; padding-top: $tiny;
background-color: $tao-gray-50; background-color: $tao-base-color;
} }
@include set-scrollbar-style('dark', '.tfw-messages'); @include set-scrollbar-style('dark', '.tfw-messages');
.tfw-messages { .tfw-messages {
padding: $space; padding: $small;
padding-top: $hair; background-color: $tao-base-color;
background-color: $tao-gray-50;
overflow-y: scroll; overflow-y: scroll;
max-height: 95vmin; max-height: 95vmin;

View File

@ -1,4 +1,3 @@
<div class="tfw-grid-navbar tao-grid-center-center"> <div>
<img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt=""> <img src="images/avatao-tutorial-framework-logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
<span class="tfw-header-title">Tutorials</span>
</div> </div>

View File

@ -1,19 +1,8 @@
@import "../../assets/scss/variables.scss"; @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 { .tfw-company-logo {
display: block; display: block;
width: $company-logo-width; padding: $tiny;
width: 80%;
} }

View File

@ -4,6 +4,7 @@ export interface MessageData {
originator?: string; originator?: string;
timestamp?: Date; timestamp?: Date;
typing?: boolean; typing?: boolean;
buttons?: [string];
command?: any; command?: any;
message: string; message: string;
} }

View File

@ -4,13 +4,18 @@
[class.highlighted-message]="last" [class.highlighted-message]="last"
(click)="sendMessageCommand(message)"> (click)="sendMessageCommand(message)">
<div class="tfw-grid-message-header"> <div class="tfw-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/>
<div class="tao-grid-center-left originator">{{message.originator}}</div> <div class="tao-grid-center-left originator">{{message.originator}}</div>
<div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div> <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
</div> </div>
<div class="tfw-grid-message-body" [innerHtml]="message.message | safeHtml"></div> <div class="tfw-grid-message-body" [innerHtml]="message.message | safeHtml"></div>
<div *ngIf="showButton" class="tfw-btn">
<div class="no">
No
</div>
</div>
</div> </div>
<div *ngIf="showTypingIndicator" <div *ngIf="showTypingIndicator"
class="tfw-grid-message jumping-circle-container" class="tfw-grid-message jumping-circle-container"
(click)="drainMessageQueue()"> (click)="drainMessageQueue()">
<div class="jumping-circle" id="jc1"></div> <div class="jumping-circle" id="jc1"></div>

View File

@ -1,25 +1,54 @@
@import "../../assets/scss/variables.scss"; @import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout"; @import "../../assets/scss/mixins/layout";
@import "../../assets/scss/mixins/button";
.tfw-next-button {
text-align: center;
}
.tfw-grid-message { .tfw-grid-message {
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
grid-row-gap: $hair; grid-row-gap: $hair;
width: 100%; width: 100%;
padding: $small;
background-color: $tao-gray-100;
border-radius: $tao-panel-border-radius-sm; border-radius: $tao-panel-border-radius-sm;
padding: $tiny;
font-size: $font-size-base; font-size: $font-size-base;
margin-bottom: $hair; margin-bottom: 8px;
animation-name: inflate; animation-name: inflate;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1); 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 { .highlighted-message {
@ -44,7 +73,7 @@
background-color: gray; background-color: gray;
margin-top: 0.3em; margin-top: 0.3em;
margin-left: 0.3em; margin-left: 0.3em;
animation-name: float; animation-name: float;
animation-duration: 1.7s; animation-duration: 1.7s;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
@ -84,5 +113,5 @@
} }
.tfw-grid-message-body { .tfw-grid-message-body {
@include word-break() @include word-break();
} }

View File

@ -13,6 +13,11 @@ export class MessagesComponent implements OnInit {
@Output() newMessageEvent: EventEmitter<any> = new EventEmitter(); @Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
newMessage: Subject<MessageData> = new Subject<MessageData>(); newMessage: Subject<MessageData> = new Subject<MessageData>();
showTypingIndicator = false; showTypingIndicator = false;
showButton = true;
noButton = false;
solutionButton = false;
hintButton = false;
fixButton = false;
messages: MessageData[] = []; messages: MessageData[] = [];

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 17 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.0 KiB

View File

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.98 16.98"><defs><style>.cls-1{fill:none;stroke:#277eec;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>avataobot</title><rect class="cls-1" x="2.46" y="7.47" width="7.05" height="7.05" transform="translate(9.53 -1.01) rotate(45)"/><polyline class="cls-1" points="10.98 1 5.99 5.99 1 1"/></svg>

Before

Width:  |  Height:  |  Size: 417 B

View File

@ -3,6 +3,7 @@
'grid'; 'grid';
@import @import
'mixins/button',
'mixins/scrollbar'; 'mixins/scrollbar';
@import @import

View File

@ -94,7 +94,7 @@ $tao-gray-900: #000000;
// Tao messages // Tao messages
$tao-base-color: #2A324C; $tao-base-color: #2A324C;
$tao-btn-font-color: #1F2836; $tao-btn-font-color: #1F2836;
$tao-card-color: #94A6B9; // @10% opacity $tao-card-color: #363E56;
$tao-title-color: #6697FF; $tao-title-color: #6697FF;
$tao-copy-color: #FFFFFF; $tao-copy-color: #FFFFFF;
$tao-timestamp-color: #94A6B9; $tao-timestamp-color: #94A6B9;

View File

@ -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;
}

View File

@ -2,8 +2,8 @@ $grid-columns-count: 100;
$grid-rows-count: 30; $grid-rows-count: 30;
$terminal-ide-web-layout: ( $terminal-ide-web-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 52),
'messages': (0, 20, 8, 60), 'header': (0, 20, 52, 60),
'ide': (56, 96, 0, 100), 'ide': (56, 96, 0, 100),
'terminal': (0, 56, 60, 100), 'terminal': (0, 56, 60, 100),
'web': (20, 56, 0, 60), 'web': (20, 56, 0, 60),
@ -11,8 +11,8 @@ $terminal-ide-web-layout: (
); );
$terminal-web-layout: ( $terminal-web-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 92),
'messages': (0, 20, 8, 100), 'header': (0, 20, 92, 100),
'ide': (), 'ide': (),
'terminal': (56, 96, 0, 100), 'terminal': (56, 96, 0, 100),
'web': (20, 56, 0, 100), 'web': (20, 56, 0, 100),
@ -20,8 +20,8 @@ $terminal-web-layout: (
); );
$terminal-ide-vertical-layout: ( $terminal-ide-vertical-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 92),
'messages': (0, 20, 8, 100), 'header': (0, 20, 92, 100),
'ide': (56, 96, 0, 100), 'ide': (56, 96, 0, 100),
'terminal': (20, 56, 0, 100), 'terminal': (20, 56, 0, 100),
'web': (), 'web': (),
@ -29,8 +29,8 @@ $terminal-ide-vertical-layout: (
); );
$terminal-ide-horizontal-layout: ( $terminal-ide-horizontal-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 92),
'messages': (0, 20, 8, 100), 'header': (0, 20, 92, 100),
'ide': (20, 96, 0, 60), 'ide': (20, 96, 0, 60),
'terminal': (20, 96, 60, 100), 'terminal': (20, 96, 60, 100),
'web': (), 'web': (),
@ -38,8 +38,8 @@ $terminal-ide-horizontal-layout: (
); );
$ide-web-vertical-layout: ( $ide-web-vertical-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 92),
'messages': (0, 20, 8, 100), 'header': (0, 20, 92, 100),
'ide': (56, 96, 0, 100), 'ide': (56, 96, 0, 100),
'terminal': (), 'terminal': (),
'web': (20, 56, 0, 100), 'web': (20, 56, 0, 100),
@ -47,8 +47,8 @@ $ide-web-vertical-layout: (
); );
$terminal-only-layout: ( $terminal-only-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 92),
'messages': (0, 20, 8, 100), 'header': (0, 20, 92, 100),
'ide': (), 'ide': (),
'terminal': (20, 96, 0, 100), 'terminal': (20, 96, 0, 100),
'web': (), 'web': (),
@ -56,8 +56,8 @@ $terminal-only-layout: (
); );
$ide-only-layout: ( $ide-only-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 92),
'messages': (0, 20, 8, 100), 'header': (0, 20, 92, 100),
'ide': (20, 96, 0, 100), 'ide': (20, 96, 0, 100),
'terminal': (), 'terminal': (),
'web': (), 'web': (),
@ -65,8 +65,8 @@ $ide-only-layout: (
); );
$web-only-layout: ( $web-only-layout: (
'header': (0, 20, 0, 8), 'messages': (0, 20, 0, 92),
'messages': (0, 20, 8, 100), 'header': (0, 20, 92, 100),
'ide': (), 'ide': (),
'terminal': (), 'terminal': (),
'web': (20, 96, 0, 100), 'web': (20, 96, 0, 100),

View File

@ -1,10 +1,10 @@
@mixin set-scrollbar-style($style, $selctor) { @mixin set-scrollbar-style($style, $selector) {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 3px !important; width: 3px !important;
height: 3px !important; height: 3px !important;
} }
#{$selctor}::-webkit-scrollbar-track { #{$selector}::-webkit-scrollbar-track {
border-radius: 10px !important; border-radius: 10px !important;
width: 3px !important; width: 3px !important;
@if ($style == 'light') { @if ($style == 'light') {
@ -15,7 +15,7 @@
}; };
} }
#{$selctor}::-webkit-scrollbar-thumb { #{$selector}::-webkit-scrollbar-thumb {
@if ($style == 'dark') { @if ($style == 'dark') {
background: #8a8a8a !important; background: #8a8a8a !important;
@ -25,7 +25,7 @@
border-radius: 10px !important; border-radius: 10px !important;
} }
#{$selctor}::-webkit-scrollbar-thumb:hover { #{$selector}::-webkit-scrollbar-thumb:hover {
@if ($style == 'dark') { @if ($style == 'dark') {
background: #424242 !important; background: #424242 !important;
@ -35,3 +35,4 @@
cursor: pointer !important; cursor: pointer !important;
} }
} }