diff --git a/src/app/components/edit-pin-popup/edit-pin-popup.component.html b/src/app/components/edit-pin-popup/edit-pin-popup.component.html index 9f944f7..aae9614 100644 --- a/src/app/components/edit-pin-popup/edit-pin-popup.component.html +++ b/src/app/components/edit-pin-popup/edit-pin-popup.component.html @@ -1,8 +1,8 @@ -
+
-
- Le titre est requis - Le titre doit contenir au moins 3 caractères +
+ Le titre est requis + Le titre doit contenir au moins 3 caractères
@@ -118,8 +125,15 @@ aria-label="Edit" (focus)="onFocus()" (blur)="onBlur()" /> -
- La localisation est requise +
+ La localisation est requise
    -
    - La description est requise - La description doit contenir au moins 3 caractères +
    + La description est requise + La description doit contenir au moins 3 caractères
    @@ -204,4 +228,4 @@ aria-label="Edit"
-
\ No newline at end of file + diff --git a/src/app/components/leaflet-map/leaflet-map.component.ts b/src/app/components/leaflet-map/leaflet-map.component.ts index 43ab38a..13b39ac 100644 --- a/src/app/components/leaflet-map/leaflet-map.component.ts +++ b/src/app/components/leaflet-map/leaflet-map.component.ts @@ -29,7 +29,6 @@ export class LeafletMapComponent implements OnInit { private allPins: Pin[] = []; private pinCountries: { [pinId: string]: string } = {}; private contextMenu: L.Popup | null = null; - private showTutorial: boolean = false; availableCountries: string[] = []; availablePersons: string[] = []; @@ -71,9 +70,10 @@ export class LeafletMapComponent implements OnInit { } } }); - this.introService.startIntro(); - this.showTutorial = this.route.snapshot.paramMap.get('tutorial') === "true"; + if(this.route.snapshot.paramMap.get('tutorial') === "true") { + this.introService.startIntro(); + } } private initializeMap(): void { @@ -282,7 +282,12 @@ export class LeafletMapComponent implements OnInit { componentRef.instance.marker = marker; popupDiv.appendChild(componentRef.location.nativeElement); - marker.bindPopup(popupDiv, { closeButton: false, minWidth: 200 }); + marker.bindPopup(popupDiv, { + closeButton: false, + minWidth: 300, + maxHeight: 350, + className: 'custom-popup-fixed-size', + }); this.markersMap[pin.id] = marker; diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index 4962917..670cc0e 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -24,6 +24,7 @@ import { PinService } from '../../services/pin/pin.service'; import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component'; import { FriendPageComponent } from '../friend-page/friend-page.component'; import { AuthService } from '../../services/auth/auth.service'; +import { NavbarService } from '../../services/navbar/navbar.service'; @Component({ selector: 'app-navbar', @@ -39,20 +40,9 @@ import { AuthService } from '../../services/auth/auth.service'; }) export class NavbarComponent implements OnInit { showTimeline: boolean = false; - isSearchOpen: boolean = false; isNavbarOpen: boolean = false; - toggleNavbar() { - this.isNavbarOpen = !this.isNavbarOpen; - this.isSearchOpen = false; - } - - toggleSearch() { - this.isSearchOpen = !this.isSearchOpen; - this.isNavbarOpen = false; - } - pins: Pin[] = []; pinsFiltered: Pin[] = []; inputFocus: Boolean = false; @@ -63,11 +53,30 @@ export class NavbarComponent implements OnInit { private route: ActivatedRoute, private pinService: PinService, private fb: FormBuilder, - private authService: AuthService + private authService: AuthService, + private navbarService: NavbarService ) { this.searchForm = this.fb.group({ searchControl: new FormControl(''), }); + + this.navbarService.isSearchOpen$.subscribe(isOpen => { + this.isSearchOpen = isOpen; + this.isNavbarOpen = false; + }); + + this.navbarService.isNavbarOpen$.subscribe(isOpen => { + this.isNavbarOpen = isOpen; + this.isSearchOpen = false; + }); + } + + toggleSearch(): void { + this.navbarService.toggleSearch(); + } + + toggleNavbar(): void { + this.navbarService.toggleNavbar(); } ngOnInit(): void { diff --git a/src/app/components/pin-marker/pin-marker.component.html b/src/app/components/pin-marker/pin-marker.component.html index acdcecd..8c84bb2 100644 --- a/src/app/components/pin-marker/pin-marker.component.html +++ b/src/app/components/pin-marker/pin-marker.component.html @@ -4,24 +4,25 @@ [pinId]="pin.id" [pinOpened]="pinOpened" > + -
+ +
+ + +
-
- {{ pin.title }} - +
+

{{ pin.title }}

+
+ + + +
-
+
-
- -
- Loading image... -
-
+ Loading image...
@@ -120,14 +114,14 @@
+
- - -
- No images available -
- +
+ - + +
- {{ pin.description || "Aucune description" }} + Aucune image disponible
+ - -
- -
+ +
+ {{ pin.description || "Aucune description" }} +
+ + +
+
diff --git a/src/app/services/intro/intro.service.ts b/src/app/services/intro/intro.service.ts index f02eade..521b174 100644 --- a/src/app/services/intro/intro.service.ts +++ b/src/app/services/intro/intro.service.ts @@ -1,12 +1,16 @@ import { Injectable } from '@angular/core'; import introJs from 'intro.js'; import { ModalService } from '../modal/modal.service'; +import { NavbarService } from '../navbar/navbar.service'; @Injectable({ providedIn: 'root' }) export class IntroService { - constructor(private modalService: ModalService) {} + constructor( + private modalService: ModalService, + private navbarService: NavbarService + ) {} private sleep(ms: number): Promise { return new Promise(resolve => setTimeout(resolve, ms)); @@ -20,6 +24,23 @@ export class IntroService { steps: [ { intro: 'Bienvenue sur MemoryMap ! ' }, { intro: 'Ensemble nous allons explorer les différentes fonctionnalitées disponible !'}, + ], + exitOnOverlayClick: false, + disableInteraction: false, + }); + intro.oncomplete(() => { + resolve(); + }); + + intro.start(); + }); + await this.sleep(300); + + await new Promise((resolve) => { + const intro = introJs(); + intro.setOptions({ + tooltipClass: 'custom-tooltip-with-avatar', + steps: [ { element: '#timeline', intro: 'Ici retrouvez tous vos souvenirs grâce à une frise chronologique de vos voyages!' }, { element: '#quete', intro: "N'hésitez pas à réaliser les différentes quètes, pour un petit plaisir personnel, que vous pourrez retrouvez ici !" }, ], @@ -27,6 +48,11 @@ export class IntroService { disableInteraction: false, }); + intro.onstart(async (element) => { + this.navbarService.toggleNavbar(); + await this.sleep(100); + }); + intro.oncomplete(() => { resolve(); }); @@ -102,6 +128,7 @@ export class IntroService { intro.oncomplete(() => { this.modalService.closeModal('friend-modal'); + this.navbarService.toggleNavbar(); resolve(); }); diff --git a/src/app/services/navbar/navbar.service.ts b/src/app/services/navbar/navbar.service.ts new file mode 100644 index 0000000..0a46084 --- /dev/null +++ b/src/app/services/navbar/navbar.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class NavbarService { + private isSearchOpenSubject = new BehaviorSubject(false); + private isNavbarOpenSubject = new BehaviorSubject(false); + + isSearchOpen$ = this.isSearchOpenSubject.asObservable(); + isNavbarOpen$ = this.isNavbarOpenSubject.asObservable(); + + toggleSearch(): void { + this.isSearchOpenSubject.next(!this.isSearchOpenSubject.value); + } + + toggleNavbar(): void { + this.isNavbarOpenSubject.next(!this.isNavbarOpenSubject.value); + } +} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index b1cc100..c9cf1c2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -53,6 +53,16 @@ height: 100%; } +.custom-popup-fixed-size .leaflet-popup-content { + width: 300px !important; + height: 350px !important; +} + +.custom-popup-fixed-size .leaflet-popup-content { + width: 300px !important; + height: 350px !important; +} + .custom-tooltip-with-avatar { position: relative; padding-left: 6rem !important;