From f59debf36acf3476f0e155350944ac87c8ef1d69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= <sebastien.andre@arolla.fr>
Date: Sun, 27 Dec 2020 16:48:16 +0100
Subject: [PATCH] Hide/show la popin d'infos des sauts

---
 .../src/app/list-of-jumps/list-of-jumps.component.css     | 8 ++++----
 .../src/app/list-of-jumps/list-of-jumps.component.html    | 6 ++++--
 .../src/app/list-of-jumps/list-of-jumps.component.ts      | 8 +++++---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
index 293751b..4ee0ab0 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
@@ -28,11 +28,11 @@ table {
 }
 
 .stylePopin {
-  position: absolute;
-  right: 10px;
-  top: 0;
+  position: relative;
+  right: -25px;
+  top: -25px;
   border: 1px solid black;
-  z-index: 1000;
+  /* z-index: 1000; */
 }
 .showPopin {
   display: '';
diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
index f39f996..b5fae27 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
@@ -5,11 +5,13 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element" style="text-align: left; cursor: pointer;">
           <mat-icon aria-hidden="false" aria-label="All informations of the jump" 
-                    (click)="showPopin($event, element)" style="display: block;">info</mat-icon>
-          <span [ngClass]="calculateClasses(element)">
+                    (click)="showPopin($event, element)">info</mat-icon>
+          <div [ngClass]="calculateClasses(element)">
+            <span>
             Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
             <br>Cutaway : {{element.withCutaway}}
             <br>Notes : {{element.notes}}</span>
+          </div>
         </td>
       </ng-container>
 
diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
index 9293379..1ab218d 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
@@ -25,6 +25,7 @@ export class ListOfJumpsComponent implements OnInit {
   public dataSourceTable;
   public resultsLength = 0;
   private previousElementId = -1;
+  private closePopin = false;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -56,15 +57,16 @@ export class ListOfJumpsComponent implements OnInit {
       this.previousElementId = elementId;
     }
 
-    if (elementId != this.previousElementId ) {
+    this.closePopin = (elementId === this.previousElementId);
+    if (elementId != this.previousElementId) {
       this.previousElementId = elementId;
     }
   }
 
   calculateClasses(item) {
     return {
-      'showPopin': item.id === this.previousElementId,
-      'hidePopin': item.id != this.previousElementId,
+      'showPopin': !this.closePopin || item.id === this.previousElementId,
+      'hidePopin': this.closePopin || item.id != this.previousElementId,
       'stylePopin': true
   };
   }