From 23f5e954c97e86ebfe04040bd90bbf2a7461da2d Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Thu, 18 Feb 2021 12:44:35 +0100 Subject: [PATCH] Add profile modal --- src/app/pages/agenda/agenda.page.html | 2 +- src/app/pages/agenda/agenda.page.ts | 5 +- src/app/pages/events/events.page.ts | 6 +- .../pages/publications/publications.page.ts | 9 ++- src/app/pages/search/search.page.ts | 9 +-- src/app/services/auth.service.ts | 12 +++- .../header-no-search.page.html | 2 +- .../header-no-search/header-no-search.page.ts | 38 +++++++++-- .../profile/profile.component.html | 68 +++++++++++++++++++ .../profile/profile.component.scss | 60 ++++++++++++++++ .../profile/profile.component.spec.ts | 24 +++++++ .../profile/profile.component.ts | 19 ++++++ src/global.scss | 16 +++++ 13 files changed, 245 insertions(+), 25 deletions(-) create mode 100644 src/app/shared/headers/header-no-search/profile/profile.component.html create mode 100644 src/app/shared/headers/header-no-search/profile/profile.component.scss create mode 100644 src/app/shared/headers/header-no-search/profile/profile.component.spec.ts create mode 100644 src/app/shared/headers/header-no-search/profile/profile.component.ts diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html index 9da32c69b..6f827411d 100644 --- a/src/app/pages/agenda/agenda.page.html +++ b/src/app/pages/agenda/agenda.page.html @@ -249,7 +249,7 @@ - + diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts index 3b73f4f95..ef09c1e6d 100644 --- a/src/app/pages/agenda/agenda.page.ts +++ b/src/app/pages/agenda/agenda.page.ts @@ -263,10 +263,13 @@ export class AgendaPage implements OnInit { // auto scroll timeline setTimeout(() => { const timelineMarker = document.querySelector('.cal-current-time-marker'); - const timelineContainer = document.querySelectorAll('ion-content')[2]; + + const timelineContainer = document.querySelector('ion-content#timeline-conteiner'); + const shadowRoot = timelineContainer.shadowRoot; const scrollContainer = shadowRoot.querySelector('main'); + try { scrollContainer.scroll({ top: timelineMarker['offsetTop'] - ((scrollContainer.offsetHeight/2) - 60), diff --git a/src/app/pages/events/events.page.ts b/src/app/pages/events/events.page.ts index adbd76fa0..c7b7e3b3f 100644 --- a/src/app/pages/events/events.page.ts +++ b/src/app/pages/events/events.page.ts @@ -65,9 +65,9 @@ export class EventsPage implements OnInit { private storageService:StorageService, public activatedRoute: ActivatedRoute, private alertController: AlertService, - private modalController: ModalController, private authService: AuthService, - private processes:ProcessesService) { + private processes:ProcessesService, + private modalController:ModalController) { this.prEventList = null; // list @@ -317,7 +317,7 @@ export class EventsPage implements OnInit { } - + } diff --git a/src/app/pages/publications/publications.page.ts b/src/app/pages/publications/publications.page.ts index 2366fcaab..1bb91d16c 100644 --- a/src/app/pages/publications/publications.page.ts +++ b/src/app/pages/publications/publications.page.ts @@ -106,7 +106,7 @@ export class PublicationsPage implements OnInit { async viewPublications(folderId: string) { console.log('FOLDER', folderId) - /* const enterAnimation = (baseEl: any) => { + const enterAnimation = (baseEl: any) => { const backdropAnimation = this.animationController.create() .addElement(baseEl.querySelector('ion-backdrop')!) .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); @@ -128,14 +128,13 @@ export class PublicationsPage implements OnInit { const leaveAnimation = (baseEl: any) => { return enterAnimation(baseEl).direction('reverse'); } - */ - + /* let item = this.publicationFolderList; */ const modal = await this.modalController.create({ component: ViewPublicationsPage, - /* enterAnimation, - leaveAnimation, */ + enterAnimation, + leaveAnimation, componentProps:{ folderId:folderId, }, diff --git a/src/app/pages/search/search.page.ts b/src/app/pages/search/search.page.ts index 99024890c..09991ba83 100644 --- a/src/app/pages/search/search.page.ts +++ b/src/app/pages/search/search.page.ts @@ -1,20 +1,13 @@ import { Component, OnInit } from '@angular/core'; import { ModalController } from '@ionic/angular'; -import { ProcessesService } from 'src/app/services/processes.service'; import { SearchService } from "../../services/search.service"; import { SearchCategory } from "src/app/models/search-category"; import { SearchDocument } from "src/app/models/search-document"; import { formatDate } from '@angular/common'; -import { CloudData, CloudOptions } from 'angular-tag-cloud-module'; import { SenderPage } from 'src/app/pages/search/sender/sender.page'; import { OrganicEntityPage } from 'src/app/pages/search/organic-entity/organic-entity.page'; -import WordCloud from 'src/plugin/wordcloud2.js' -import { TopSearch } from 'src/app/models/top-search'; -import { EventListPage } from '../gabinete-digital/event-list/event-list.page'; +import WordCloud from 'src/plugin/wordcloud2.js'; import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page'; -import { ViewPublicationsPage } from 'src/app/pages/publications/view-publications/view-publications.page'; - -import { NgModel } from '@angular/forms'; import { PublicationDetailPage } from '../publications/view-publications/publication-detail/publication-detail.page'; @Component({ selector: 'app-search', diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index f1e2590e4..b6d3a3432 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -23,13 +23,23 @@ export class AuthService { private router:Router ) { this.headers = new HttpHeaders(); - } + //if(!environment.production){ + if (localStorage.getItem("user") != null) { + this.ValidatedUser = JSON.parse(localStorage.getItem('user')); + } + //} + + } public ValidatedUser:User; async login(user: User): Promise { user.BasicAuthKey = 'Basic ' + btoa(user.username + '@' + user.domainName + ':' + user.password); //conversão em base64 das credenciais inseridas + //if(!environment.production){ + localStorage.setItem('user', JSON.stringify(user) ); + //} + const options = { headers: {'Authorization': user.BasicAuthKey }}; this.headers = this.headers.set('Authorization',user.BasicAuthKey); this.opts = { diff --git a/src/app/shared/headers/header-no-search/header-no-search.page.html b/src/app/shared/headers/header-no-search/header-no-search.page.html index 75fb8713e..925ce35bb 100644 --- a/src/app/shared/headers/header-no-search/header-no-search.page.html +++ b/src/app/shared/headers/header-no-search/header-no-search.page.html @@ -14,7 +14,7 @@ -
+
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 @@ + + + +
+ +
+ +
+ + +
+
Perfil
+
+ +
+
+ + + +
+
+ +
+
Dados Perfil
+
Ministro e Director do Gabinete do Presidente da Rep.
+ +
+ + + + + +
+ + + + + + +
+ + + Cancelar + + + + + Gravar + + + +
+ + \ 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; +}