From b94e60be3500334889446115315005cf82551d7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20BRISON?=
<ext.sopra.jbrison@grandlyon.com>
Date: Thu, 7 Jan 2021 10:25:40 +0100
Subject: [PATCH] Fix/map
---
src/app/map/components/map.component.scss | 49 +++++++++++--------
src/app/map/components/map.component.ts | 15 ++----
src/app/map/services/map.service.ts | 24 +++++++--
.../components/card/card.component.html | 2 +-
.../structure-list.component.html | 2 +-
.../structure-list.component.ts | 2 +-
6 files changed, 55 insertions(+), 39 deletions(-)
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index a0b56f0dc..de50ff0b1 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -27,29 +27,38 @@
::ng-deep .leaflet-popup-close-button {
display: none;
}
-
+::ng-deep .leaflet-bar-part-single {
+ &:hover {
+ .fa-map-marker {
+ background-color: $blue-hover;
+ }
+ }
+ &:active {
+ .fa-map-marker {
+ background-color: $blue-active;
+ }
+ }
+}
::ng-deep .fa-map-marker {
- color: $black;
position: absolute;
- width: 12px;
- height: 12px;
- border: solid 1px currentColor;
- border-radius: 7px 7px 7px 0;
+ width: 18px;
+ height: 18px;
+ border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
- margin-left: -6px;
- margin-top: 6px;
-}
-
-::ng-deep .fa-map-marker:before {
- content: '';
- position: absolute;
- left: 3px;
- top: 3px;
- width: 4px;
- height: 4px;
- border: solid 1px currentColor;
- border-radius: 3px;
+ background-color: $grey-3;
+ margin-left: -8px;
+ margin-top: 4px;
+ &:before {
+ content: '';
+ position: absolute;
+ left: 5px;
+ top: 6px;
+ width: 7px;
+ height: 7px;
+ border-radius: 4px;
+ background-color: $white;
+ }
}
::ng-deep .leaflet-control-locate-circle {
@@ -82,6 +91,7 @@
::ng-deep .leaflet-popup {
border-radius: 6px;
@include background-hash;
+ border: 1px solid $grey-4;
padding: 0 0 4px 4px;
bottom: -15px !important;
h1 {
@@ -110,7 +120,6 @@
::ng-deep .leaflet-popup-content-wrapper {
box-shadow: unset;
border-radius: 6px;
- border: 1px solid $grey-4;
}
::ng-deep .leaflet-popup-content {
width: 240px;
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index e8b0b1cc5..4b2abe9c3 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -69,9 +69,11 @@ export class MapComponent implements OnChanges {
// Handle map marker tooltip
if (changes.toogleToolTipId && changes.toogleToolTipId.currentValue !== changes.toogleToolTipId.previousValue) {
if (changes.toogleToolTipId.previousValue !== undefined) {
- this.mapService.toogleToolTip(changes.toogleToolTipId.previousValue);
+ this.mapService.setUnactiveMarker(changes.toogleToolTipId.previousValue);
+ }
+ if (changes.toogleToolTipId.currentValue !== undefined) {
+ this.mapService.setActiveMarker(changes.toogleToolTipId.currentValue);
}
- this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
}
// Handle map marker selection
if (changes.selectedMarkerId && this.map) {
@@ -232,15 +234,6 @@ export class MapComponent implements OnChanges {
});
}
- /**
- * Toogle all tooltips given in parameters
- */
- public toggleToolTip(ids: Array<number>): void {
- ids.forEach((id) => {
- this.mapService.toogleToolTip(id);
- });
- }
-
private centerLeafletMapOnMarker(markerId: number): void {
const marker = this.mapService.getMarker(markerId);
const latLngs = [marker.getLatLng()];
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 58594ff23..eb7143fdc 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -8,6 +8,7 @@ import { MarkerType } from '../components/markerType.enum';
})
export class MapService {
private static markersList = {};
+ private isMarkerActive = false;
public markerIconHover = divIcon({
className: null,
html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker-locate"></use></svg>',
@@ -15,6 +16,13 @@ export class MapService {
iconAnchor: [20, 46],
popupAnchor: [0, -46],
});
+ public markerIconActive = divIcon({
+ className: null,
+ html: '<svg width="40" height="46" fill="#d50000"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
+ iconSize: [40, 46],
+ iconAnchor: [20, 46],
+ popupAnchor: [0, -46],
+ });
public markerIcon = divIcon({
className: null,
html:
@@ -96,13 +104,18 @@ export class MapService {
}
/**
- * Toogle a tooltip
* @param id marker id
*/
- public toogleToolTip(id: number): void {
- if (id) {
- this.getMarker(id).togglePopup();
+ public setActiveMarker(id: number): void {
+ this.getMarker(id).setIcon(this.getMarkerIconHover(MarkerType.structure));
+ }
+
+ public setUnactiveMarker(id: number): void {
+ // To skip mouseleave when user emit click on structure list
+ if (!this.isMarkerActive) {
+ this.getMarker(id).setIcon(this.getMarkerIcon(MarkerType.structure));
}
+ this.isMarkerActive = false;
}
/**
@@ -121,7 +134,8 @@ export class MapService {
*/
public setSelectedMarker(id: number): void {
if (id) {
- this.getMarker(id).setIcon(this.markerIconHover);
+ this.getMarker(id).setIcon(this.markerIconActive);
+ this.isMarkerActive = true;
}
}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index fb162dab7..2e4a7f611 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,4 +1,4 @@
-<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseover)="cardHover()">
+<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseenter)="cardHover()">
<div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
<span class="nomStructure">{{ structure.structureName }}</span>
<div
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index f0da17a8c..a4d7320ed 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -5,7 +5,7 @@
{{ structureList ? structureList.length : '0' }} structure{{ structureList && structureList.length > 1 ? 's' : '' }}
</div>
-<div (scroll)="onScrollDown($event)" id="listCard" class="listCard" (mouseout)="mouseOut()">
+<div (scroll)="onScrollDown($event)" id="listCard" class="listCard" (mouseleave)="mouseLeave()">
<app-card
*ngFor="let structure of structuresListChunked"
[structure]="structure"
diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts
index 7478e3778..68b0db213 100644
--- a/src/app/structure-list/structure-list.component.ts
+++ b/src/app/structure-list/structure-list.component.ts
@@ -55,7 +55,7 @@ export class StructureListComponent implements OnChanges {
this.displayMapMarkerId.emit([event.id]);
}
- public mouseOut(): void {
+ public mouseLeave(): void {
this.displayMapMarkerId.emit([undefined]);
}
--
GitLab