add reaction to chat

This commit is contained in:
Peter Maquiran
2024-08-02 11:34:57 +01:00
parent 8774cef0b2
commit efc7f72042
10 changed files with 245 additions and 21 deletions
+24 -11
View File
@@ -44,21 +44,34 @@
<div class="messages height-100 width-100 d-flex flex-column" #scrollMe>
<div
*ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper"
[ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
<div class="message-container">
{{ message.message }} .== {{ message.id }}
*ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper"
[ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
<div class="message-container">
{{ message.message }} .== {{ message.id }}
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
</fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div>
<div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
<button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
</mat-menu>
</div>
<!-- Emoji Picker -->
<div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
<span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
{{ emoji }}
</span>
</div>
</div>
<!-- current emoji -->
<div>
<span *ngFor="let reaction of message.reactions" class="emoji-icon">
{{ reaction.reaction }}
</span>
</div>
</div>
</div>