From b77549f2a2bb9e72f58d9bb3b5f82c480f84c640 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Fri, 26 Mar 2021 10:12:07 +0100
Subject: [PATCH 01/11] improve style of events to approve list in desktop

---
 .../expediente-detail.page.scss               |   5 +-
 .../approve-event.component.html              |   4 +-
 .../approve-event.component.scss              |   1 +
 .../events-to-approve.page.html               |  55 +++----
 .../events-to-approve.page.scss               | 154 +++++++++---------
 5 files changed, 107 insertions(+), 112 deletions(-)

diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
index ac378214b..c424dc06d 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
@@ -210,11 +210,12 @@ ion-button{
     display: none;
   }
   .content{
-    width: 75%;
+    width: 80%;
     border-right: 1px solid #d8d8d8;
   }
 
   .aside-right{
-    width: 25%;
+    width: 20%;
+    border: 1px solid red;
   }
 }
\ No newline at end of file
diff --git a/src/app/shared/agenda/approve-event/approve-event.component.html b/src/app/shared/agenda/approve-event/approve-event.component.html
index 9fe12aa8e..6d9a32514 100644
--- a/src/app/shared/agenda/approve-event/approve-event.component.html
+++ b/src/app/shared/agenda/approve-event/approve-event.component.html
@@ -1,4 +1,4 @@
-<ion-header hidden class="ion-no-border px-20">
+<!-- <ion-header hidden class="ion-no-border px-20">
   <div class="header-content d-flex justify-space-between">
     <div class="header-icon-left">
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
@@ -10,7 +10,7 @@
       <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
     </div>
   </div>
-</ion-header>
+</ion-header> -->
 <ion-menu autoHide="false" side="end" content-id="main-content">
   <ion-header>
     <ion-toolbar translucent>
diff --git a/src/app/shared/agenda/approve-event/approve-event.component.scss b/src/app/shared/agenda/approve-event/approve-event.component.scss
index 835223e87..571ff7c8a 100644
--- a/src/app/shared/agenda/approve-event/approve-event.component.scss
+++ b/src/app/shared/agenda/approve-event/approve-event.component.scss
@@ -32,6 +32,7 @@
     padding: 30px 20px 0 20px !important;
     overflow: auto;
     width: 100%;
+    border-right: 1px solid #d8d8d8;
 
     .upper-content{
       margin-left: 40px;
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
index e80912988..08fb441e7 100644
--- a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
@@ -1,6 +1,6 @@
 <ion-content>
   <div class="title width-100">
-    <label>Sim Eventos para Aprovação</label>
+    <label>Eventos para Aprovação</label>
     <ion-toolbar>
       <ion-segment [(ngModel)]="segment">
         <ion-segment-button value="MDGPR">
@@ -17,39 +17,35 @@
      <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div [ngSwitch]="segment">
+  <div class="main-content" [ngSwitch]="segment" *ngIf="eventsMDGPRList">
    <!--  <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>
+    <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
+      <ion-item 
+        class="item ion-no-padding width-100" 
+        *ngFor="let event of eventsMDGPRList" 
+        (click)="openApproveModal(event.serialNumber)">
+        <div class="event-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>
-            </ion-item>
-          </ion-item-sliding>
-        </ion-list>
-      </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-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}}">
+    <ion-list class="width-100" *ngSwitchCase="'PR'">
+      <div class="width-100" *ngIf="eventsPRList">
+          <ion-item
+            class=" ion-no-padding width-100"
+            *ngFor="let event of eventsPRList"
+            (click)="openApproveModal(event.serialNumber)">
+            <div class="item event-pr-{{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>
@@ -61,7 +57,6 @@
                 </div>
               </div>
             </ion-item>
-        </ion-item-sliding>
       </div>
     </ion-list>
   </div>
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
index 54f2c4c90..7727a9871 100644
--- a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
@@ -11,82 +11,80 @@
   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-bottom: 10px;
-  }
-  .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-bottom: 10px;
-  }
-  .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;
-  }
+  .main-content{
+    margin-top: 20px;
+    .item{
+      --inner-padding-end: 0 !important;
+      --inner-padding-top: 10px;
+      --inner-padding-bottom:10px;
+    }
+    .event-pr-Oficial{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #99e47b;
+      overflow: auto;
+    }
+    .event-pr-Pessoal{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #958bfc;
+      overflow: auto;
+    }
+    .event-mdgpr-Oficial{
+      border-radius: 5px;
+      border-right: 5px solid #ffb703;
+      overflow: auto;
+    }
+    .event-mdgpr-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-bottom: 10px;
+    }
+    .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-bottom: 10px;
+    }
+    .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;
+    }
+}
   
\ No newline at end of file

From 29ec8f19255d7b352c643a2baa998853be651b23 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Fri, 26 Mar 2021 10:44:31 +0100
Subject: [PATCH 02/11] save

---
 src/app/pages/agenda/agenda.page.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 5567fe84d..79b022ed1 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -254,11 +254,11 @@
           
           <div class="pb-5  d-none d-md-flex">
             <div class="flex-grow-1 text-grey d-flex justify-center align-center">
-              <div>Prória</div>
+              <div>Própria</div>
             </div>
             <div class="flex-grow-1 text-black">
               <div class="flex-grow-1 text-grey d-flex justify-center align-center">
-                <div>Presidente da Republica</div>
+                <div>Presidente da República</div>
               </div>
             </div>
           </div>

From 540c830666af7745ba82181884a80b0db606e034 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Fri, 26 Mar 2021 12:14:33 +0100
Subject: [PATCH 03/11] save

---
 .../agenda/view-event/view-event.page.html    |   2 +-
 src/app/pages/events/events.page.ts           |  18 ++-
 .../expediente-detail.page.scss               | 115 ++++++++++--------
 .../expedients/expedients.page.ts             |   2 +-
 src/global.scss                               |  26 +++-
 5 files changed, 105 insertions(+), 58 deletions(-)

diff --git a/src/app/pages/agenda/view-event/view-event.page.html b/src/app/pages/agenda/view-event/view-event.page.html
index 835c8736e..98f214cce 100644
--- a/src/app/pages/agenda/view-event/view-event.page.html
+++ b/src/app/pages/agenda/view-event/view-event.page.html
@@ -31,7 +31,7 @@
       <div class="content-details">
         <ion-label>
           <p>{{customDate}}</p>
-          <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
+          <p>das {{loadedEvent.StartDate}} às {{loadedEvent.EndDate}}</p>
           <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
           <p *ngIf="loadedEvent.IsRecurring">Repete</p>
         </ion-label>
diff --git a/src/app/pages/events/events.page.ts b/src/app/pages/events/events.page.ts
index 5c4ca0b5f..f01703921 100644
--- a/src/app/pages/events/events.page.ts
+++ b/src/app/pages/events/events.page.ts
@@ -261,6 +261,12 @@ export class EventsPage implements OnInit {
   }
 
   async viewEventDetail(eventId:any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     console.log(this.profile);
     
     const modal = await this.modalController.create({
@@ -269,8 +275,7 @@ export class EventsPage implements OnInit {
         eventId: eventId,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
@@ -282,6 +287,12 @@ export class EventsPage implements OnInit {
   }
 
   async viewExpedientDetail(serialNumber:any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     /* console.log(this.profile);
     console.log(serialNumber); */
     
@@ -291,8 +302,7 @@ export class EventsPage implements OnInit {
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
index c424dc06d..860c052db 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
@@ -19,54 +19,52 @@
   overflow:auto;
   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;
-            display: flex;
-            align-items: center;
+    .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;
+        display: flex;
+        align-items: center;
             
-          }
-          .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;
+        .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;
+        .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;
-          }
+          margin: 1px;
         }
+      }
     
         .title{
           font-size: 25px;
@@ -197,25 +195,42 @@ ion-button{
   }
 }
 
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 800px) {
   .content{
-    width: 100%;
+    width: 100% !important;
   }
   .aside-right{
     display: none;
   }
 }
-@media only screen and (min-width: 1024px) {
+@media only screen and (min-width: 801px) {
   .div-icon{
     display: none;
   }
   .content{
-    width: 80%;
+    width: 65%;
     border-right: 1px solid #d8d8d8;
   }
 
   .aside-right{
-    width: 20%;
-    border: 1px solid red;
+    width: 35%;
   }
-}
\ No newline at end of file
+}
+
+@media only screen and (min-width: 1024px){
+  .content{
+    width: 70%;
+  }
+  .aside-right{
+    width: 30%;
+  }
+}
+
+@media only screen and (min-width: 1140px){
+  .content{
+    width: 75%;
+  }
+  .aside-right{
+    width: 25%;
+  }
+}
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.ts b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
index f45ad317f..edcf0b404 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.ts
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
@@ -75,7 +75,7 @@ export class ExpedientsPage implements OnInit {
     console.log(this.profile);
 
     let classs;
-    if( window.innerWidth <= 1024){
+    if( window.innerWidth <= 800){
       classs = 'modal'
     } else  {
       classs = 'gabinete-digital-mobile-modal-to-Desktop'
diff --git a/src/global.scss b/src/global.scss
index a88d8b321..4cdff9eb1 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -291,7 +291,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     }
 }
 .hideAsideOptions{
-    @media only screen and (min-width: 1140px) {
+    @media only screen and (max-width: 800px) {
         .div-icon{
           display: none;
         }
@@ -313,7 +313,29 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     } */
 }
 .showAsideOptions{
-    @media only screen and (min-width: 1140px) {
+
+    @media only screen and (min-width: 801px) {
+        .div-icon{
+          display: none;
+        }
+        .content{
+          width: 65%;
+          border-right: 1px solid #d8d8d8;
+        }
+      
+        .aside-right{
+          width: 35%;
+        }
+      }
+      @media only screen and (min-width: 1024px){
+        .content{
+          width: 70%;
+        }
+        .aside-right{
+          width: 30%;
+        }
+      }
+      @media only screen and (min-width: 1140px) {
         .div-icon{
           display: none;
         }

From 6e0c8ad480a912fe3b97abc0b80b716bc86984fa Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Fri, 26 Mar 2021 14:26:52 +0100
Subject: [PATCH 04/11] style home for desktop

---
 src/app/home/home-routing.module.ts           |   4 +
 .../agenda/view-event/view-event.page.html    | 114 ++++++++++--------
 .../agenda/view-event/view-event.page.scss    |  68 +++++++++--
 .../expediente-detail.page.html               |   3 +-
 4 files changed, 126 insertions(+), 63 deletions(-)

diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
index 0818b3d90..93247d8de 100644
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/home/home-routing.module.ts
@@ -67,6 +67,10 @@ const routes: Routes = [
           {
             path:':eventId/:caller',
             loadChildren: ()=> import('../pages/events/event-detail/event-detail.module').then(m => m.EventDetailPageModule),
+          },
+          {
+            path: 'eventId/:caller',
+            loadChildren: () => import('../pages/agenda/view-event/view-event.module').then( m => m.ViewEventPageModule)
           }
         ]
       },
diff --git a/src/app/pages/agenda/view-event/view-event.page.html b/src/app/pages/agenda/view-event/view-event.page.html
index 98f214cce..fcb3dc779 100644
--- a/src/app/pages/agenda/view-event/view-event.page.html
+++ b/src/app/pages/agenda/view-event/view-event.page.html
@@ -1,4 +1,4 @@
-<ion-header  class="ion-no-border">
+<!-- <ion-header  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
@@ -15,56 +15,74 @@
       </div>
     </div>
   </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
-<ion-content>
-  <div class="main-content">
-    <div class="upper-content">
-      <div class="content-location">
-        <div class="location-detail">
-          <ion-label >{{loadedEvent.Location}}</ion-label>
-        </div>
-        <div class="button-{{profile}}-{{loadedEvent.CalendarName}}">
-          <ion-button  class="button-{{profile}}-{{loadedEvent.CalendarName}}" slot="end">{{loadedEvent.CalendarName}}</ion-button>
-        </div>
-      </div>
-      <div class="content-details">
-        <ion-label>
-          <p>{{customDate}}</p>
-          <p>das {{loadedEvent.StartDate}} às {{loadedEvent.EndDate}}</p>
-          <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
-          <p *ngIf="loadedEvent.IsRecurring">Repete</p>
-        </ion-label>
-      </div>
-    </div>
-    <div class="middle-content">
-      <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label>
-          <h3>Intervenientes</h3>
-          <div *ngFor="let attendee of loadedEvent.Attendees">
-            <p>{{attendee.Name}}</p>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <div class="main-header">
+        <div class="title-content">
+          <div class="left">
+            <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
           </div>
-        </ion-label>
-      </ion-item>
-      <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label>
-          <h3>Detalhes</h3>
-          <p>{{loadedEvent.Body.Text}}</p>
-        </ion-label>
-      </ion-item>
-    </div>
-  
-    <div *ngIf="loadedAttachments" class="bottom-content">
-      <ion-list>
-        <h3>Documentos Anexados</h3>
+          <div class="middle">
+            <ion-label class="title">{{loadedEvent.Subject}}</ion-label>
+          </div>
+          <div class="div-icon">
+            <ion-icon class="edit" (click)="editEvent()" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
+            <ion-icon class="delete" (click)="deleteEvent()" name="trash-sharp"></ion-icon> 
+          </div>
+        </div>
+      </div>
+      <div class="upper-content">
+        <div class="content-location">
+          <p><span class="date">{{loadedEvent.Location}}</span><span class="label">{{loadedEvent.CalendarName}}</span></p>
+        </div>
+        <div class="content-details">
+          <ion-label>
+            <p>{{customDate}}</p>
+            <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
+            <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
+            <p *ngIf="loadedEvent.IsRecurring">Repete</p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="middle-content">
+        <h5>Intervenientes</h5>
         <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label *ngFor="let attach of loadedAttachments"
-        (click)="viewDocument()">
-          <p class="attach-title-item">{{attach.SourceName}}</p>
-          <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
-        </ion-label>
-      </ion-item>
-      </ion-list>
+          <ion-label>
+            <div *ngFor="let attendee of loadedEvent.Attendees">
+              <p>{{attendee.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+        <h5>Detalhes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <p [innerHTML]="loadedEvent.Body.Text"></p>
+          </ion-label>
+        </ion-item>
+      </div>
+    
+      <div *ngIf="loadedAttachments" class="bottom-content">
+        <ion-list>
+          <h3>Documentos Anexados</h3>
+          <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label *ngFor="let attach of loadedAttachments"
+          (click)="viewDocument()">
+            <p class="attach-title-item">{{attach.SourceName}}</p>
+            <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+    <div class="aside-right flex-column height-100">
+      <div class="buttons">
+        <button full class="btn-ok" shape="round" >Editar</button>
+        <div class="solid"></div>
+        <button full class="btn-delete" shape="round" >Eliminar</button>
+      </div>
     </div>
   </div>    
 </ion-content>
\ No newline at end of file
diff --git a/src/app/pages/agenda/view-event/view-event.page.scss b/src/app/pages/agenda/view-event/view-event.page.scss
index ba5e0870f..c74dbf83b 100644
--- a/src/app/pages/agenda/view-event/view-event.page.scss
+++ b/src/app/pages/agenda/view-event/view-event.page.scss
@@ -1,9 +1,9 @@
 ion-content{
     --background:transparent;
-    --padding-top:0px;
+    /* --padding-top:0px;
     --padding-start: 20px;
     --padding-end: 20px;
-    font-size: 18px;
+    font-size: 18px; */
 }
 ion-menu{
     --height: 225px;
@@ -13,19 +13,13 @@ ion-menu{
    --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 0px 0px 0px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      padding: 0px 20px;
       margin: 0px auto;
       overflow: auto;
       background: #fff;
@@ -37,10 +31,10 @@ ion-menu{
         overflow: hidden;
       }
       .middle{
-          width: 230px;
+          //width: 230px;
           padding: 0!important;
           float: left;
-          margin: 2.5px 0 0 0;
+          //margin: 2.5px 0 0 0;
         }
       .header-icon-right{
         width: 45px;
@@ -74,13 +68,16 @@ ion-menu{
 
   }
   .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
     margin: 0 auto;
     background-color: #fff;
     overflow:auto;
-    padding: 15px 0px 0 0px;
+
+    .content{
+      padding: 30px 20px 0 20px !important;
+      margin: 0;
+      float: left;
+    }
 
     .upper-content{
         margin-left: 50px;
@@ -92,6 +89,14 @@ ion-menu{
           margin: 0 auto;
           padding: 0;
           overflow: auto;
+          
+          .label{
+            border-radius: 20px;
+            background: #ffb703;
+            float: right;
+            padding: 5px 13.5px 5px 13.5px;
+            color: #fff;
+        }
         }
       
         .location-detail{
@@ -188,4 +193,41 @@ ion-menu{
         font-size: 13px;
         }
     }
+  }
+  .aside-right{
+    padding: 30px 20px 0 20px !important;
+  
+    .arrow-right{
+      display: flex;
+      justify-content: flex-end;
+      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, .btn-cancel, .btn-delete{
+        height: auto !important;
+        font-size: 16px !important;
+        font-weight: 600 !important;
+        width: 100% !important;
+        margin-bottom: 10px !important;
+        padding: 15px !important;
+      }
+    }
+    .solid {
+      display: block;
+      width: 90%;
+      border-top: 1px solid #ebebeb;
+      margin: 0 auto !important;
+      margin-bottom: 10px !important;
+    }
   }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
index 3ccb997eb..c854e5c77 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
@@ -56,9 +56,8 @@
 </div>
 
 <ion-content class="height-100">
-  <div class="main-content d-flex height-100">
+  <div class="main-content d-flex">
     <div class="content d-flex flex-column" *ngIf="task">
-
       <div class="main-header">
         <div class="title-content">
           <app-btn-modal-dismiss></app-btn-modal-dismiss>

From 4a781d4adc25211176dd182e765ade946d2fd5f6 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Fri, 26 Mar 2021 16:51:36 +0100
Subject: [PATCH 05/11] style book meeting from expedient

---
 .../book-meeting-modal.page.html              | 340 +++++++++---------
 .../book-meeting-modal.page.scss              | 211 +++++------
 .../expedient-task-modal.page.html            | 231 ++++++------
 .../expedient-task-modal.page.scss            | 216 +++++------
 .../expediente-detail.page.html               |  16 +-
 .../expediente-detail.page.ts                 |  17 +-
 .../expedients/expedients.page.ts             |   4 +-
 7 files changed, 529 insertions(+), 506 deletions(-)

diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
index 5df27b85f..bd36576bc 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
@@ -1,194 +1,198 @@
-<ion-header class="ion-no-border">
+<!-- <ion-header class="ion-no-border">
   <div class="header-content">
     <div class="header-title">
       <label>Convocar Reunião</label>
     </div>
   </div>
-</ion-header>
+</ion-header> -->
 
-<ion-content>
-    <div class="ion-item-container">
-      <ion-input placeholder="Assunto" [(ngModel)]="postData.Subject"></ion-input>
-    </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <div class="header-content">
+        <div class="header-title">
+          <label>Convocar Reunião</label>
+        </div>
       </div>
-      <div class="ion-input-class">
-        <ion-input placeholder="Localização" [(ngModel)]="postData.Location"></ion-input>
+      <div class="ion-item-container width-100">
+        <ion-input placeholder="Assunto" [(ngModel)]="postData.Subject"></ion-input>
+      </div>
+
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input placeholder="Localização" [(ngModel)]="postData.Location"></ion-input>
+          </div>
+        </div>
+        <!-- Error messages -->
+        <span class="error ion-padding" *ngIf="formLocationSatus">
+          Campo obrigatório
+        </span>
+
+      </div>
+
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select [(ngModel)]="postData.CalendarName" placeholder="Selecione repetição" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option value="Oficial">Oficial</ion-select-option>
+              <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </div>
+
+      <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-datetime 
+            placeholder="Início"
+            [(ngModel)]="postData.StartDate" 
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+            value="2020-11-19T11:06Z">
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+        </div>
       </div>
     </div>
-    <!-- Error messages -->
-    <span class="error ion-padding" *ngIf="formLocationSatus">
-      Campo obrigatório
-    </span>
 
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select [(ngModel)]="postData.CalendarName" placeholder="Selecione repetição" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option value="Oficial">Oficial</ion-select-option>
-          <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-        </ion-select>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-datetime 
+            placeholder="Fim"
+            [(ngModel)]="postData.EndDate" 
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+            value="2020-11-19T11:06Z">
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-datetime 
-        placeholder="Início"
-        [(ngModel)]="postData.StartDate" 
-        displayFormat="D MMM YYYY H:mm"
-        minuteValues="0,15,30,45"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-        min="2018" 
-        max="2022" 
-        value="2020-11-19T11:06Z">
-      </ion-datetime>
-      <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-datetime 
-        placeholder="Fim"
-        [(ngModel)]="postData.EndDate" 
-        displayFormat="D MMM YYYY H:mm"
-        minuteValues="0,15,30,45"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-        min="2018" 
-        max="2022" 
-        value="2020-11-19T11:06Z">
-      </ion-datetime>
-      <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-select [(ngModel)]="postData.IsRecurring" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
-        <ion-select-option value="false">Não se repete</ion-select-option>
-        <ion-select-option value="true">Repete</ion-select-option>
-        <!-- <ion-select-option value="true">Semanal</ion-select-option>
-        <ion-select-option value="true">Diário</ion-select-option>
-        <ion-select-option value="true">Anual</ion-select-option> -->
-      </ion-select>
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class-no-height">
-      <div class="list-people">
-        <ion-item lines="none">
-          <ion-list>
-            <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
-            <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
-          </ion-list>
-        </ion-item>
-      </div>
-      <div class="add-people">
-        <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-select [(ngModel)]="postData.IsRecurring" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
+            <ion-select-option value="false">Não se repete</ion-select-option>
+            <ion-select-option value="true">Repete</ion-select-option>
+            <!-- <ion-select-option value="true">Semanal</ion-select-option>
+            <ion-select-option value="true">Diário</ion-select-option>
+            <ion-select-option value="true">Anual</ion-select-option> -->
+          </ion-select>
+        </div>
       </div>
     </div>
-  </div>
-</div>
 
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class-no-height">
-      <div class="list-people">
-        <ion-item lines="none">
-          <ion-list>
-            <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
-            <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
-          </ion-list>
-        </ion-item>
-      </div>
-      <div class="add-people">
-        <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height">
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
+                <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="add-people">
+            <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</div>
 
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height">
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
+                <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="add-people">
+            <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="ion-input-class">
-      <ion-input [(ngModel)]="postData.Body.Text" placeholder="Detalhes"></ion-input>
+
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-input [(ngModel)]="postData.Body.Text" placeholder="Detalhes"></ion-input>
+        </div>
+      </div>
+    </div>
+
+    <div hidden class="ion-item-container-no-border">
+      <ion-label>
+        <div class="attach-icon">
+          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+        </div>
+        <div class="attach-document">
+          <ion-label>Anexar Documentos</ion-label>
+        </div> 
+      </ion-label>
+    </div>
+
+    <div *ngIf="loadedAttachments">
+      <ion-item>
+        <ion-label>Documentos Anexados</ion-label>
+      </ion-item>
+      <ion-list>
+        <ion-item *ngFor="let attachment of loadedAttachments">
+        <ion-label>
+          <h4 class="attach-title-item">{{attachment.Description}}</h4>
+          <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
+        </ion-label>
+      </ion-item>
+      </ion-list>
+    </div>
+    </div>
+    <div class="aside-right flex-column height-100">
     </div>
   </div>
-</div>
-
-<div hidden class="ion-item-container-no-border">
-  <ion-label>
-    <div class="attach-icon">
-      <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
-    </div>
-    <div class="attach-document">
-      <ion-label>Anexar Documentos</ion-label>
-    </div> 
-  </ion-label>
-</div>
-
-<div *ngIf="loadedAttachments">
-  <ion-item>
-    <ion-label>Documentos Anexados</ion-label>
-  </ion-item>
-  <ion-list>
-    <ion-item *ngFor="let attachment of loadedAttachments">
-    <ion-label>
-      <h4 class="attach-title-item">{{attachment.Description}}</h4>
-      <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
-    </ion-label>
-  </ion-item>
-  </ion-list>
-</div>
-
 </ion-content>
 <ion-footer>
-  <ion-toolbar>
-    <ion-item lines="none">
-      <p>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
+  </div>
 </ion-footer>
 
diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
index 213236ce7..5dd6dbf71 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
@@ -1,111 +1,106 @@
-.header-content{
-  width: 360px;
-  overflow: auto;
-  margin: 25px auto;
-}
-.header-title{
-  width: 264px;
-  font-family: Roboto;
-  font-size: 25px;
-  margin: 0 5px 0 5px;
-  padding: 0;
-  color:#000;
-  float: left;
-}
-ion-content{
-  --padding-top: 0px;
-  --padding-start: 15px;
-  --padding-end: 20px;
-}
-
-.ion-item-container{
-  width: 360px;
-  margin: 15px auto;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 10px;
-}
-.ion-item-container-no-border{
-  width: 100%;
-  margin: 0px auto;
-  padding: 0 !important;
-  overflow: auto;
-}
-.container-div{
-  margin-bottom: 15px;
-  overflow: auto;
-}
-.ion-item-class-2{
-  width: 360px;
-  margin: 0px auto;
-}
-.ion-icon-class{
-  width: 45px;
-  height: 45px;
-  float: left;
-  padding: 10px;
-  font-size: 25px;
-}
-ion-select{
-  padding-left: 5px;
-  margin-left: 0;
-}
-.ion-input-class{
-  width: 315px;
-  height: 45px;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-  padding-right: 10px;
-  float: left;
-}
-.ion-input-class-no-height{
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  overflow: auto;
-}
-.list-people{
-  width: 256px;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
   float: left;
 
-}
-.add-people{
-  width: 45px;
+  .header-content{
+    overflow: auto;
+  }
+  .header-title{
+    font-family: Roboto;
+    font-size: 25px;
+    padding: 0;
+    color:#000;
+    float: left;
+  }
+
+  .ion-item-container{
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+    
+  }
+  .ion-item-container-no-border{
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .container-div{
+    margin-bottom: 15px;
+    overflow: hidden;
+  }
+  .ion-item-class-2{
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  ion-select{
+    padding-left: 5px;
+    margin-left: 0;
+  }
+  .ion-input-class{
+    width: calc(100% - 45px);
+    height: 45px;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .list-people{
+    width: 256px;
+    float: left;
+
+  }
+  .add-people{
+    width: 45px;
+    float: right;
+    overflow: auto;
+    font-size: 25px;
+    padding: 10px;
+  }
+  .list-people-title{
+    /* font-size: 13px; */
+    color: #797979;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+    margin: 5px 5px 5px 10px;
+    padding: 5px;
+    float: left;
+  }
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attach-title-item{
+    width: 100%;
+    font-size: 15px;
+    color:#0d89d1;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
   float: right;
-  overflow: auto;
-  font-size: 25px;
-  padding: 10px;
-}
-.list-people-title{
-  /* font-size: 13px; */
-  color: #797979;
-}
-.attach-document{
-  font-size: 15px;
-  color: #0d89d1;
-  margin: 5px 5px 5px 10px;
-  padding: 5px;
-  float: left;
-}
-.attach-icon{
-  width: 37px;
-  font-size: 35px;
-  float: left;
-}
-.attach-title-item{
-  width: 100%;
-  font-size: 15px;
-  color:#0d89d1;
-}
-/* SPAN */
-.span-left{
-  float: left;
-  font-size: 15x;
-}
-.span-right{
-text-align: right;
-float: right;
-font-size: 13px;
+  font-size: 13px;
+  }
 }
 .container-footer{
     margin:0 auto;
@@ -145,4 +140,10 @@ font-size: 13px;
 }
 .span-color{
   color:red;
+}
+.buttons{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  overflow: auto;
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
index 9a5c970e9..3d2368030 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
@@ -1,127 +1,126 @@
-<ion-content>
-  <ion-item  lines="none">
-    <ion-label class="title">{{modalTitle[taskType]}}</ion-label>
-  </ion-item>
-  <div class="ion-item-container">
-    <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.Subject"></ion-input>
-  </div>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <ion-item  lines="none">
+        <ion-label class="title">{{modalTitle[taskType]}}</ion-label>
+      </ion-item>
+      <div class="ion-item-container width-100">
+        <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.Subject"></ion-input>
+      </div>
 
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-input class="add-border" placeholder="Descrição" [(ngModel)]="postData.DispatchFolder.Message"></ion-input>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option value="99999861">Normal</ion-select-option>
-          <ion-select-option value="99999862">Urgente</ion-select-option>
-          <ion-select-option value="99999863">Muito Urgente</ion-select-option>
-          <ion-select-option value="99999864">Urgentíssimo</ion-select-option>
-        </ion-select>
-      </div>
-    </div>
-  </div>
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select placeholder="Tipo" [(ngModel)]="postData.SubjectTypeId" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
-        </ion-select>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class-no-height">
-        <div class="list-people">
-          <ion-item lines="none">
-            <ion-list>
-              <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
-              <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
-            </ion-list>
-          </ion-item>
-        </div>
-        <div class="add-people">
-          <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input class="add-border" placeholder="Descrição" [(ngModel)]="postData.DispatchFolder.Message"></ion-input>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
 
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class-no-height">
-        <div class="list-people">
-          <ion-item lines="none">
-            <ion-list>
-              <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
-              <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
-            </ion-list>
-          </ion-item>
-        </div>
-        <div class="add-people">
-          <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option value="99999861">Normal</ion-select-option>
+              <ion-select-option value="99999862">Urgente</ion-select-option>
+              <ion-select-option value="99999863">Muito Urgente</ion-select-option>
+              <ion-select-option value="99999864">Urgentíssimo</ion-select-option>
+            </ion-select>
+          </div>
         </div>
       </div>
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Tipo" [(ngModel)]="postData.SubjectTypeId" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </div>
+
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height">
+            <div class="list-people">
+              <ion-item lines="none">
+                <ion-list>
+                  <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
+                  <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
+                </ion-list>
+              </ion-item>
+            </div>
+            <div class="add-people">
+              <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height">
+            <div class="list-people">
+              <ion-item lines="none">
+                <ion-list>
+                  <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
+                  <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
+                </ion-list>
+              </ion-item>
+            </div>
+            <div class="add-people">
+              <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div hidden class="ion-item-container-no-border">
+        <ion-label>
+          <div class="attach-icon">
+            <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+          </div>
+          <div class="attach-document">
+            <ion-label>Anexar Documentos</ion-label>
+          </div> 
+        </ion-label>
+      </div>
+
+      <div *ngIf="loadedAttachments">
+        <ion-item>
+          <ion-label>Documentos Anexados</ion-label>
+        </ion-item>
+        <ion-list>
+          <ion-item *ngFor="let attachment of loadedAttachments">
+          <ion-label>
+            <h4 class="attach-title-item">{{attachment.Description}}</h4>
+            <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+    <div class="aside-right flex-column height-100">
     </div>
   </div>
-
-  <div hidden class="ion-item-container-no-border">
-    <ion-label>
-      <div class="attach-icon">
-        <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
-      </div>
-      <div class="attach-document">
-        <ion-label>Anexar Documentos</ion-label>
-      </div> 
-    </ion-label>
-  </div>
-
-  <div *ngIf="loadedAttachments">
-    <ion-item>
-      <ion-label>Documentos Anexados</ion-label>
-    </ion-item>
-    <ion-list>
-      <ion-item *ngFor="let attachment of loadedAttachments">
-      <ion-label>
-        <h4 class="attach-title-item">{{attachment.Description}}</h4>
-        <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
-      </ion-label>
-    </ion-item>
-    </ion-list>
-  </div>
-
 </ion-content>
 <ion-footer>
-  <ion-toolbar>
-    <ion-item lines="none">
-      <p>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
+  </div>
 </ion-footer>
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
index 4fb4b7370..024b06845 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
@@ -1,111 +1,112 @@
-ion-content{
-  --padding-top: 20px;
-  --padding-start: 15px;
-  --padding-end: 20px;
-}
-.title{
-  font-family: Roboto;
-  font-size: 25px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: #000000;
-  margin: 8px 0 8px 0px;
-}
-.container-div{
-  margin-bottom: 15px;
-  overflow: auto;
-}
-.ion-item-container{
-  width: 360px;
-  margin: 15px auto;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-}
-.ion-item-container-no-border{
-  width: 360px;
-  margin: 15px auto;
-}
-.ion-item-class-2{
-  width: 360px;
-  margin: 0px auto;
-}
-.ion-icon-class{
-  width: 45px;
-  height: 45px;
-  float: left;
-  padding: 10px;
-  font-size: 25px;
-}
-ion-select{
-  padding-left: 5px;
-  margin-left: 0;
-}
-.ion-input-class{
-  width: 315px;
-  height: 45px;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-  padding-right: 10px;
-  float: left;
-}
-.ion-input-class-no-height{
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  overflow: auto;
-}
-.list-people{
-  width: 256px;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
   float: left;
 
-}
-.add-people{
-  width: 45px;
+  .title{
+    font-family: Roboto;
+    font-size: 25px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #000000;
+    //margin: 8px 0 8px 0px;
+  }
+  .container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+  }
+  .ion-item-container{
+    //width: 360px;
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+  }
+  .ion-item-container-no-border{
+    //width: 360px;
+    //margin: 15px auto;
+  }
+  .ion-item-class-2{
+    //width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  ion-select{
+    padding-left: 5px;
+    margin-left: 0;
+  }
+  .ion-input-class{
+    width: calc(100% - 45px);
+    height: 45px;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .list-people{
+    width: 256px;
+    float: left;
+
+  }
+  .add-people{
+    width: 45px;
+    float: right;
+    overflow: auto;
+    font-size: 25px;
+    padding: 10px;
+  }
+  .list-people-title{
+    /* font-size: 13px; */
+    color: #797979;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+  }
+
+  .attach-title-item{
+    width: 100%;
+    font-size: 15px;
+    color:#0d89d1;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
   float: right;
-  overflow: auto;
-  font-size: 25px;
-  padding: 10px;
-}
-.list-people-title{
-  /* font-size: 13px; */
-  color: #797979;
-}
-.attach-document{
-  font-size: 15px;
-  color: #0d89d1;
-}
-
-.attach-title-item{
-  width: 100%;
-  font-size: 15px;
-  color:#0d89d1;
-}
-/* SPAN */
-.span-left{
-  float: left;
-  font-size: 15x;
-}
-.span-right{
-text-align: right;
-float: right;
-font-size: 13px;
+  font-size: 13px;
+  }
 }
 .container-footer{
-    margin:0 auto;
-    overflow: auto;
-}
-.button-cancel {
-    width: 170px;
-    height: 44px;
-    border-radius: 22.5px;
-    --background: #e0e9ee;
-    --color: #061b52;
-    margin:10px;
-  }
+      margin:0 auto;
+      overflow: auto;
+  .button-cancel {
+      width: 170px;
+      height: 44px;
+      border-radius: 22.5px;
+      --background: #e0e9ee;
+      --color: #061b52;
+      margin:10px;
+    }
   .button-save {
     width: 170px;
     height: 44px;
@@ -113,4 +114,11 @@ font-size: 13px;
     --background: #42b9fe;
     --color:#ffffff;
     margin:10px;
-  }
\ No newline at end of file
+  }
+}
+.buttons{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
index c854e5c77..9aeeea0a2 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
@@ -56,7 +56,7 @@
 </div>
 
 <ion-content class="height-100">
-  <div class="main-content d-flex">
+  <div class="main-content d-flex height-100">
     <div class="content d-flex flex-column" *ngIf="task">
       <div class="main-header">
         <div class="title-content">
@@ -147,17 +147,17 @@
     </div>
     <div class="aside-right flex-column height-100">
       <div class="buttons">
-        <button full class="btn-ok" shape="round" >Efectuar dispacho</button>
-        <button class="btn-cancel" shape="round" >Descartar</button>
+        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-ok" shape="round" >Efectuar Despacho</button>
+        <button (click)="discartExpedient()" class="btn-cancel" shape="round" >Descartar</button>
         <div class="solid"></div>
-        <button full class="btn-cancel" shape="round" >Solicitar</button>
-        <button class="btn-cancel" shape="round" >Pedido de Deferimento</button>
-        <button full class="btn-cancel" shape="round" >Marcar Reunião</button>
+        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
+        <button (click)="openExpedientActionsModal('2',fulltask)" class="btn-cancel" shape="round" >Pedido de Deferimento</button>
+        <button (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
         <button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
         <div class="solid"></div>
         <button class="btn-cancel" shape="round" >Executar</button>
-        <button full class="btn-cancel" shape="round" >Delegar</button>
-        <button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
+        <button class="btn-cancel" shape="round" >Delegar</button>
+        <button class="btn-cancel" shape="round" >Arquivar</button>
       </div>
     </div>
 
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
index 63156b633..c84522e9f 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
@@ -116,14 +116,19 @@ export class ExpedienteDetailPage implements OnInit {
   }
 
   async openExpedientActionsModal(taskAction: any, task: any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     const modal = await this.modalController.create({
       component: ExpedientTaskModalPage,
       componentProps: {
         taskAction: taskAction,
         task: task,
       },
-      cssClass: 'expedient-task-modal modal-desktop',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss();
@@ -137,12 +142,18 @@ export class ExpedienteDetailPage implements OnInit {
   }
 
   async openBookMeetingModal(task: any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'book-meeting-modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     const modal = await this.modalController.create({
       component: BookMeetingModalPage,
       componentProps: {
         task: task,
       },
-      cssClass: 'book-meeting-modal modal-desktop',
+      cssClass: classs,
       backdropDismiss: false
     });
     await modal.present();
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.ts b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
index edcf0b404..b6f9aaf98 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.ts
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
@@ -78,7 +78,7 @@ export class ExpedientsPage implements OnInit {
     if( window.innerWidth <= 800){
       classs = 'modal'
     } else  {
-      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+      classs = 'modal modal-desktop'
     }
 
     const modal = await this.modalController.create({
@@ -88,7 +88,7 @@ export class ExpedientsPage implements OnInit {
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: 'modal modal-desktop',
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{

From ce55c77a9489cedb598da86644ceabbd828c0b9a Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Sat, 27 Mar 2021 09:21:40 +0100
Subject: [PATCH 06/11] Set a fixed container for images in publications list
 imgs

---
 .../view-publications/view-publications.page.scss        | 2 +-
 .../view-publications/view-publications.page.html        | 2 +-
 .../view-publications/view-publications.page.scss        | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/publications/view-publications/view-publications.page.scss b/src/app/pages/publications/view-publications/view-publications.page.scss
index b10468d37..2da9c7ab9 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.scss
+++ b/src/app/pages/publications/view-publications/view-publications.page.scss
@@ -136,7 +136,7 @@
   }
   .post-img{
       width: 100%;
-      height: 400px;
+      //height: 400px;
       margin: 0 auto;
       border-radius: 0px!important;
       overflow: hidden;
diff --git a/src/app/shared/publication/view-publications/view-publications.page.html b/src/app/shared/publication/view-publications/view-publications.page.html
index 1d889b432..80f9080b6 100644
--- a/src/app/shared/publication/view-publications/view-publications.page.html
+++ b/src/app/shared/publication/view-publications/view-publications.page.html
@@ -31,7 +31,7 @@
       <div class="post-item  d-md-block mb-10"
         *ngFor="let publication of publicationList"
         (click)="viewPublicationDetail(publication.DocumentId)">
-        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100 height-lg-unset">
+        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100">
           <img src="{{publication.FileBase64}}" alt="image">
         </div>
         <div *ngIf="publication.FileBase64.length < 30" class="mb-10 post-img">
diff --git a/src/app/shared/publication/view-publications/view-publications.page.scss b/src/app/shared/publication/view-publications/view-publications.page.scss
index 60ad0a757..e353cf7ab 100644
--- a/src/app/shared/publication/view-publications/view-publications.page.scss
+++ b/src/app/shared/publication/view-publications/view-publications.page.scss
@@ -131,11 +131,10 @@
     padding: 0!important;
   }
   .post-img{
-      width: 100%;
-      height: 400px;
-
-      border-radius: 0px!important;
-      overflow: hidden;
+    width: 100%;
+    height: 56.25vh !important;
+    border-radius: 0px!important;
+    overflow: hidden;
   }
   .post-img img{
       width: 100%;

From 8ead1268e3e3a8f260cbab35354c6dd010cfa15f Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Mon, 29 Mar 2021 10:33:56 +0100
Subject: [PATCH 07/11] Fixed pipes for search

---
 src/app/home/home-routing.module.ts           | 35 +++++++++++++------
 src/app/pages/chat/chat.module.ts             |  2 ++
 .../group-contacts/group-contacts.page.html   |  2 +-
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
index 93247d8de..5c80c4160 100644
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/home/home-routing.module.ts
@@ -162,21 +162,34 @@ const routes: Routes = [
             children: [
               {
                 path:'',
-               /*  outlet:'message', */
-                component: MessagesPage
-                //loadChildren: ()=> import('../pages/chat/messages/messages.module').then(m => m.MessagesPageModule)
+                loadChildren: ()=> import('../pages/chat/messages/messages.module').then(m => m.MessagesPageModule)
+              },
+              {
+                path:'contacts',
+                loadChildren: ()=> import('../shared/chat/messages/contacts/contacts.module').then(m => m.ContactsPageModule)
+              },
+              {
+                path:'contacts',
+                loadChildren: ()=> import('../pages/chat/messages/contacts/contacts.module').then(m => m.ContactsPageModule)
               },
             ]
           },
           {
-            path:'messages',
-            outlet:'message',
-            component: MessagesPage
-          },
-          {
-            path:'groups',
-            outlet:'group',
-            component: GroupMessagesPage
+            path:'group-messages',
+            children:[
+              {
+                path:'',
+                loadChildren: ()=> import('../pages/chat/group-messages/group-messages.module').then(m => m.GroupMessagesPageModule)
+              },
+              {
+                path:'group-contacts',
+                loadChildren: ()=> import('../shared/chat/group-messages/group-contacts/group-contacts.module').then(m => m.GroupContactsPageModule)
+              },
+              {
+                path:'group-contacts',
+                loadChildren: ()=> import('../pages/chat/group-messages/group-contacts/group-contacts.module').then(m => m.GroupContactsPageModule)
+              },
+            ]
           },
 
         ]
diff --git a/src/app/pages/chat/chat.module.ts b/src/app/pages/chat/chat.module.ts
index d3e4021b0..fb3ceaaeb 100644
--- a/src/app/pages/chat/chat.module.ts
+++ b/src/app/pages/chat/chat.module.ts
@@ -15,6 +15,7 @@ import { EmptyChatPage } from 'src/app/shared/chat/empty-chat/empty-chat.page';
 import { ContactsPage } from 'src/app/shared/chat/messages/contacts/contacts.page';
 import { NewGroupPage } from 'src/app/shared/chat/new-group/new-group.page';
 import { GroupContactsPage } from 'src/app/shared/chat/group-messages/group-contacts/group-contacts.page';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 @NgModule({
   imports: [
@@ -22,6 +23,7 @@ import { GroupContactsPage } from 'src/app/shared/chat/group-messages/group-cont
     FormsModule,
     IonicModule,
     SharedModule,
+    PipesModule,
     ChatPageRoutingModule,
     RouterModule,
   ],
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
index dc129dd35..4baa1e7a5 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
@@ -38,7 +38,7 @@
       </ion-list>
     </div>
 
-    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
+    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
   
       <div class="item-divider" *virtualHeader="let header">
         <ion-label>{{header}}</ion-label>

From 9ae7570fd58d67a03016b4d13bfd19b484880b91 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Mon, 29 Mar 2021 10:45:29 +0100
Subject: [PATCH 08/11] save

---
 src/app/shared/chat/messages/contacts/contacts.page.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/chat/messages/contacts/contacts.page.html b/src/app/shared/chat/messages/contacts/contacts.page.html
index b8e86ee60..6c44e43f2 100644
--- a/src/app/shared/chat/messages/contacts/contacts.page.html
+++ b/src/app/shared/chat/messages/contacts/contacts.page.html
@@ -28,7 +28,7 @@
 
   <div class="main-content">
     
-    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
+    <ion-virtual-scroll [items]="users| filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
   
       <div class="item-divider" *virtualHeader="let header">
         <ion-label>{{header}}</ion-label>

From 05e89fbf1380a275ae35e8c8b88b8190514ef712 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Mon, 29 Mar 2021 16:01:58 +0100
Subject: [PATCH 09/11] improvements

---
 src/app/pages/chat/chat.page.scss             | 10 +--
 src/app/pages/chat/chat.page.ts               |  2 +-
 .../group-contacts/group-contacts.page.html   |  4 +-
 .../group-contacts/group-contacts.page.scss   | 15 ++++
 .../group-messages/group-messages.page.html   | 20 ++++-
 .../group-messages/group-messages.page.scss   | 75 ++++++++++++-------
 .../pages/chat/messages/messages.page.html    | 21 +++++-
 .../pages/chat/messages/messages.page.scss    | 68 +++++++++--------
 .../group-contacts/group-contacts.page.html   | 10 +--
 .../group-contacts/group-contacts.page.scss   | 31 +++++++-
 .../group-contacts/group-contacts.page.ts     | 71 ++++++++++++++++--
 .../chat/messages/contacts/contacts.page.ts   |  3 +-
 12 files changed, 242 insertions(+), 88 deletions(-)

diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss
index 8c5e7498a..90dfdab01 100644
--- a/src/app/pages/chat/chat.page.scss
+++ b/src/app/pages/chat/chat.page.scss
@@ -33,18 +33,17 @@ ion-content{
   
 
 .main-content{
-  width: 100%; 
-  height: 100%;
   font-family: Roboto;
   margin: 0 auto;
   background-color: #fff;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
+
   overflow: auto;
 
   .aside-wrapper{
-    padding: 0 !important;
     margin: 0 !important;
+    padding: 30px 20px 0 20px !important;
   }
 
   .iconschatnew-group{
@@ -109,8 +108,7 @@ ion-content{
    
 
     .aside-wrapper{
-      width: 40%;
-      padding: 30px 20px 0 20px !important;
+      width: 35%;
       border-right: 1px solid #d8d8d8;
       .aside-title{
         font-size: 25px;
@@ -120,7 +118,7 @@ ion-content{
       width: 340px;
     } */
     .aside-content{
-      width: 60%;
+      width: 65%;
       display: flex !important;
       background-color: white;
     }
diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts
index d97cbe1ef..9f4690cb8 100644
--- a/src/app/pages/chat/chat.page.ts
+++ b/src/app/pages/chat/chat.page.ts
@@ -136,7 +136,7 @@ export class ChatPage implements OnInit {
     this.closeAllDesktopComponents();
     
     if( window.innerWidth <= 1024){
-      //this.selectContact();
+      this.selectContact();
     }
     else{
       console.log('here');
diff --git a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
index f63a629a8..7b473c119 100644
--- a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
+++ b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
@@ -36,7 +36,7 @@
         <div class="members-checkbox">
           <ion-checkbox checked color="primary"></ion-checkbox>
           <p>{{user.name}}</p>
-          <ion-icon name="ellipse"></ion-icon>
+          <ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
         </div>
       </ion-list>
     </div>
@@ -50,7 +50,7 @@
       <div *virtualItem="let user" class="item-checkbox">
         <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
          <p>{{user.name}}</p>
-        <ion-icon name="ellipse"></ion-icon>
+        <ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
       </div>
       
     </ion-virtual-scroll>
diff --git a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
index 829026a52..b6e007730 100644
--- a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
+++ b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
@@ -136,6 +136,21 @@
        color:#99e47b;
        margin-left: 10px;
      }
+     .online{
+      color:#99e47b !important;
+      }
+    .offline{
+      color:#cbced1 !important;
+      }
+    .away{
+      color:#ffd21f !important;
+      }
+      .invisible{
+        color:#cbced1 !important;
+      }
+      .busy{
+        color:#f5455c !important;
+      }
    }
  
  
\ No newline at end of file
diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html
index 0f69171a8..24581eacf 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/src/app/pages/chat/group-messages/group-messages.page.html
@@ -50,7 +50,7 @@
     </div>
   </div>
 
-</ion-content>
+<!-- </ion-content>
 <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
@@ -66,11 +66,27 @@
         </ion-item>
       </ion-col>
       <ion-col size="2">
-        <!-- [disabled]="message === ''" -->
         <ion-label>
           <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>
   </ion-toolbar>
+</ion-footer> -->
+
+<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>
+    </div>
+    <div class="width-80">
+      <ion-item class="ion-no-padding type-message" lines="none">
+        <ion-textarea clearOnEdit="true" 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>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
 </ion-footer>
diff --git a/src/app/pages/chat/group-messages/group-messages.page.scss b/src/app/pages/chat/group-messages/group-messages.page.scss
index 08390cfcc..f1acc3533 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.scss
+++ b/src/app/pages/chat/group-messages/group-messages.page.scss
@@ -137,38 +137,57 @@
         float: right;
       }
    }
+   .online{
+    color:#99e47b !important;
+    }
+  .offline{
+    color:#cbced1 !important;
+    }
+  .away{
+    color:#ffd21f !important;
+    }
+    .invisible{
+      color:#cbced1 !important;
+    }
+    .busy{
+      color:#f5455c !important;
+    }
  }
 
  ion-footer{
-   .row{
-     width: 380px;
-    margin: 0 auto;
-   }
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
+ }
+ 
+ .chat-icon-options{
+   display:block !important;
+   font-size: 25px;
+   float: right !important;
+   margin-top: 10px;
+ }
 
-  .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;
-  }
+ .chat-icon-send{
+   font-size: 45px;
+   margin: 0 auto;
+   margin-top: 4px;
+ }
 
   .type-message{
-    display: flex;
-    border: 1px solid #ebebeb;
-    border-radius: 25px;
-    padding-left: 15px;
-    align-items: center;
-    overflow: auto;
+   display: flex;
+   border: 1px solid #ebebeb;
+   border-radius: 25px;
+   padding-left: 15px;
+   align-items: center;
+   overflow: auto;
 
-    ion-textarea{
-      margin: 0 !important;
-      align-self: center;
-    }
-  }
- }
\ No newline at end of file
+   ion-textarea{
+     margin: 0 !important;
+     align-self: center;
+   }
+ }
+ 
+}
\ No newline at end of file
diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html
index 0668b7eac..c8802c92d 100644
--- a/src/app/pages/chat/messages/messages.page.html
+++ b/src/app/pages/chat/messages/messages.page.html
@@ -44,7 +44,8 @@
   </div>
 
 </ion-content>
-<ion-footer>
+
+<!-- <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
       <ion-col size="1">
@@ -59,11 +60,27 @@
         </ion-item>
       </ion-col>
       <ion-col size="2">
-        <!-- [disabled]="message === ''" -->
         <ion-label>
           <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>
   </ion-toolbar>
+</ion-footer> -->
+
+<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>
+    </div>
+    <div class="width-70">
+      <ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
+        <ion-textarea clearOnEdit="true" 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>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
 </ion-footer>
\ No newline at end of file
diff --git a/src/app/pages/chat/messages/messages.page.scss b/src/app/pages/chat/messages/messages.page.scss
index 7299ad24a..1a67bbcda 100644
--- a/src/app/pages/chat/messages/messages.page.scss
+++ b/src/app/pages/chat/messages/messages.page.scss
@@ -150,39 +150,43 @@
  }
 
  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;
-  }
-
-   .type-message{
-    display: flex;
-    border: 1px solid #ebebeb;
-    border-radius: 25px;
-    padding-left: 15px;
-    align-items: center;
-    overflow: auto;
-
-    ion-textarea{
-      margin: 0 !important;
-      align-self: center;
-    }
-  }
-  
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
  }
+ 
+ .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;
+ }
+
+  .type-message{
+   display: flex;
+   border: 1px solid #ebebeb;
+   border-radius: 25px;
+   padding-left: 15px;
+   align-items: center;
+   overflow: auto;
+
+   ion-textarea{
+     margin: 0 !important;
+     align-self: center;
+     overflow: auto;
+   }
+ }
+ 
+}
 
  .text-color-blue{
     font-size: 15px;
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
index 4baa1e7a5..c0f241913 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
@@ -19,21 +19,21 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content class="width-100">
   <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 class="main-content">
-    <div *ngIf="members">
+  <div class="main-content width-100">
+    <div class="members" *ngIf="members">
       <ion-label class="members-label">Contactos selecção:</ion-label>
       <ion-list class="members-list" *ngFor="let user of members">
         <div class="members-checkbox">
           <ion-checkbox checked color="primary"></ion-checkbox>
           <p>{{user.name}}</p>
-          <ion-icon name="ellipse"></ion-icon>
+          <ion-icon  class="{{user.status}}" name="ellipse"></ion-icon>
         </div>
       </ion-list>
     </div>
@@ -47,7 +47,7 @@
       <div *virtualItem="let user" class="item-checkbox">
         <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
         <ion-label>{{user.name}}</ion-label>
-        <div class="icon"><ion-icon name="ellipse"></ion-icon></div>
+        <div class="icon"><ion-icon class="{{user.status}}" name="ellipse"></ion-icon></div>
       </div>
       
     </ion-virtual-scroll>
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
index 876e8cf68..b681605ce 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
@@ -73,7 +73,7 @@
  }
 
  .main-content{
-   width: 100%;
+   //width: 100%;
    height: 100%;
    font-family: Roboto;
    margin: 0 auto;
@@ -81,15 +81,24 @@
    padding: 0 0 0 0;
    overflow:auto;
 
+   .members{
+     padding: 15px 20px 0 20px !important;
+
+     .members-list{
+      margin: 0 !important;
+      padding: 0 !important;
+     }
+   }
+
     .members-label{
-      margin: 10px 20px 10px 20px !important;
+      //margin: 10px 20px 10px 20px !important;
       /* font-size: 15px; */
       font-weight: bold;
     }
 
     .members-checkbox{
       display: flex;
-      margin: .5px 20px .5px 20px !important;
+      //margin: 0px 20px 0px 20px !important;
       overflow: auto;
       align-items: center;
 
@@ -124,8 +133,22 @@
      }
      .icon, .members-checkbox ion-icon{
        font-size: 10px;
-       color:#99e47b;
      }
+     .online{
+      color:#99e47b !important;
+    }
+   .offline{
+     color:#cbced1 !important;
+    }
+   .away{
+    color:#ffd21f !important;
+    }
+    .invisible{
+      color:#cbced1 !important;
+    }
+    .busy{
+      color:#f5455c !important;
+    }
    }
  
  
\ No newline at end of file
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
index 8c2c6dea7..3b6091d09 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
@@ -56,18 +56,46 @@ export class GroupContactsPage implements OnInit {
 
   ngOnInit() {
     //this.getRoomInfo();
-    this.loadUsers();
+    //this.loadUsers();
     console.log(this.roomId);
+    this.getChatInfo(); 
     //console.log(this.isGroupCreated);
   }
 
+  getChatInfo(){
+    console.log('HERE');
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      console.log('HERE 2');
+      console.log(room['room']);
+      this.getGroupContacts(room['room']);
+    });
+  }
+
+  getGroupContacts(room:any){
+    this.showLoader = true;
+    if(room.t === 'p'){
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
+        this.members = res['members'];
+        this.loadUsers1(this.members);
+        this.showLoader = false;
+      });
+    }
+    else{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
+        this.members = res['members'];
+        this.loadUsers1(this.members);
+        this.showLoader = false;
+      });
+    }
+  }
+
   updateGroup(){
     this.showLoader = true;
     this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
       this.room = room['room'];
       this.addContacts(this.room);
       this.showLoader = false;
-      this.openGroupMessage.emit(this.room._id)
+      this.openGroupMessage.emit(this.room._id);
     });
   }
   openGroupMessagesPage(){
@@ -76,11 +104,44 @@ export class GroupContactsPage implements OnInit {
     this.showLoader = false;
   }
 
+  loadUsers1(members:any){
+    this.options = { 
+      headers: this.headers,
+    };
+    this.chatService.getAllUsers().subscribe((res:any)=>{
+
+
+
+      if(members){
+        this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
+      }
+      else{
+        this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      }
+      
+      this.users = this.contacts.sort((a,b) => {
+        if(a.name < b.name){
+          return -1;
+        }
+        if(a.name > b.name){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(this.users);
+      
+      this.showLoader = false;
+    });
+  }
+
   loadUsers(){
     this.options = { 
       headers: this.headers,
     };
     this.chatService.getAllUsers().subscribe((res:any)=>{
+
+
+
       if(this.members){
         this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
       }
@@ -146,16 +207,16 @@ export class GroupContactsPage implements OnInit {
   onChange(event){
     this.textSearch = event.detail.value;
   }
+
   clicked(){
     console.log('clicked');
-    
   }
+
   selectedContact(user:any){
   /*   this.groupName = this.room.name; */
     user.isChecked = !user.isChecked;
-  
-
   }
+
   addContacts(room:any){
     console.log(room);
     this.selectedUserList = this.users.filter(function(contact) {
diff --git a/src/app/shared/chat/messages/contacts/contacts.page.ts b/src/app/shared/chat/messages/contacts/contacts.page.ts
index d52746222..68df0176b 100644
--- a/src/app/shared/chat/messages/contacts/contacts.page.ts
+++ b/src/app/shared/chat/messages/contacts/contacts.page.ts
@@ -42,8 +42,8 @@ export class ContactsPage implements OnInit {
 
   ngOnInit() {
     this.loadUsers();
-
   }
+
   onChange(event){
     this.textSearch = event.detail.value;
   }
@@ -70,6 +70,7 @@ export class ContactsPage implements OnInit {
     };
     this.chatService.getAllUsers().subscribe((res:any)=>{
       console.log(res.users);
+      //this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
       this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
       this.users = this.contacts.sort((a,b) => {
         if(a.name < b.name){

From 7ee9352a59fc0895c684bd89a0a635f1588171b1 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Mon, 29 Mar 2021 17:01:11 +0100
Subject: [PATCH 10/11] save

---
 src/app/pages/agenda/agenda.page.html                     | 2 +-
 src/app/pages/agenda/agenda.page.ts                       | 2 +-
 .../agenda/approve-event/approve-event.component.html     | 8 ++++----
 .../shared/agenda/event-list/event-list.component.html    | 6 +++---
 src/app/shared/agenda/event-list/event-list.component.ts  | 4 ++--
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 9add03469..d7f17b430 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -364,7 +364,7 @@
 
       
       <app-event-list [class.transparent]="mobileComponent.transparentEventList" *ngIf="mobileComponent.showEventList"
-        [segment]="segment"
+        [profile]="profile"
         (approveEventDismiss) = "approveEventDismiss($event)"
         (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
       >
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index fafddf780..d6dfccb9e 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -153,7 +153,7 @@ export class AgendaPage implements OnInit {
   }
 
   ngOnInit() {
-    this.profile = "mdgpr";
+    this.profile = "MDGPR";
     //Inicializar segment
    /*  localStorage.setItem('test', this.eventSelectedDate.toString()); */
 
diff --git a/src/app/shared/agenda/approve-event/approve-event.component.html b/src/app/shared/agenda/approve-event/approve-event.component.html
index 6d9a32514..64d1b829c 100644
--- a/src/app/shared/agenda/approve-event/approve-event.component.html
+++ b/src/app/shared/agenda/approve-event/approve-event.component.html
@@ -75,7 +75,7 @@
         <h5>Detalhes</h5>
         <ion-item class="ion-no-margin ion-no-padding">
           <ion-label>
-            <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
+            <p [innerHTML]="loadedEvent.workflowInstanceDataFields.Body"></p>
           </ion-label>
         </ion-item>
       </div>
@@ -95,10 +95,10 @@
     <div *ngIf="showAside" class="aside-right flex-column height-100">
       <div class="aside-buttons">
         <button full class="btn-ok" shape="round" >Editar evento</button>
-        <button full class="btn-ok" shape="round" >Aprovar</button>
-        <button class="btn-cancel" shape="round" >Emendar</button>
+        <button (click)="approveTask(loadedEvent.serialNumber)" full class="btn-ok" shape="round" >Aprovar</button>
+        <button (click)="emendTask(loadedEvent.serialNumber)" class="btn-cancel" shape="round" >Emendar</button>
         <div class="solid"></div>
-        <button full class="btn-delete" shape="round" >Rejeitar</button>
+        <button (click)="rejectTask(loadedEvent.serialNumber)" full class="btn-delete" shape="round" >Rejeitar</button>
       </div>
     </div>
   </div>
diff --git a/src/app/shared/agenda/event-list/event-list.component.html b/src/app/shared/agenda/event-list/event-list.component.html
index a04c7eb08..274571353 100644
--- a/src/app/shared/agenda/event-list/event-list.component.html
+++ b/src/app/shared/agenda/event-list/event-list.component.html
@@ -4,7 +4,7 @@
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
     </div>
     <div class="header-title">
-      <label>Eventos para Aprovação</label>
+      <label>1Eventos para Aprovação</label>
     </div>
   
   <!-- <ion-toolbar>
@@ -15,7 +15,7 @@
     <ion-title>Eventos para Aprovação</ion-title>
   </ion-toolbar> -->
   <ion-toolbar>
-    <ion-segment [(ngModel)]="segment">
+    <ion-segment [(ngModel)]="profile">
       <ion-segment-button value="MDGPR">
         Seu calendário
       </ion-segment-button>
@@ -33,7 +33,7 @@
      <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div [ngSwitch]="segment"> 
+  <div [ngSwitch]="profile"> 
     <ion-list *ngSwitchCase="'MDGPR'">
       <div *ngIf="eventsMDGPRList">
         <ion-list>
diff --git a/src/app/shared/agenda/event-list/event-list.component.ts b/src/app/shared/agenda/event-list/event-list.component.ts
index a98bf6ad0..5d4408e9c 100644
--- a/src/app/shared/agenda/event-list/event-list.component.ts
+++ b/src/app/shared/agenda/event-list/event-list.component.ts
@@ -22,7 +22,7 @@ export class EventListComponent implements OnInit {
   categories: string[];
   serialnumber:string;
 
-  @Input() segment:string;
+  @Input() profile:string;
   @Output() cloneAllmobileComponent = new EventEmitter<any>();
   @Output() approveEventDismiss = new EventEmitter<any>();
 
@@ -36,7 +36,7 @@ export class EventListComponent implements OnInit {
 
     ngOnInit() {
 
-      console.log(this.segment);
+      console.log(this.profile);
       this.LoadToApproveEvents();
   
       this.router.events.forEach((event) => {

From 3f5fd640fa076f63562c625854763847ccd01e14 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Tue, 30 Mar 2021 09:12:51 +0100
Subject: [PATCH 11/11] Styling events to approve from Agenda module

---
 src/app/pages/agenda/agenda.module.ts         |   2 +-
 .../event-list/event-list.component.html      | 102 +++++------
 .../event-list/event-list.component.scss      | 161 +++++++++---------
 3 files changed, 126 insertions(+), 139 deletions(-)

diff --git a/src/app/pages/agenda/agenda.module.ts b/src/app/pages/agenda/agenda.module.ts
index d35cb5a23..7aec81219 100644
--- a/src/app/pages/agenda/agenda.module.ts
+++ b/src/app/pages/agenda/agenda.module.ts
@@ -49,7 +49,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     EventListComponent,
     ApproveEventComponent,
     AttendeesPage,
-    AttendeeModalPage
+    AttendeeModalPage,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
diff --git a/src/app/shared/agenda/event-list/event-list.component.html b/src/app/shared/agenda/event-list/event-list.component.html
index 274571353..4eba898ba 100644
--- a/src/app/shared/agenda/event-list/event-list.component.html
+++ b/src/app/shared/agenda/event-list/event-list.component.html
@@ -1,19 +1,8 @@
-<ion-header class="ion-no-border px-20">
+<ion-header class="ion-no-border">
   <div class="header-content">
-    <div class="header-icon-left">
-      <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
-    </div>
     <div class="header-title">
-      <label>1Eventos para Aprovação</label>
+      <label>Eventos para Aprovação</label>
     </div>
-  
-  <!-- <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button (click) ="close()"></ion-back-button>
-    </ion-buttons>
-    <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
-    <ion-title>Eventos para Aprovação</ion-title>
-  </ion-toolbar> -->
   <ion-toolbar>
     <ion-segment [(ngModel)]="profile">
       <ion-segment-button value="MDGPR">
@@ -33,48 +22,47 @@
      <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div [ngSwitch]="profile"> 
-    <ion-list *ngSwitchCase="'MDGPR'">
-      <div *ngIf="eventsMDGPRList">
-        <ion-list>
-          <ion-item-sliding>
-            <ion-item class="Rectangle" lines="none" 
-              *ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber, event)">
-              <div class="content-mdgpr-{{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>
-        </ion-list>
-      </div>
-    </ion-list>
-    <ion-list *ngSwitchCase="'PR'">
-      <div *ngIf="eventsPRList">
-        <ion-item-sliding>
-          <ion-item class="Rectangle width-100" 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>
+  <div class="main-content" [ngSwitch]="profile" *ngIf="eventsMDGPRList">
+    <!--  <div class="header-content width-100"> -->
+      
+   <!-- </div> --> 
+     <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
+       <ion-item 
+         class="item ion-no-padding width-100" 
+         *ngFor="let event of eventsMDGPRList" 
+         (click)="openApproveModal(event.serialNumber)">
+         <div class="event-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-list>
+     <ion-list class="width-100" *ngSwitchCase="'PR'">
+       <div class="width-100" *ngIf="eventsPRList">
+           <ion-item
+             class=" ion-no-padding width-100"
+             *ngFor="let event of eventsPRList"
+             (click)="openApproveModal(event.serialNumber)">
+             <div class="item event-pr-{{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>
+       </div>
+     </ion-list>
+   </div>
 </ion-content>
diff --git a/src/app/shared/agenda/event-list/event-list.component.scss b/src/app/shared/agenda/event-list/event-list.component.scss
index a3ed3e1e0..90dbde141 100644
--- a/src/app/shared/agenda/event-list/event-list.component.scss
+++ b/src/app/shared/agenda/event-list/event-list.component.scss
@@ -1,7 +1,10 @@
+:host{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+}
 .header-content{
     overflow: auto;
     margin: 0 auto;
-    padding-top: 25px;
   }
   .header-icon-left{
     font-size: 33px;
@@ -9,89 +12,85 @@
     float: left;
   }
   .header-title{
-
     font-family: Roboto;
     font-size: 25px;
-    margin: 0 5px 0 5px;
     padding: 0;
     color:#000;
     float: left;
   }
-  ion-item-sliding{
-    margin-top: 5px;
-  }
-  .Rectangle {
-    border-radius: 15px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-    border: solid 1px #e9e9e9;
-    background-color: var(--white);
-    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{
-    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{
-    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;
-  }
-  
\ No newline at end of file
+  .main-content{
+    margin-top: 20px;
+    .item{
+      --inner-padding-end: 0 !important;
+      --inner-padding-top: 10px;
+      --inner-padding-bottom:10px;
+    }
+    .event-pr-Oficial{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #99e47b;
+      overflow: auto;
+    }
+    .event-pr-Pessoal{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #958bfc;
+      overflow: auto;
+    }
+    .event-mdgpr-Oficial{
+      border-radius: 5px;
+      border-right: 5px solid #ffb703;
+      overflow: auto;
+    }
+    .event-mdgpr-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-bottom: 10px;
+    }
+    .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-bottom: 10px;
+    }
+    .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;
+    }
+}
\ No newline at end of file