Update improve agenda

src/app/pages/agenda/agenda.page.html

@@ -83,11 +83,12 @@
       
               <!-- Adding a customized ng-template -->
               <ng-template #template let-view="view" let-row="row" let-col="col">
-                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [class.with-event]="view.dates[row*7+col].events.length">
+                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
-                  {{ view.dates[row*7+col].label }} 
+                   
-                  <div class="indicator-container">
+                  <div class="day">
-                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
+                    {{ view.dates[row*7+col].label }}
-                  </div>
+                  </div>  
+                   
                 </div>
               </ng-template>
             </div>

src/app/pages/agenda/agenda.page.ts

@@ -280,28 +280,27 @@ export class AgendaPage implements OnInit {
 
   // for calendar
   currentDayEventDisplayBorder(day: any, id: any){
-
+    
     const events = day[id].events;
 
     if (events.length == 0) {
-      return "";
-    } else if (events.length >= 1) {
       
-      /** @description store all event type */
+      return "";
-      let eventType = {};
+
-      let eventTypeNum: number;
+    } else if (events.length >= 1) {
+    
+      let classs = [];
 
       events.forEach(element => {
-        eventType[element.calendarName] = 1;
+
+        const profile_ = element.profile == 'md'? 'mdgpr': 'pr';
+        const eventtype = element.event.CalendarName;
+
+        classs.push(`calendar-event-border calendar-${profile_}-event-type-${eventtype}`);
+
       });
 
-      eventTypeNum = (Object.keys(eventType)).length
+      return classs.join(' ');
-
-      if (eventTypeNum == 2) { 
-        return ` calendar-event-border calendar-${this.profile}-event-type-both`;
-      } else {
-        return ` calendar-event-border calendar-${this.profile}-event-type-`+(Object.keys(eventType))[0];
-      }
     }
 
     return "";
@@ -419,6 +418,8 @@ export class AgendaPage implements OnInit {
 
     console.log(eventsList);
 
+    this.showTimelineFilterState = false;
+    
     eventsList.forEach((element, eventIndex) => {
       
       // timeline start
@@ -442,8 +443,6 @@ export class AgendaPage implements OnInit {
     });
 
     this.onCurrentChanged(this.eventSelectedDate);
-    //
-    this.showTimelineFilterState = false;
 
     return events;
   }

src/app/shared/agenda/event-list/event-list.component.html

@@ -1,4 +1,4 @@
-<ion-header class="ion-no-border">
+<ion-header class="ion-no-border px-20">
   <div class="header-content">
     <div class="header-icon-left">
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>

src/app/shared/agenda/event-list/event-list.component.scss

@@ -1,17 +1,15 @@
 .header-content{
-    width: 360px;
     overflow: auto;
     margin: 0 auto;
     padding-top: 25px;
   }
   .header-icon-left{
-    width: 36px;
     font-size: 33px;
     color: #42b9fe;
     float: left;
   }
   .header-title{
-    width: 300px;
+
     font-family: Roboto;
     font-size: 25px;
     margin: 0 5px 0 5px;

src/app/shared/agenda/new-event/new-event.component.html

@@ -16,11 +16,11 @@
       <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
+        <div class="ion-input-class flex-grow-1">
           <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
         </div>
       </div>
@@ -32,11 +32,11 @@
     </div>
   
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
+        <div class="ion-input-class flex-grow-1">
           <ion-select  placeholder="Selecione agenda"
           selectedText="{{postEvent.CalendarName}}" 
           [(ngModel)]="postEvent.CalendarName" 
@@ -50,11 +50,11 @@
     </div>
 
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
+        <div class="ion-input-class flex-grow-1">
           <ion-select  placeholder="Selecione tipo" 
           [(ngModel)]="postEvent.Categories[0]" 
           interface="action-sheet" 
@@ -69,11 +69,11 @@
     </div>
   
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
+        <div class="ion-input-class flex-grow-1">
           <ion-datetime 
             placeholder="Início"
             [(ngModel)]="postEvent.StartDate"
@@ -90,11 +90,11 @@
     </div>
     
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
+        <div class="ion-input-class flex-grow-1">
           <ion-datetime 
             placeholder="Fim"
             [(ngModel)]="postEvent.EndDate"
@@ -111,11 +111,11 @@
     </div>
     
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
+        <div class="ion-input-class flex-grow-1">
           <ion-select 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>
@@ -125,11 +125,11 @@
     </div>
     
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
         </div>
-        <div (click)="openAttendees()" class="ion-input-class-no-height">
+        <div (click)="openAttendees()" class="ion-input-class-no-height flex-grow-1">
           <div class="list-people">
             <ion-item lines="none">
               <ion-list>
@@ -146,11 +146,11 @@
     </div>
     
     <div hidden class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <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="ion-input-class flex-grow-1-no-height">
           <div class="list-people">
             <ion-item lines="none">
               <ion-list>
@@ -167,11 +167,11 @@
     </div>
     
     <div class="container-div">
-      <div class="ion-item-class-2">
+      <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
+        <div class="ion-input-class flex-grow-1">
           <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
         </div>
       </div>
@@ -203,8 +203,8 @@
     </div> 
   </div>    
 </ion-content>
-<ion-footer class="ion-no-border d-flex justify-center">
+<ion-footer class="ion-no-border px-20">
-  <ion-toolbar class="btn-div ">
+  <ion-toolbar class="d-flex justify-space-between">
     <ion-buttons slot="start">
       <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
         <ion-label>Cancelar</ion-label>

src/app/shared/agenda/new-event/new-event.component.scss

@@ -18,7 +18,6 @@ ion-content{
   transform: translate3d(0, 1px, 0);
   
   .title-content{
-    width: 360px;
     margin: 0px auto;
     overflow: auto;
     padding: 0 !important;
@@ -46,7 +45,6 @@ ion-content{
   padding: 15px 20px 0 20px;
 
   .ion-item-container{
-      width: 360px;
       margin: 15px auto;
       border: 1px solid #ebebeb;
       border-radius: 5px;
@@ -63,7 +61,6 @@ ion-content{
       overflow: auto;
     }
     .ion-item-class-2{
-      width: 360px;
       margin: 0px auto;
     }
     .ion-icon-class{
@@ -78,7 +75,6 @@ ion-content{
       margin-left: 0;
     }
     .ion-input-class{
-      width: 315px;
       height: 45px;
       border: 1px solid #ebebeb;
       border-radius: 5px;

src/app/shared/agenda/view-event/view-event.page.html

@@ -20,7 +20,7 @@
 <ion-content>
   <div class="main-content">
     <div class="upper-content">
-      <div class="content-location d-flex justify-space-between">
+      <div class="content-location d-flex justify-space-betweenu">
         <div class="location-detail">
           <ion-label >{{loadedEvent.Location}}</ion-label>
         </div>

src/global.scss

@@ -178,32 +178,44 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 
 .calendar-event-border{
-    border-radius: 21px !important;
     color: black !important;
     margin: 0px auto !important;
-    width: 35px !important;
+    border: 1px solid #fff;
+    border-radius: 50px;
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border-radius: 106px;
+    width: 30px !important;
+    height: 30px;
+    padding: 0px !important;
+    div.day{
+        padding: 0px !important;
+        transform: rotate(-45deg);
+    }
 }
+
 .calendar-mdgpr-event-type-Oficial{
     border-left: 3px solid #ffb703 !important;
 }
 .calendar-mdgpr-event-type-Pessoal{
-    border-right: 3px solid #f05d5e !important;
+    border-top: 3px solid #f05d5e !important;
 }
 .calendar-mdgpr-event-type-both{
     border-left: 3px solid #ffb703 !important;
-    border-right: 3px solid #f05d5e !important;
+    border-top: 3px solid #f05d5e !important;
 }
 .calendar-pr-event-type-both{
-    border-left: 3px solid #99e47b !important;
+    border-right: 3px solid #99e47b !important;
-    border-right: 3px solid #958bfc !important;
+    border-bottom: 3px solid #958bfc !important;
 }
 
 .calendar-pr-event-type-Oficial{
-    border-left: 3px solid #99e47b !important;
+    border-right: 3px solid #99e47b !important;
 }
 
 .calendar-pr-event-type-Pessoal{
-    border-left: 3px solid #958bfc !important;
+    border-bottom: 3px solid #958bfc !important;
 }
 
 .cal-hour-segment {
@@ -447,4 +459,14 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     div.cal-event:focus{
         outline: none !important;
     }
+}
+
+
+.calendar-component{
+    td{
+        padding: 8px !important;
+        div{
+            padding-left: 0px;
+        }
+    }
 }