Add profile modal

src/app/shared/headers/header-no-search/header-no-search.page.html

@@ -14,7 +14,7 @@
         </div>
       </ion-col>
       <ion-col>
-        <div class="div-profile">
+        <div (click)="openSearch()" class="div-profile">
           <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
         </div>
       </ion-col>

src/app/shared/headers/header-no-search/header-no-search.page.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { AnimationController, ModalController } from '@ionic/angular';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { MenuController } from '@ionic/angular';
-
+import { ProfileComponent } from './profile/profile.component';
 @Component({
   selector: 'app-header-no-search',
   templateUrl: './header-no-search.page.html',
@@ -11,15 +11,43 @@ import { MenuController } from '@ionic/angular';
 export class HeaderNoSearchPage implements OnInit {
 
   constructor(private modalController: ModalController,
-    private menu: MenuController) { }
+    private menu: MenuController,
+    private animationController: AnimationController,) { }
 
   ngOnInit() {
   }
 
   async openSearch() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
     const modal = await this.modalController.create({
-      component: SearchPage,
-      cssClass: 'group-messages',
+      enterAnimation,
+      leaveAnimation,
+      component: ProfileComponent,
+      cssClass: 'model profile-modal',
       componentProps: {
       }
     });

src/app/shared/headers/header-no-search/profile/profile.component.html

@@ -0,0 +1,68 @@
+
+
+<ion-content class=" bg-blue">
+    <div class="profile-content">
+
+        <div class="d-flex justify-end" (click)="close()">
+            <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
+        </div>
+    
+    
+        <div class="go-back d-flex align-center" (click)="close()">
+            <ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
+        </div>
+    
+        <div >
+            <div class="d-flex align-center">       
+                
+                <ion-icon  class="profile-pic"  name="add-circle-outline"></ion-icon>
+       
+            </div>
+        </div>
+    
+        <div class="profile-info">
+            <div class="label-text">Dados Perfil</div>
+            <div class="user-role">Ministro e Director do Gabinete do Presidente da Rep.</div>
+            <div class="email">email@exemple.ao</div>
+        </div>
+
+
+        <div class="login-preference">
+            <div class="preference">Preferência Login</div>
+
+            <ion-row>
+                <ion-col class="align-center d-flex">
+                    <ion-checkbox class="checkBox"></ion-checkbox>
+                    Impressão Digital
+                </ion-col>
+                <ion-col class="align-center d-flex">
+                    <ion-checkbox class="checkBox"></ion-checkbox>
+                    PIN 
+                </ion-col>
+            </ion-row>
+
+        </div>
+
+
+    </div>
+
+</ion-content>
+
+
+
+<ion-footer class=" footer-container ion-no-border bg-blue">
+    <div class="d-flex justify-space-between">
+        <ion-buttons slot="start" (click)="close()">
+            <ion-button class="btn-cancel" fill="clear" color="#061b52" >
+              <ion-label>Cancelar</ion-label>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="end" (click)="close()">
+            <ion-button class="btn-ok" fill="clear" color="#fff" >
+              <ion-label>Gravar</ion-label>
+            </ion-button>
+          </ion-buttons>
+    
+    </div>
+
+  </ion-footer>

src/app/shared/headers/header-no-search/profile/profile.component.scss

@@ -0,0 +1,60 @@
+.profile-content{
+    padding: 20px 20px;
+}
+
+.icon{
+    font-size: 35px;
+}
+
+.go-back{
+    font-family: Roboto;
+    font-size: 25px;
+    .icon{
+        margin-right: 7px;
+    }
+}
+
+.profile-pic{
+    width: 200px;
+    height: 200px;
+    border-radius: 20px;
+    margin: 0px auto;
+}
+
+.profile-info{
+    .label-text{
+        font-size: 15px;
+        font-weight: bold;
+        color: white;
+        margin-bottom: 10px;
+    }
+    
+    .user-role{
+        background-color: white;
+        border-radius: 5px;
+        padding: 12px;
+        font-family: Roboto;
+        font-size: 13px;
+        color: black;
+        text-align: center;
+    }
+    
+    .email {
+        margin-top: 15px;
+    }
+    
+}
+
+.login-preference{
+    margin-top: 44px;
+
+    .preference{
+        font-family: Roboto;
+        font-size: 15px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+    .checkBox{
+        margin-right: 10px;
+    }
+}

src/app/shared/headers/header-no-search/profile/profile.component.spec.ts

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

src/app/shared/headers/header-no-search/profile/profile.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss'],
+})
+export class ProfileComponent implements OnInit {
+
+  constructor(private modalController:ModalController) { }
+
+  ngOnInit() {}
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+}