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; message: string;
} }
export interface MessageButton {
[Key: string]: string;
}
export interface Message extends MessageData, WebSocketMessage {} 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" <button *ngFor="let button of message.buttons"
class="{{button}}" class="{{button}}"
(click)="sendButtonCommand(button)"> (click)="sendButtonCommand(button)">
{{button | capitalize}} {{buttons[button] | capitalize}}
</button> </button>
</div> </div>
</div> </div>

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

@ -3,6 +3,8 @@
@import "../../assets/scss/mixins/button"; @import "../../assets/scss/mixins/button";
.tfw-grid-message { .tfw-grid-message {
font-family: "Roboto";
font-style: normal;
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
grid-row-gap: $nano; grid-row-gap: $nano;
@ -41,7 +43,7 @@
} }
.solution { .solution {
@include set-button-style($tao-green-color); @include set-button-style($tao-blue-color);
width: $xlarge + $medium + $tiny; width: $xlarge + $medium + $tiny;
} }
@ -52,11 +54,12 @@
.fix { .fix {
@include set-button-style($tao-yellow-color); @include set-button-style($tao-yellow-color);
width: $xlarge; width: $xlarge + $medium + $tiny;
} }
.next { .next {
@include set-button-style($tao-blue-color); @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 { 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 { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service'; import { WebSocketService } from '../services/websocket.service';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@ -14,6 +14,14 @@ export class MessagesComponent implements OnInit {
newMessage: Subject<MessageData> = new Subject<MessageData>(); newMessage: Subject<MessageData> = new Subject<MessageData>();
showTypingIndicator = false; showTypingIndicator = false;
messages: MessageData[] = []; messages: MessageData[] = [];
buttons: MessageButton = {
'yes' : 'Yes',
'no' : 'No',
'fix' : 'Ready to fix',
'solution' : 'Show solution',
'hint' : 'Hint',
'next' : 'Next',
};
constructor( constructor(
private markdownService: MarkdownService, private markdownService: MarkdownService,

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

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

1
src/index.html
View File

@ -5,6 +5,7 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/favicon.ico"> <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> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>

1
src/styles.scss
View File

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