mrtoth
/
frontend-tutorial-framework
mirror of https://github.com/avatao-content/frontend-tutorial-framework
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix style of message buttons

This commit is contained in:
Gabor PEK 2020-06-17 17:47:57 +02:00
parent 31cf75f63b
commit fb2735ccc7
7 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/message-types/bot-messages.ts
View File

@ -9,4 +9,9 @@ export interface MessageData {
message: string;
}
export interface MessageButton {
[Key: string]: string;
}
export interface Message extends MessageData, WebSocketMessage {}

2
src/app/messages/messages.component.html
View File

@ -15,7 +15,7 @@
<button *ngFor="let button of message.buttons"
class="{{button}}"
(click)="sendButtonCommand(button)">
{{button | capitalize}}
{{buttons[button] | capitalize}}
</button>
</div>
</div>

7
src/app/messages/messages.component.scss
View File

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

10
src/app/messages/messages.component.ts
View File

@ -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<MessageData> = new Subject<MessageData>();
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,

1
src/assets/scss/mixins/_button.scss
View File

@ -12,5 +12,6 @@
line-height: 26px;
height: $space;
margin-right: $tiny;
color: $tao-btn-font-color;
}

1
src/index.html
View File

@ -5,6 +5,7 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" type="text/css">
</head>
<body>
<app-root></app-root>

1
src/styles.scss
View File

@ -8,5 +8,6 @@ body, html {
height: 100vh;
width: 100vw;
overflow: hidden;
@include set-scrollbar-style('light', '');
}