sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Hide/show la popin d'infos des sauts

Browse Source
This commit is contained in:
Sébastien André
2020-12-27 16:48:16 +01:00
parent 932fba5991
commit f59debf36a
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
View File

@@ -28,11 +28,11 @@ table {
} }
.stylePopin { .stylePopin {
position: absolute; position: relative;
right: 10px; right: -25px;
top: 0; top: -25px;
border: 1px solid black; border: 1px solid black;
z-index: 1000; /* z-index: 1000; */
} }
.showPopin { .showPopin {
display: ''; display: '';

6
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
View File

@@ -5,11 +5,13 @@
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" style="text-align: left; cursor: pointer;"> <td mat-cell *matCellDef="let element" style="text-align: left; cursor: pointer;">
<mat-icon aria-hidden="false" aria-label="All informations of the jump" <mat-icon aria-hidden="false" aria-label="All informations of the jump"
(click)="showPopin($event, element)" style="display: block;">info</mat-icon> (click)="showPopin($event, element)">info</mat-icon>
<span [ngClass]="calculateClasses(element)"> <div [ngClass]="calculateClasses(element)">
<span>
Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}}) Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
<br>Cutaway : {{element.withCutaway}} <br>Cutaway : {{element.withCutaway}}
<br>Notes : {{element.notes}}</span> <br>Notes : {{element.notes}}</span>
</div>
</td> </td>
</ng-container> </ng-container>

6
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
View File

@@ -25,6 +25,7 @@ export class ListOfJumpsComponent implements OnInit {
public dataSourceTable; public dataSourceTable;
public resultsLength = 0; public resultsLength = 0;
private previousElementId = -1; private previousElementId = -1;
private closePopin = false;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor( constructor(
@@ -56,6 +57,7 @@ export class ListOfJumpsComponent implements OnInit {
this.previousElementId = elementId; this.previousElementId = elementId;
} }
this.closePopin = (elementId === this.previousElementId);
if (elementId != this.previousElementId) { if (elementId != this.previousElementId) {
this.previousElementId = elementId; this.previousElementId = elementId;
} }
@@ -63,8 +65,8 @@ export class ListOfJumpsComponent implements OnInit {
calculateClasses(item) { calculateClasses(item) {
return { return {
'showPopin': item.id === this.previousElementId, 'showPopin': !this.closePopin || item.id === this.previousElementId,
'hidePopin': item.id != this.previousElementId, 'hidePopin': this.closePopin || item.id != this.previousElementId,
'stylePopin': true 'stylePopin': true
}; };
} }