frontend-tutorial-framework/src/app/messages/messages.component.html

31 lines
1.2 KiB
HTML

<div class="tfw-messages-main">
<div class="tfw-grid-message"
*ngFor="let message of messages.slice(); let last = last"
[class.highlighted-message]="last"
(click)="sendMessageCommand(message)">
<div class="tfw-grid-message-header">
<div class="tao-grid-center-left originator">{{message.originator}}</div>
<div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
</div>
<div class="tfw-grid-message-body" [innerHtml]="message.message | safeHtml"></div>
<div *ngIf="message.buttons !== undefined">
<div class="tfw-message-btn-divider"></div>
<div class="tfw-message-btn">
<button *ngFor="let button of message.buttons"
class="{{button}}"
(click)="sendButtonCommand(button)">
{{buttons[button] | capitalize}}
</button>
</div>
</div>
</div>
<div *ngIf="showTypingIndicator"
class="tfw-grid-message jumping-circle-container"
(click)="drainMessageQueue()">
<div class="jumping-circle" id="jc1"></div>
<div class="jumping-circle" id="jc2"></div>
<div class="jumping-circle" id="jc3"></div>
</div>
</div>