+
diff --git a/src/app/shared/headers/header-no-search/header-no-search.page.ts b/src/app/shared/headers/header-no-search/header-no-search.page.ts
index 6ee0a2d24..162df8e82 100644
--- a/src/app/shared/headers/header-no-search/header-no-search.page.ts
+++ b/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: {
}
});
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.html b/src/app/shared/headers/header-no-search/profile/profile.component.html
new file mode 100644
index 000000000..f67dc9e2b
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile.component.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dados Perfil
+
Ministro e Director do Gabinete do Presidente da Rep.
+
email@exemple.ao
+
+
+
+
+
Preferência Login
+
+
+
+
+ Impressão Digital
+
+
+
+ PIN
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.scss b/src/app/shared/headers/header-no-search/profile/profile.component.scss
new file mode 100644
index 000000000..6ee1890b9
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.spec.ts b/src/app/shared/headers/header-no-search/profile/profile.component.spec.ts
new file mode 100644
index 000000000..d50b2595b
--- /dev/null
+++ b/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
;
+
+ 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();
+ });
+});
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.ts b/src/app/shared/headers/header-no-search/profile/profile.component.ts
new file mode 100644
index 000000000..167fba49a
--- /dev/null
+++ b/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();
+ }
+
+}
diff --git a/src/global.scss b/src/global.scss
index c6c629fc6..e90076c2e 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -278,3 +278,19 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
height: 100%;
}
}
+
+
+.profile-modal{
+ .modal-wrapper{
+ position: absolute;
+ top: -40px;
+ right: 0px;
+ height: 100%;
+ width: 400px;
+ }
+}
+
+
+.footer-container{
+ padding: 10px 20px;
+}