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

Begining of the style of info popin

Browse Source 
for the jumps
This commit is contained in:
Sébastien André
2021-01-07 16:54:24 +01:00
parent e6686cbc07
commit 09fda134fc
3 changed files with 19 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,16 +27,12 @@ table {
padding-top: 25px; padding-top: 25px;
} }
.stylePopin {
position: relative;
right: -25px;
top: -25px;
border: 1px solid black;
/* z-index: 1000; */
}
.showPopin { .showPopin {
display: ''; display: inline-block !important;
} position: relative;
.hidePopin { /* right: -25px;
display: none; top: -25px; */
} border: 1px solid black;
min-width: 125px;
z-index: 1000;
}

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

@@ -3,10 +3,12 @@
<table mat-table [dataSource]="dataSourceTable"> <table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="infos"> <ng-container matColumnDef="infos">
<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;"
(mouseover)='showPopin($event, element)'
(mouseout)='hidePopin($event, element)'>
<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)">info</mat-icon> style="cursor: pointer;">info</mat-icon>
<div [ngClass]="calculateClasses(element)"> <div [ngClass]="calculateClasses(element)" style="display: none;">
<span> <span>
Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}}) Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
<br>Cutaway : {{element.withCutaway}} <br>Cutaway : {{element.withCutaway}}

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

@@ -24,8 +24,7 @@ export class ListOfJumpsComponent implements OnInit {
]; ];
public dataSourceTable; public dataSourceTable;
public resultsLength = 0; public resultsLength = 0;
private previousElementId = -1; private showPopinForItemId = -1;
private closePopin = false;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor( constructor(
@@ -51,23 +50,16 @@ export class ListOfJumpsComponent implements OnInit {
} }
showPopin(event, item) { showPopin(event, item) {
let elementId = item.id; this.showPopinForItemId = item.id;
}
if (this.previousElementId == -1) { hidePopin(event, item) {
this.previousElementId = elementId; this.showPopinForItemId = -1;
}
this.closePopin = (elementId === this.previousElementId);
if (elementId != this.previousElementId) {
this.previousElementId = elementId;
}
} }
calculateClasses(item) { calculateClasses(item) {
return { return {
'showPopin': !this.closePopin || item.id === this.previousElementId, 'showPopin': this.showPopinForItemId != -1 && item.id === this.showPopinForItemId,
'hidePopin': this.closePopin || item.id != this.previousElementId,
'stylePopin': true
}; };
} }
} }