show selection of message to delete

src/app/pages/chat/messages/messages.page.html

@@ -7,7 +7,8 @@
       <div class="header-top">
         <div class="left">
           <button class="btn-no-color" (click)="close()">
-            <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+            <!-- <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon> -->
+            <fa-icon icon="chevron-left" class="header-top-btn"></fa-icon>
           </button>
         </div>
         <div class="middle-container" *ngIf="!showMessageOptions">
@@ -17,7 +18,7 @@
           </div>
         </div>
         <div class="middle-container-options" *ngIf="showMessageOptions">
-          <fa-icon icon="trash" class="middle-container-options-icons"></fa-icon>
+          <fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
           <!-- <ion-icon name="trash"></ion-icon> -->
         </div>
         <div hidden class="right">
@@ -46,49 +47,45 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="messages" #scrollMe>
-    <div (click)="handleClick() " (press)="handlePress()" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' *ngFor="let msg of chatMessageStore.message[roomId] ; let last = last">
-      <!-- <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)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
-        </mat-menu>
-      </div> -->
-
-      <div class="title">
-        <ion-label>{{msg.u.name}}</ion-label>
-        <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
-      </div>
-      <div>
-        <ion-label>{{msg.msg}}</ion-label>
-        <div *ngIf="msg.attachments" class="message-attachments">
-          <div *ngFor="let file of msg.attachments">
-            <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
-            <div>
+  <div (click)="handleClick()" class="messages" #scrollMe>
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last"
+    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
+      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+        <div class="title">
+          <ion-label>{{msg.u.name}}</ion-label>
+          <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
+        </div>
+        <div>
+          <ion-label>{{msg.msg}}</ion-label>
+          <div *ngIf="msg.attachments" class="message-attachments">
+            <div *ngFor="let file of msg.attachments">
+              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
               <div>
-                <div class="file">
-                  <!-- <canvas id="pdf_canvas"></canvas> -->
-                  <ion-label class="file-details" *ngIf="msg.file">
-                    <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
-                      <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
-                      <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
-                      <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
-                      {{file.title}}
-                    </span>
-                  </ion-label>
-                </div>
-                <div class="file-details-optional">
-                  <ion-label *ngIf="msg.file">
-                    <span *ngIf="file.description">{{file.description}}</span>
-                    <span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
-                    <span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
-                  </ion-label>
+                <div>
+                  <div class="file">
+                    <!-- <canvas id="pdf_canvas"></canvas> -->
+                    <ion-label class="file-details" *ngIf="msg.file">
+                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                        <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
+                        <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
+                        <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
+                        {{file.title}}
+                      </span>
+                    </ion-label>
+                  </div>
+                  <div class="file-details-optional">
+                    <ion-label *ngIf="msg.file">
+                      <span *ngIf="file.description">{{file.description}}</span>
+                      <span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
+                      <span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
+                    </ion-label>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          {{last ? scrollToBottom() : ''}}
         </div>
-        {{last ? scrollToBottom() : ''}}
       </div>
     </div>
   </div>

src/app/pages/chat/messages/messages.page.scss

@@ -22,10 +22,18 @@
           background: #fff;
 
           .left{
-            width: 37px;
+            width: fit-content;
             float: left;
-            font-size: 35px;
+            //font-size: 35px;
             overflow: hidden;
+
+            .header-top-btn{
+              background: transparent;
+              font-size: 25px !important;
+              font-weight: 100 !important;
+              /* color: #0782c9; */
+              color: #42b9fe;
+            }
           }
 
           .middle-container{
@@ -36,7 +44,7 @@
               padding: 0!important;
               float: left;
               width:calc(100% - 77px);
-              margin: 2.5px 0 0 5px;
+              margin: 0px 0 0 10px;
               display: flex;
               align-items: center;
             }
@@ -44,15 +52,15 @@
 
           .middle-container-options{
             padding: 0!important;
-            margin: 5px 0 0 5px;
             float: left;
-            width: calc(100% - 47px);
+            width: calc(100% - 25px);
             text-align: right;
 
             /* ion-icon{
               font-size: 25px;
             } */
             .middle-container-options-icons{
+              color: #0782c9;
               font-size: 23px;
             }
           }
@@ -139,6 +147,17 @@
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 
+    .messages-list-item-wrapper{
+      overflow: auto;
+    }
+    .messages-list-item-wrapper-active{
+      background: #e6f6ff75 !important;
+    }
+
+    .message-container{
+      //border: 1px solid red;
+    }
+
 
     .incoming-true, .incoming-false{
       width: 305px;

src/app/pages/chat/messages/messages.page.ts

@@ -54,10 +54,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
 
   private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
-private currentColor: string = 'rgba(0, 0, 255, 0.5)';
-private lastOnStart: number = 0;
-private DOUBLE_CLICK_THRESHOLD: number = 500;
-showMessageOptions = false;
+  private currentColor: string = 'rgba(0, 0, 255, 0.5)';
+  private lastOnStart: number = 0;
+  private DOUBLE_CLICK_THRESHOLD: number = 500;
+  showMessageOptions = false;
+  selectedMsgId:string;
 
   constructor(
     public popoverController: PopoverController,
@@ -130,7 +131,8 @@ showMessageOptions = false;
     gesture.enable();
   }
 
-  handlePress(){
+  handlePress(id?:string){
+    this.selectedMsgId = id;
     this.showMessageOptions = true;
     /* if(!this.showMessageOptions){
       this.showMessageOptions = true;
@@ -142,6 +144,7 @@ showMessageOptions = false;
 
   handleClick(){
     this.showMessageOptions = false;
+    this.selectedMsgId = "";
   }
 
   private onStart() {
@@ -185,7 +188,14 @@ showMessageOptions = false;
       "msgId": msgId,
       "asUser": false,
     }
-    this.alertService.confirmDeleteMessage(body);
+    if(msgId){
+      this.alertService.confirmDeleteMessage(body);
+    }
+    else{
+      this.toastService.badRequest('Não foi possível apagar');
+    }
+    this.showMessageOptions = false;
+    this.selectedMsgId = "";
   }
 
   setStatus(status:string){