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

Work on the jump tooltip

Browse Source
This commit is contained in:
Sébastien André
2021-01-08 16:24:40 +01:00
parent 51c509e4fe
commit 57575c0b81
5 changed files with 350 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,34 @@
<div class="content">
<button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']" skipLocationChange>Add jumps</button>
<div *ngIf="dataSourceTable != null else loading">
<button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']" skipLocationChange>Add jumps</button>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="infos">
<th mat-header-cell *matHeaderCellDef></th>
<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"
style="cursor: pointer;">info</mat-icon>
<div [ngClass]="calculateClasses(element)" style="display: none;">
<td mat-cell *matCellDef="let element" style="text-align: left;">
<mat-icon aria-hidden="false" aria-label="All informations of the jump" style="cursor: pointer;"
#tooltip="matTooltip" matTooltip="Tooltips in Angular" matTooltipPosition="above"
(click)="tooltip.toggle()">info</mat-icon>
<ng-template #popinContent>
<span>
Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
<br>Cutaway : {{element.withCutaway}}
<br>Notes : {{element.notes}}
</span>
</ng-template>
<!--
(mouseover)='showPopin($event, element)'
(mouseout)='hidePopin($event, element)'
<div [ngClass]="calculateClasses(element)" style="display: none;">
<span>
Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
<br>Cutaway : {{element.withCutaway}}
<br>Notes : {{element.notes}}</span>
</div>
</div> -->
</td>
</ng-container>