mrtoth/frontend-tutorial-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reverse order of messaging messages

Browse Source
This commit is contained in:
Kristóf Tóth
2018-06-26 14:13:29 +02:00
parent c6f9edc9f7
commit 8a2518fbd0
5 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/messages/messages.component.html
+7 -8
View File
@@ -3,17 +3,11 @@
<div class="tfw-messages-main">
<div class="tfw-grid-messages-header">
<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(); let first = first"
[class.highlighted-message]="first">
*ngFor="let message of messages.slice(); let last = last"
[class.highlighted-message]="last">
<div class="tfw-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/>
<div class="tao-grid-center-left originator">{{message.originator}}</div>
@@ -21,4 +15,9 @@
</div>
<div [innerHtml]="message.message"></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>