From 09823331d1097729e3c9b3d3af915df996bbc07f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Mon, 25 Jun 2018 16:54:15 +0200
Subject: [PATCH] Implement poc message in queue notifier (chat writing stuff)

---
 src/app/messages/messages.component.html |  5 ++++
 src/app/messages/messages.component.scss | 32 ++++++++++++++++++++++++
 src/app/messages/messages.component.ts   |  2 ++
 3 files changed, 39 insertions(+)

diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index 0a3b24b..26314d7 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -6,6 +6,11 @@
     <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>
+  <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-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index 91651dd..59daafd 100644
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -39,6 +39,38 @@
   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 {
   display: grid;
   grid-template-columns: 1fr 5fr 8fr;
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index b9e77c7..9d9198c 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -19,6 +19,8 @@ import { Subject, Observer } from 'rxjs';
 })
 export class MessagesComponent implements OnInit {
   newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>();
+  messageInQueue = true;
+
   messages: MessagesMessage[] = [];
   messageQueueAttender: MessageQueueAttender;
   showNextButton: boolean = config.messages.showNextButton;