add messages page and style

src/app/app-routing.module.ts

@@ -1,83 +1,87 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
-  },
-  {
-    path: '',
-    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
-  },
-  {
-    path: 'events',
-    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
-  },
-  {
-    path: 'chat',
-    loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule)
-  },
-  {
-    path: 'publications',
-    loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header-pr',
-    loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule)
-  },
-  {
-    path: 'btn-seguinte',
-    loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule)
-  },
-  {
-    path: 'btn-modal-dismiss',
-    loadChildren: () => import('./shared/btn-modal-dismiss/btn-modal-dismiss.module').then( m => m.BtnModalDismissPageModule)
-  },
-  {
-    path: 'chat-popover',
-    loadChildren: () => import('./shared/popover/chat-popover/chat-popover.module').then( m => m.ChatPopoverPageModule)
-  },
-  {
-    path: 'chat-options-popover',
-    loadChildren: () => import('./shared/popover/chat-options-popover/chat-options-popover.module').then( m => m.ChatOptionsPopoverPageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
+  },
+  {
+    path: '',
+    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+  },
+  {
+    path: 'events',
+    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
+  },
+  {
+    path: 'chat',
+    loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule)
+  },
+  {
+    path: 'publications',
+    loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule)
+  },
+  {
+    path: 'header',
+    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
+  },
+  {
+    path: 'header',
+    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
+  },
+  {
+    path: 'header-pr',
+    loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule)
+  },
+  {
+    path: 'btn-seguinte',
+    loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule)
+  },
+  {
+    path: 'btn-modal-dismiss',
+    loadChildren: () => import('./shared/btn-modal-dismiss/btn-modal-dismiss.module').then( m => m.BtnModalDismissPageModule)
+  },
+  {
+    path: 'chat-popover',
+    loadChildren: () => import('./shared/popover/chat-popover/chat-popover.module').then( m => m.ChatPopoverPageModule)
+  },
+  {
+    path: 'chat-options-popover',
+    loadChildren: () => import('./shared/popover/chat-options-popover/chat-options-popover.module').then( m => m.ChatOptionsPopoverPageModule)
+  },
+  {
+    path: 'messages-options',
     loadChildren: () => import('./shared/popover/messages-options/messages-options.module').then( m => m.MessagesOptionsPageModule)
   },
-
- /*  {
-    path: 'cal-modal',
-    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
-  }, */
-  /* {
-    path: 'events',
-    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
-  }, */
-
-  /* 
-  {
-    path: 'gabinete-digital-menu',
-    loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule)
-  },
-
-
-  {
-    path: 'view-event',
-    loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule)
-  }, */
-
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+
+
+ /*  {
+    path: 'cal-modal',
+    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
+  }, */
+  /* {
+    path: 'events',
+    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
+  }, */
+
+  /* 
+  {
+    path: 'gabinete-digital-menu',
+    loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule)
+  },
+
+
+  {
+    path: 'view-event',
+    loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule)
+  }, */
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})

src/app/pages/chat/chat-routing.module.ts

@@ -22,6 +22,10 @@ const routes: Routes = [
   },
   {
     path: 'group-messages',
+    loadChildren: () => import('./group-messages/group-messages.module').then( m => m.GroupMessagesPageModule)
+  },
+  {
+    path: 'messages',
     loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule)
   }
 

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

@@ -37,7 +37,7 @@
     <ion-list *ngSwitchCase="'Contactos'">
       <ion-item-group>
         <ion-item-sliding>
-            <ion-item *ngFor="let user of userConnectedList" (click)="startConversation(user)"> 
+            <ion-item *ngFor="let user of userConnectedList" (click)="openMessages()"> 
               <ion-icon slot="start" src="assets/images/icons-chat-chat-40.svg" class="iconschatchat-40"></ion-icon>
               <div>
                 <h3>{{user.name}}</h3>
@@ -48,10 +48,10 @@
               <div class="item-icon">
                 <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
               </div>
-              <div class="item-content">
+              <div (click)="openMessages()" class="item-content">
                 <div class="item-title-time">
                   <div class="item-title">
-                    <ion-label>Secretário Assuntos Sociais</ion-label>
+                    <ion-label>Secretário para o sector Produtivo</ion-label>
                   </div>
                   <div class="item-date">15:00</div>
                 </div>
@@ -64,15 +64,31 @@
               <div class="item-icon">
                 <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
               </div>
-              <div class="item-content">
+              <div (click)="openMessages()" class="item-content">
                 <div class="item-title-time">
                   <div class="item-title">
-                    <ion-label>Secretário para o Sector Produtivo</ion-label>
+                    <ion-label>Secretário para o sector Produtivo</ion-label>
                   </div>
-                  <div class="item-date">Ontem</div>
+                  <div class="item-date">15:00</div>
                 </div>
                 <div class="item-description">
-                  <p>Viva!</p>
+                  <p>Podemos marcar reunião para amanha</p>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="item-icon">
+                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
+              </div>
+              <div (click)="openMessages()" class="item-content">
+                <div class="item-title-time">
+                  <div class="item-title">
+                    <ion-label>Secretário para o sector Produtivo</ion-label>
+                  </div>
+                  <div class="item-date">15:00</div>
+                </div>
+                <div class="item-description">
+                  <p>Podemos marcar reunião para amanha</p>
                 </div>
               </div>
             </div>

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

@@ -4,6 +4,7 @@ import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
 import { ConversationPage } from './conversation/conversation.page';
 import { GroupMessagesPage } from './group-messages/group-messages.page';
+import { MessagesPage } from './messages/messages.page';
 import { NewGroupPage } from './new-group/new-group.page';
 import { NewchatPage } from './newchat/newchat.page';
 
@@ -87,6 +88,15 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
+  async openMessages(){
+    const modal = await this.modalController.create({
+      component: MessagesPage,
+      cssClass: 'group-messages',
+      backdropDismiss: false,
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
   async openGroupMessages(){
     const modal = await this.modalController.create({
       component: GroupMessagesPage,

src/app/pages/chat/messages/messages-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MessagesPage } from './messages.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MessagesPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MessagesPageRoutingModule {}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesPageRoutingModule } from './messages-routing.module';
+
+import { MessagesPage } from './messages.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    MessagesPageRoutingModule
+  ],
+  declarations: [MessagesPage]
+})
+export class MessagesPageModule {}

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

@@ -0,0 +1,108 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="header-top">
+        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <div class="middle">
+          <ion-label class="title">Bruno Faria</ion-label>
+          <span><ion-icon class="user-status-online" name="ellipse"></ion-icon></span>
+        </div>
+        <div class="right">
+          <ion-icon  (click)="openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
+        </div>  
+      </div>
+      <div class="header-bottom" (click)="addContacts()">
+        <div class="header-bottom-icon">
+          <ion-icon src="assets/icon/icons-user.svg"></ion-icon>
+        </div>
+        <div class="header-bottom-contacts">
+          <ion-label class="text-color-blue">Adicionar contacto</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="messages">
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <img src='assets/images/1.jpg' tappable>
+        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Presidente da República</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Pois é, momentos históricos</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Ministro do interior</ion-label>
+        <span class="time">16:23</span>
+      </div>
+      <div>
+        <ion-label>Grande momento</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+  </div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-row align-items-center class="row">
+      <ion-col size="1">
+        <ion-label class="ion-no-padding" lines="none">
+          <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+      <ion-col size="9">
+        <ion-item class="ion-no-padding type-message" lines="none">
+          <ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+        </ion-item>
+      </ion-col>
+      <ion-col size="2">
+        <!-- [disabled]="message === ''" -->
+        <ion-label>
+          <ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

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

@@ -0,0 +1,166 @@
+@import '~src/function.scss';
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+    .main-header{
+        width: 100%; /* 400px */
+        height: 100%;
+        font-family: Roboto;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        background-color: #fff;
+        overflow:hidden;
+        padding: 30px 20px 0px 20px;
+        color:#000;
+        transform: translate3d(0, 1px, 0);
+        
+        .header-top{
+          width: 360px;
+          margin: 0px auto;
+          overflow: auto;
+          padding: 0 !important;
+          background: #fff;
+           .middle{
+            padding: 0!important;
+            float: left;
+            width: 280px;
+            margin: 2.5px 0 0 5px;
+          }
+          .right{
+            padding: 0!important;
+            float: right;
+            font-size: 25px;
+            color: #0782c9;
+            margin: 5px 0 0 0;
+          }
+        }
+        .header-bottom{
+          width: 310px;
+          overflow: auto;
+          margin: 0 auto;
+
+          .header-bottom-icon{
+            width: 30px;
+            font-size: 25px;
+            float: left;
+            padding: 2px;
+
+          }
+          .header-bottom-contacts{
+            width: 275px;
+            font-size: 15px;
+            color: #797979;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            float: left;
+            padding: 5px;
+            margin: 1px;
+          }
+        }
+    
+        .title{
+          font-size: 25px;
+        }
+        .div-icon{
+          width: 40px;
+          float: right;
+          font-size: 35px;
+          overflow: auto;
+          padding: 1px;
+        }
+        .div-icon ion-icon{
+          float: right;
+          padding-left: 20px;
+        } 
+    }
+ }
+ ion-content{
+   .welcome-text{
+    /* width: 322px; */
+     width: em(422px);
+     background: #ebebeb;
+     text-align: center;
+     font-size: 13px;
+     color: #797979;
+     padding: 10px;
+     margin: 0 auto;
+     line-height: 1.2rem;
+     margin: 20px 39px 25px;
+     border-radius: 8px;
+   }
+   .messages{
+    font-size: 13px;
+    font-family: Roboto;
+    overflow: auto;
+
+    .incoming, .outgoing{
+      width: 305px;
+       padding: 15px 20px;
+       border-radius: 10px;
+    }
+
+     .incoming{
+      margin: 10px 75px 10px 20px;
+       background: #ebebeb;
+       float: left;
+       
+       }
+     }
+     .outgoing{
+      margin: 10px 20px 10px 75px;
+       background: #e4f4fe;
+       float: right;
+     }
+     .title{
+         display: inline;
+      color: #0782c9;
+      font-weight: bold;
+      margin-bottom: 5px;
+
+      .time{
+        color: #797979;
+        text-align: right;
+        float: right;
+      }
+   }
+ }
+
+ ion-footer{
+   .row{
+     width: 380px;
+    margin: 0 auto;
+   }
+
+  .chat-icon-options{
+    display:block !important;
+    font-size: 25px;
+    float: right !important;
+    margin-top: 10px;
+  }
+
+  .chat-icon-send{
+    font-size: 45px;
+    margin: 0 auto;
+    margin-top: 4px;
+  }
+
+   ion-col .type-message{
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    padding-left: 15px;
+  }
+ }
+
+ .text-color-blue{
+    font-size: 15px;
+    color: #0782c9;
+    font-weight: 500;
+    letter-spacing: normal;
+ }
+ .user-status-online{
+     display: block;
+    float: left;
+    color:#99e47b;
+ }

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesPage } from './messages.page';
+
+describe('MessagesPage', () => {
+  let component: MessagesPage;
+  let fixture: ComponentFixture<MessagesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MessagesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, PopoverController } from '@ionic/angular';
+import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
+import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
+import { ContactsPage } from '../new-group/contacts/contacts.page';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.page.html',
+  styleUrls: ['./messages.page.scss'],
+})
+export class MessagesPage implements OnInit {
+
+  constructor(
+    public popoverController: PopoverController,
+    private modalController: ModalController,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  async openMessagesOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: MessagesOptionsPage,
+      cssClass: 'messages-options',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+  async addContacts(){
+    const modal = await this.modalController.create({
+      component: ContactsPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+}

src/app/shared/popover/messages-options/messages-options-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MessagesOptionsPage } from './messages-options.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MessagesOptionsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MessagesOptionsPageRoutingModule {}

src/app/shared/popover/messages-options/messages-options.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesOptionsPageRoutingModule } from './messages-options-routing.module';
+
+import { MessagesOptionsPage } from './messages-options.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MessagesOptionsPageRoutingModule
+  ],
+  declarations: [MessagesOptionsPage]
+})
+export class MessagesOptionsPageModule {}

src/app/shared/popover/messages-options/messages-options.page.html

@@ -0,0 +1,10 @@
+<ion-content>
+  <ion-row class="border-top">
+    <ion-col>
+      <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
+    </ion-col>
+    <ion-col>
+      <button full class="btn-delete" shape="round" >Apagar conversa</button>
+    </ion-col>
+  </ion-row>
+</ion-content>

src/app/shared/popover/messages-options/messages-options.page.scss

@@ -0,0 +1,3 @@
+ion-row{
+    padding: 10px 10px 5px 10px;
+}

src/app/shared/popover/messages-options/messages-options.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesOptionsPage } from './messages-options.page';
+
+describe('MessagesOptionsPage', () => {
+  let component: MessagesOptionsPage;
+  let fixture: ComponentFixture<MessagesOptionsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesOptionsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MessagesOptionsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/popover/messages-options/messages-options.page.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-messages-options',
+  templateUrl: './messages-options.page.html',
+  styleUrls: ['./messages-options.page.scss'],
+})
+export class MessagesOptionsPage implements OnInit {
+
+  constructor(
+    private popoverController: PopoverController
+  ) { }
+
+  ngOnInit() {
+  }
+
+  close(){
+    this.popoverController.dismiss();
+  }
+
+}

src/app/shared/shared.module.ts

@@ -19,14 +19,12 @@ import { ChatPopoverPage } from './popover/chat-popover/chat-popover.page';
     HeaderPrPage, 
     BtnSeguintePage,
     BtnModalDismissPage,
-    ChatPopoverPage,
   ],
   entryComponents:[],
   declarations: [HeaderPage, 
     HeaderPrPage, 
     BtnSeguintePage,
     BtnModalDismissPage,
-    ChatPopoverPage,
   ]
 })
 export class SharedModule {}

src/theme/variables.scss

@@ -281,6 +281,15 @@
   max-height: 160px;
   min-height: 160px; 
 }
+.messages-options .popover-content{
+  width: 100% !important;
+  left: 0 !important;
+  bottom: 0 !important;
+  right: 0 !important;
+  top: calc(100% - 90px) !important;
+  max-height: 90px;
+  min-height: 90px;
+}
 .chat-options-popover .popover-content{
   width: 100% !important;
   left: 0 !important;