-style approve entents for desktop finished

-style expedient  for desktop ongoing

src/app/shared/chat/empty-chat/empty-chat.page.html

@@ -1,5 +1,5 @@
 <ion-content>
   <div class="center height-100">
-    <p>Sem conversa selecionada</p>
+    <p>{{texto}}</p>
   </div>
 </ion-content>

src/app/shared/chat/empty-chat/empty-chat.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-empty-chat',
@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./empty-chat.page.scss'],
 })
 export class EmptyChatPage implements OnInit {
+  @Input() texto:string;
 
   constructor() { }
 

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

@@ -55,7 +55,7 @@
 <ion-footer>
   <div class="container width-100 d-flex">
     <div>
-      <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+      <ion-icon (click)="openSendGroupMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
     </div>
     <div class="width-80">
       <ion-item class="ion-no-padding type-message" lines="none">

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

@@ -187,8 +187,19 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     return await modal.present();
   }
 
+  openSendGroupMessageOptions(ev: any){
+    if(window.innerWidth <= 1024){
+      console.log('mobile');
+      this.openChatOptions(ev);
+    }
+    else{
+      console.log('desktop');
+      this._openChatOptions();
+    }
+  }
 
-  /* async openOptions(ev: any) {
+
+  async openOptions(ev: any) {
     const popover = await this.popoverController.create({
       component: ChatPopoverPage,
       cssClass: 'chat-popover',
@@ -202,10 +213,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     popover.onDidDismiss().then(res=>{
       console.log(res);
       if(res.data){
-        this.roomName = res.data.name.split('-').join(' ');
-        console.log(this.roomName);
-        
-        this.load();
+        this.getRoomInfo();
         //this.modalController.dismiss(); 
       };
       
@@ -241,10 +249,10 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     await modal.present();
 
     modal.onDidDismiss().then(()=>{
-      this.load();
+      this.getRoomInfo();
     });
   }
- */
+
   /* async actionSheet() {
     const actionSheet = await this.actionSheetController.create({
       cssClass: 'my-custom-class',
@@ -271,5 +279,42 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   }
  */
 
+  async _openChatOptions() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: ChatOptionsPopoverPage,
+      cssClass: 'model profile-modal search-submodal',
+      componentProps: {
+        roomId: this.roomId,
+      }
+    });
+    return await modal.present();
+  }
+
 }
 

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

@@ -10,7 +10,7 @@
           <ion-icon  (click)="_openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
         </div>  
       </div>
-      <div class="header-bottom" (click)="addContacts()">
+      <div hidden class="header-bottom" (click)="addContacts()">
         <div class="header-bottom-icon">
           <ion-icon src="assets/icon/icons-user.svg"></ion-icon>
         </div>
@@ -48,7 +48,7 @@
 <ion-footer>
   <div class="container width-100 d-flex">
     <div>
-      <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+      <ion-icon (click)="openSendMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
     </div>
     <div class="width-80">
       <ion-item class="ion-no-padding type-message" lines="none">

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

@@ -147,6 +147,17 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     modal.onDidDismiss();
   }
 
+  openSendMessageOptions(ev:any){
+    if(window.innerWidth <= 1024){
+      console.log('mobile');
+      this.openChatOptions(ev);
+    }
+    else{
+      console.log('desktop');
+      this._openChatOptions();
+    }
+  }
+
   async openChatOptions(ev: any) {
     const popover = await this.popoverController.create({
       component: ChatOptionsPopoverPage,
@@ -208,5 +219,57 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     return await modal.present();
   }
 
+  
+
+  async _openChatOptions() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
+    /* const popover = await this.popoverController.create({
+      component: MessagesOptionsPage,
+      componentProps: {
+        roomId: this.dm._id,
+      },
+      cssClass: 'messages-options',
+      event: ev,
+      translucent: true,
+    });
+    return await popover.present(); */
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: ChatOptionsPopoverPage,
+      cssClass: 'model profile-modal search-submodal',
+      componentProps: {
+        roomId: this.roomId,
+      }
+    });
+    return await modal.present();
+  }
+
+
 }
 

src/app/shared/empty-container/empty-container-routing.module.ts

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

src/app/shared/empty-container/empty-container.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 { EmptyContainerPageRoutingModule } from './empty-container-routing.module';
+
+import { EmptyContainerPage } from './empty-container.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EmptyContainerPageRoutingModule
+  ],
+  declarations: [EmptyContainerPage]
+})
+export class EmptyContainerPageModule {}

src/app/shared/empty-container/empty-container.page.html

@@ -0,0 +1,5 @@
+<ion-content>
+  <div class="center height-100">
+    <p>{{texto}}</p>
+  </div>
+</ion-content>

src/app/shared/empty-container/empty-container.page.scss

@@ -0,0 +1,5 @@
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }

src/app/shared/empty-container/empty-container.page.spec.ts

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

src/app/shared/empty-container/empty-container.page.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-empty-container',
+  templateUrl: './empty-container.page.html',
+  styleUrls: ['./empty-container.page.scss'],
+})
+export class EmptyContainerPage implements OnInit {
+  @Input() texto:string;
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/gabinete-digital/events-to-approve/events-to-approve-routing.module.ts

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

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.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 { EventsToApprovePageRoutingModule } from './events-to-approve-routing.module';
+
+import { EventsToApprovePage } from './events-to-approve.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EventsToApprovePageRoutingModule
+  ],
+  declarations: [EventsToApprovePage]
+})
+export class EventsToApprovePageModule {}

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html

@@ -0,0 +1,68 @@
+<ion-content>
+  <div class="title width-100">
+    <label>Eventos para Aprovação</label>
+    <ion-toolbar>
+      <ion-segment [(ngModel)]="segment">
+        <ion-segment-button value="MDGPR">
+          Seu calendário
+        </ion-segment-button>
+        <ion-segment-button value="PR">
+          Presidente da República
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+   </div>
+  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+     <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div [ngSwitch]="segment">
+   <!--  <div class="header-content width-100"> -->
+     
+  <!-- </div> --> 
+    <ion-list class="width-100" *ngSwitchCase="'MDGPR'">
+      <div class="width-100" *ngIf="eventsMDGPRList">
+        <ion-list>
+          <ion-item-sliding>
+            <ion-item class="Rectangle width-100" lines="none" 
+              *ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber)">
+              
+              <div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
+                <div class="approve-event-time">
+                  <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                  <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+                </div>
+                <div class="approve-event-detail">
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+                </div>
+              </div>
+            </ion-item>
+          </ion-item-sliding>
+        </ion-list>
+      </div>
+    </ion-list>
+    <ion-list *ngSwitchCase="'PR'">
+      <div *ngIf="eventsPRList">
+        <ion-item-sliding>
+          <ion-item class="Rectangle" lines="none" 
+              *ngFor="let event of eventsPRList" (click)="openApproveModal(event.serialNumber)">
+              <div class="content-pr-{{event.workflowInstanceDataFields.Agenda}}">
+                <div class="approve-event-time">
+                  <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                  <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+                </div>
+                <div class="approve-event-detail">
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+                </div>
+              </div>
+            </ion-item>
+        </ion-item-sliding>
+      </div>
+    </ion-list>
+  </div>
+</ion-content>

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss

@@ -0,0 +1,92 @@
+:host{
+    padding: 30px 20px 0 20px !important;
+    margin: 0;
+}
+.title{
+    font-family: Roboto;
+    font-size: 25px;
+    color:#000;
+    overflow: auto;
+  }
+  ion-item-sliding{
+    margin-top: 5px;
+  }
+  .Rectangle {
+    //width: 360px;
+    border-radius: 15px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    border: solid 1px #e9e9e9;
+    background-color: var(--white);
+    margin: 0 auto;
+    padding: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+  }
+  .content-mdgpr-Oficial{
+    border-radius: 5px;
+    border-right: 5px solid #99e47b;
+    overflow: auto;
+  }
+  .content-mdgpr-Pessoal{
+    border-radius: 5px;
+    border-right: 5px solid #958bfc;
+    overflow: auto;
+  }
+  .content-pr-Oficial{
+    border-radius: 5px;
+    border-right: 5px solid #ffb703;
+    overflow: auto;
+  }
+  .content-pr-Pessoal{
+    border-radius: 5px;
+    border-right: 5px solid #f05d5e;
+    overflow: auto;
+  }
+  
+  .approve-event-time{
+    float: left;
+  }
+  .approve-event-time p{
+    width: 33px;
+    font-family: Roboto;
+    font-size: 13px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: var(--Antartic-grey);
+    margin: 0;
+    padding: 0;
+  }
+  .approve-event-detail{
+    float: left;
+    margin-left: 10px;
+  }
+  .approve-event-detail p{
+    width: 250px;
+    font-family: Roboto;
+    font-size: 13px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: var(--black);
+    margin: 0;
+    padding: 0;
+  }
+  .approve-event-detail h3{
+    width: 250px;
+    font-family: Roboto;
+    font-size: 15px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #0d89d1;
+    margin: 0;
+    padding: 0;
+  }
+  

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.spec.ts

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

src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.ts

@@ -0,0 +1,104 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { Event } from 'src/app/models/event.model';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { ModalController, NavParams } from '@ionic/angular';
+import { NavigationEnd, Router } from '@angular/router';
+import { ApproveEventModalPage } from 'src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';
+
+@Component({
+  selector: 'app-events-to-approve',
+  templateUrl: './events-to-approve.page.html',
+  styleUrls: ['./events-to-approve.page.scss'],
+})
+export class EventsToApprovePage implements OnInit {
+
+  //segment:string;
+  showLoader: boolean;
+  eventsPRList: any;
+  eventsMDGPRList: any;
+  eventPerson: EventPerson;
+  eventBody: EventBody;
+  categories: string[];
+  serialnumber:string;
+
+  @Input() segment:string;
+
+  constructor(
+    private processes:ProcessesService,
+    private modalController: ModalController,
+    private router: Router,
+    //private navParams: NavParams,
+    ) { }
+S
+  ngOnInit() {
+    //this.segment = this.navParams.get('segment');
+    /* console.log(this.navParams.get('md')); */
+    console.log(this.segment);
+    this.LoadToApproveEvents();
+    
+
+    this.router.events.forEach((event) => {
+      if(event instanceof NavigationEnd && event.url == this.router.url) {
+        this.LoadToApproveEvents();
+      }
+    });
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth <= 1024){
+        this.modalController.dismiss();
+      }
+    };
+
+  }
+
+  LoadToApproveEvents(){
+    this.showLoader = true;
+    
+    this.processes.GetToApprovedEvents('PR','false').subscribe(res=>{
+      this.showLoader = false;
+      this.eventsPRList = res;
+    });
+    this.processes.GetToApprovedEvents('MDGPR','false').subscribe(res=>{
+      this.showLoader = false;
+      this.eventsMDGPRList = res;
+    });
+  }
+  async openApproveModal(eventSerialNumber){
+
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'cal-modal  modal modal-desktop'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
+    const modal = await this.modalController.create({
+      component: ApproveEventModalPage,
+      componentProps:{
+        serialNumber: eventSerialNumber,
+      },
+      cssClass: classs,
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+  doRefresh(event) {
+    this.LoadToApproveEvents();
+    console.log('refresh');
+    setTimeout(() => {
+       event.target.complete();
+     }, 2000);
+  }
+  close(){
+    this.modalController.dismiss(null);
+  }
+
+
+}

src/app/shared/gabinete-digital/expediente/expediente.page.html

@@ -4,7 +4,7 @@
       <div class="title-content">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">Gabinete Digital</ion-label>
+          <ion-label class="title">11Gabinete Digital</ion-label>
         </div>
       </div>
     </div>

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

@@ -1,5 +1,17 @@
-<ion-content>
-  <ion-row>
+<ion-content class="container">
+  <div class="arrow-right">
+    <ion-icon (click)="close()" slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
+  </div>
+  <div class="buttons">
+    <button full class="btn-ok" shape="round" >Tirar Fotografia</button>
+    <button class="btn-ok" shape="round" >Digitalizar Documento</button>
+    <button full class="btn-ok" shape="round" >Anexar Fotografia</button>
+    <button class="btn-ok" shape="round" >Anexar Documento</button>
+    <div class="solid"></div>
+    <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
+  </div>
+
+  <!-- <ion-row>
     <ion-col>
       <button full class="btn-ok" shape="round" >Tirar Fotografia</button>
     </ion-col>
@@ -19,5 +31,5 @@
     </ion-col>
     <ion-col>
     </ion-col>
-  </ion-row>
+  </ion-row> -->
 </ion-content>

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

@@ -1,32 +1,47 @@
-ion-row{
-    padding: 10px 10px 5px 10px;
-}
-.border-top{
-    padding-top: 5px !important;
-    border-top: 1px solid #ebebeb;
-}
-/* ion-col{
-    border: 1px solid red;
-} */
-.btn-cancel{
-    display: block;
-    width: 170px !important;
-    height: 45px !important;
-    border-radius: 22.5px;
-    background-color:  #e0e9ee;
-    --color: #061b52 !important;
-    --background:transparent;
-    --box-shadow: none;
-    margin: 0 auto !important;
+.container{
+    --padding-top:20px !important;
+   --padding-bottom:20px !important;
+   --padding-start:20px !important;
+   --padding-end:20px !important;
   }
+  .arrow-right{
+    display: none;
+    margin-bottom: 20px;
+    .arrow-right-icon{
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
+  }
+  .buttons{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-.btn-ok{
-    display: block;
-    width: 170px !important;
-    height: 45px !important;
-    border-radius: 22.5px;
-    --background: #42b9fe;
-    --color: #ffffff !important;
+    .btn-ok, .btn-cancel, .btn-delete{
+        margin-bottom: 10px !important;
+    }
+  }
+  .solid {
+    display: none;
+    width: 90%;
+    border-top: 1px solid #bbb;
     margin: 0 auto !important;
-
+    margin-bottom: 10px;
+  }
+  @media only screen and (min-width: 1024px) {
+    .arrow-right{
+        display: flex;
+        justify-content: flex-end;
+    }
+    .btn-cancel{
+        display: none;
+    }
+    .btn-ok{
+      width: 100% !important;
+  }
+    .mobile-only{
+      display: none !important;
+    }
   }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+import { ModalController, PopoverController } from '@ionic/angular';
 
 @Component({
   selector: 'app-chat-options-popover',
@@ -9,14 +9,20 @@ import { PopoverController } from '@ionic/angular';
 export class ChatOptionsPopoverPage implements OnInit {
 
   constructor(
-    private popoverController: PopoverController
+    private popoverController: PopoverController,
+    private modalController: ModalController,
   ) { }
 
   ngOnInit() {
   }
 
   close(){
-    this.popoverController.dismiss();
+    if( window.innerWidth <= 1024){
+      this.popoverController.dismiss();
+    }
+    else{
+      this.modalController.dismiss();
+    }
   }
 
 }

src/app/shared/popover/chat-popover/chat-popover.page.html

@@ -9,20 +9,4 @@
     <button (click)="close()" full class="btn-cancel mobile-only" shape="round" >Cancelar</button>
     <button (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
   </div>
-  <!-- <ion-row>
-    <ion-col>
-      <button (click)="leaveGroup()" class="btn-cancel" shape="round" >Sair do Grupo</button>
-    </ion-col>
-    <ion-col>
-      <button (click)="openChangeGroupName()" class="btn-ok" shape="round" >Alterar nome do grupo</button>
-    </ion-col>
-  </ion-row>
-  <ion-row class="border-top">
-    <ion-col>
-      <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
-    </ion-col>
-    <ion-col>
-      <button (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
-    </ion-col>
-  </ion-row> -->
 </ion-content>