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