mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-03 11:52:40 +00:00
Code Issues Releases Wiki Activity

Implement poc message in queue notifier (chat writing stuff)

Browse Source
This commit is contained in:
Kristóf Tóth 2018-06-25 16:54:15 +02:00
parent 9af0467489
commit 09823331d1
3 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,11 @@
<div class="tao-grid-top-left"><span>Instructions</span></div> <div class="tao-grid-top-left"><span>Instructions</span></div>
<div class="tao-grid-center-right"><button *ngIf="showNextButton" (click)="stepFSM()" class="tao-btn-rainbow">Next</button></div> <div class="tao-grid-center-right"><button *ngIf="showNextButton" (click)="stepFSM()" class="tao-btn-rainbow">Next</button></div>
</div> </div>
<div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
<div class="jumping-circle" id="jc1"></div>
<div class="jumping-circle" id="jc2"></div>
<div class="jumping-circle" id="jc3"></div>
</div>
<div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()"> <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
<div class="tfw-grid-message-header"> <div class="tfw-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/> <img class="tao-grid-center-left" src="images/avataobot.svg"/>

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

@ -39,6 +39,38 @@
100% { transform: scale(1,1); } 100% { transform: scale(1,1); }
} }
.jumping-circle-container {
display: flex;
padding-top: 1.3em;
padding-bottom: 1em;
}
.jumping-circle {
width: 0.35em;
height: 0.35em;
border-radius: 50%;
background-color: gray;
margin-top: 0.3em;
margin-left: 0.3em;
animation-name: float;
animation-duration: 1.7s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#jc2 { animation-delay: 0.2s; }
#jc3 { animation-delay: 0.45s; }
@keyframes float {
0% { transform: translateY(0em); }
30% { transform: translateY(-0.5em); }
60% { transform: translateY(0.2em); }
80% { transform: translateY(0em); }
90% { transform: translateY(-0.5em); }
100% { transform: translateY(0em); }
}
.tfw-grid-message-header { .tfw-grid-message-header {
display: grid; display: grid;
grid-template-columns: 1fr 5fr 8fr; grid-template-columns: 1fr 5fr 8fr;

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

@ -19,6 +19,8 @@ import { Subject, Observer } from 'rxjs';
}) })
export class MessagesComponent implements OnInit { export class MessagesComponent implements OnInit {
newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>(); newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>();
messageInQueue = true;
messages: MessagesMessage[] = []; messages: MessagesMessage[] = [];
messageQueueAttender: MessageQueueAttender; messageQueueAttender: MessageQueueAttender;
showNextButton: boolean = config.messages.showNextButton; showNextButton: boolean = config.messages.showNextButton;