Merge branch 'developer' of bitbucket.org:equilibriumito/gabinete-digital into developer

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

@@ -2,13 +2,25 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <!-- <app-btn-modal-dismiss></app-btn-modal-dismiss> -->
-        <div class="middle">
+        <div class="left">
-          <ion-label class="title">{{roomName}}</ion-label>
+          <button class="btn-no-color" (click)="close()">
+            <!-- <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">
+          <div class="middle">
+            <ion-label class="title">{{roomName}}</ion-label>
+          </div>
+        </div>
+        <div class="middle-container-options" *ngIf="showMessageOptions">
+          <fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
         </div>
         <div class="right">
           <button class="btn-no-color" (click)="openOptions()">
-            <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
+           <!--  <ion-icon src="assets/images/icons-menu.svg"></ion-icon> -->
+            <fa-icon icon="ellipsis-v" class="header-top-btn"></fa-icon>
           </button>
         </div>
       </div>
@@ -34,13 +46,13 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="messages overflow-y-auto" #scrollMe>
+  <div (click)="handleClick()" class="messages overflow-y-auto" #scrollMe>
     <div class="welcome-text">
       <ion-label>Esta conversa passou a grupo</ion-label><br />
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
-    <div *ngFor="let msg of messages; let last = last" >
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
+      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (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>

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

@@ -19,18 +19,49 @@
           overflow: auto;
           padding: 0 !important;
           background: #fff;
-           .middle{
+
+          .left{
+            width: fit-content;
+            float: left;
+            //font-size: 35px;
+            overflow: hidden;
+          }
+
+          .middle-container{
+            overflow: auto;
+            height: auto;
+            width:calc(100% - 57px);
+            float: left;
+
+            .middle{
+              padding: 0!important;
+              margin: 0 0 0 10px;
+            }
+          }
+          .middle-container-options{
             padding: 0!important;
             float: left;
-            width:calc(100% - 77px);
+            width: calc(100% - 67px);
-            margin: 2.5px 0 0 5px;
+            text-align: right;
+
+            .middle-container-options-icons{
+              color: #0782c9;
+              font-size: 23px;
+            }
           }
           .right{
             padding: 0!important;
             float: right;
             font-size: 25px;
             color: #0782c9;
-            margin: 5px 0 0 0;
+          }
+          .header-top-btn{
+            background: transparent;
+            font-size: 25px !important;
+            font-weight: 100 !important;
+            /* color: #0782c9; */
+            color: #42b9fe;
+            padding: 0 5px 0 5px;
           }
         }
         .header-bottom{
@@ -145,6 +176,18 @@
     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;
        padding: 15px 20px;

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

@@ -51,6 +51,10 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   attendees: EventPerson[] = [];
   scrollToBottomBtn = false;
 
+  longPressActive = false;
+  showMessageOptions = false;
+  selectedMsgId:string;
+
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
   constructor(
@@ -99,11 +103,37 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     })
   }
 
+  deleteMessage(msgId:string){
+    let body = {
+      "roomId": this.roomId,
+      "msgId": msgId,
+      "asUser": false,
+    }
+    if(msgId){
+      this.alertService.confirmDeleteMessage(body);
+    }
+    else{
+      this.toastService.badRequest('Não foi possível apagar');
+    }
+    this.showMessageOptions = false;
+    this.selectedMsgId = "";
+  }
+
   ngAfterViewInit() {
     this.scrollChangeCallback = () => this.onContentScrolled(event);
     window.addEventListener('scroll', this.scrollChangeCallback, true);
   }
 
+  handlePress(id?:string){
+    this.selectedMsgId = id;
+    this.showMessageOptions = true;
+  }
+
+  handleClick(){
+    this.showMessageOptions = false;
+    this.selectedMsgId = "";
+  }
+
   onContentScrolled(e) {
     this.startPosition = e.srcElement.scrollTop;
     let scroll = e.srcElement.scrollTop;

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

@@ -51,12 +51,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   scrollToBottomBtn = false;
   attendees: EventPerson[] = [];
   longPressActive = false;
-
-
-  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;
   selectedMsgId:string;
 
@@ -147,25 +141,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.selectedMsgId = "";
   }
 
-  private onStart() {
-    alert('OP');
-    const now = Date.now();
-
-    if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
-      this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
-      this.lastOnStart = 0;
-    } else {
-      this.lastOnStart = now;
-    }
-  }
-
-  private getRandomBackground() {
-    const options = this.backgrounds.filter(bg => bg !== this.currentColor);
-    this.currentColor = options[Math.floor(Math.random() * options.length)];
-
-    return this.currentColor;
-  }
-
   /* onPressingMessage(){
     const gesture = this.gestureController.create({
       el: this.messageContainer.nativeElement,