/
messages.html
45 lines (38 loc) · 1.76 KB
/
messages.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<ion-header>
<ion-navbar color="whatsapp" class="messages-page-navbar">
<ion-buttons>
<img class="chat-picture" [src]="picture">
</ion-buttons>
<ion-title class="chat-title">{{title}}</ion-title>
<ion-buttons end>
<button ion-button icon-only class="attach-button"><ion-icon name="attach"></ion-icon></button>
<button ion-button icon-only class="options-button" (click)="showOptions()"><ion-icon name="more"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding class="messages-page-content">
<ion-scroll scrollY="true" class="messages">
<div *ngFor="let day of messagesDayGroups | async" class="day-wrapper">
<div *ngFor="let message of day.messages" class="message-wrapper">
<div [class]="'message message-' + message.ownership">
<div *ngIf="message.type == 'text'" class="message-content message-content-text">{{message.content}}</div>
<span class="message-timestamp">{{ message.createdAt | amDateFormat: 'HH:mm' }}</span>
</div>
</div>
<div *ngIf="!day.today" class="day-timestamp">{{day.timestamp}}</div>
</div>
</ion-scroll>
</ion-content>
<ion-footer>
<ion-toolbar color="whatsapp" class="messages-page-footer" position="bottom">
<ion-input [(ngModel)]="message" (keypress)="onInputKeypress($event)" class="message-editor" placeholder="Type a message"></ion-input>
<ion-buttons end>
<button ion-button icon-only *ngIf="message" class="message-editor-button" (click)="sendTextMessage()">
<ion-icon name="send"></ion-icon>
</button>
<button ion-button icon-only *ngIf="!message" class="message-editor-button">
<ion-icon name="mic"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>