|
@@ -10,46 +10,22 @@
|
|
|
<ion-content class="chat-content">
|
|
|
<ion-list lines="none">
|
|
|
<ion-item *ngFor="let message of messageList" class="message-item">
|
|
|
- <ion-label class="message-container"
|
|
|
- [class.sent-message-container]="message?.get('sendUser')?.id === user?.id"
|
|
|
- [class.received-message-container]="message?.get('receiveUser')?.id === targetId">
|
|
|
- <div class="message-details">
|
|
|
- <p [class.sent-message]="message?.get('sendUser')?.id === user?.id"
|
|
|
- [class.received-message]="message?.get('receiveUser')?.id === targetId"
|
|
|
- class="message-text">{{ message?.get("contentJson")?.content }}</p>
|
|
|
- <div class="message-time">
|
|
|
- <p>{{ message.createdAt|date:'HH:mm:ss' }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </ion-label>
|
|
|
<ion-avatar slot="end" *ngIf="message?.get('sendUser')?.id === user?.id" class="message-avatar sent-avatar">
|
|
|
- <!-- <img [src]="'/assets/img/clock.png'"> -->
|
|
|
- </ion-avatar>
|
|
|
- <ion-avatar slot="start" *ngIf="message?.get('receiveUser')?.id === targetId" class="message-avatar received-avatar">
|
|
|
- <img style="margin-top: 18px;" [src]="'/assets/img/clock.png'">
|
|
|
+ <img [src]="message?.get('sendUser')?.get('avatarUrl')">
|
|
|
</ion-avatar>
|
|
|
- </ion-item>
|
|
|
- </ion-list>
|
|
|
-
|
|
|
- <ion-list lines="none">
|
|
|
- <ion-item *ngFor="let message of messages" class="message-item">
|
|
|
<ion-label class="message-container"
|
|
|
- [class.sent-message-container]="message.type === 'sent'"
|
|
|
- [class.received-message-container]="message.type === 'received'">
|
|
|
- <div class="message-details">
|
|
|
- <p [class.sent-message]="message.type === 'sent'"
|
|
|
- [class.received-message]="message.type === 'received'"
|
|
|
- class="message-text">{{ message.text }}</p>
|
|
|
+ [class.sent-message-container]="message?.get('sendUser')?.id === user?.id"
|
|
|
+ [class.received-message-container]="message?.get('receiveUser')?.id === user?.id">
|
|
|
+ <div class="message-details"
|
|
|
+ [ngClass]="{'sent-message-details': message?.get('sendUser')?.id === user?.id, 'received-message-details': message?.get('receiveUser')?.id === user?.id}">
|
|
|
+ <p class="message-text">{{ message?.get("contentJson")?.content }}</p>
|
|
|
<div class="message-time">
|
|
|
- <p>{{ message.time }}</p>
|
|
|
+ <p>{{ message.createdAt|date:'HH:mm:ss' }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</ion-label>
|
|
|
- <ion-avatar slot="end" *ngIf="message.type === 'sent'" class="message-avatar sent-avatar">
|
|
|
- <img [src]="message.avatar">
|
|
|
- </ion-avatar>
|
|
|
- <ion-avatar slot="start" *ngIf="message.type === 'received'" class="message-avatar received-avatar">
|
|
|
- <img [src]="message.avatar">
|
|
|
+ <ion-avatar slot="start" *ngIf="message?.get('receiveUser')?.id === user?.id" class="message-avatar received-avatar">
|
|
|
+ <img [src]="message?.get('receiveUser')?.get('avatarUrl')">
|
|
|
</ion-avatar>
|
|
|
</ion-item>
|
|
|
</ion-list>
|
|
@@ -62,5 +38,4 @@
|
|
|
<ion-button (click)="sendMessage()" color="primary" [disabled]="!newMessage">Send</ion-button>
|
|
|
</ion-buttons>
|
|
|
</ion-toolbar>
|
|
|
-</ion-footer>
|
|
|
-
|
|
|
+</ion-footer>
|