Commit 56358bd5 authored by Antonin COQUET's avatar Antonin COQUET Committed by Hugo SUBTIL
Browse files

fix: add titles for tooltip of structure details

parent 0f1d634e
......@@ -158,15 +158,17 @@ export class Structure {
public getEquipmentsTitle(equipment: Equipment): string {
switch (equipment) {
case Equipment.wifi:
return 'Wifi';
return 'Wifi en accès libre';
case Equipment.bornes:
return 'Bornes';
return this.nbNumericTerminal > 1 ? 'Bornes numériques' : 'Borne numérique';
case Equipment.printer:
return 'Imprimantes';
return this.nbPrinters > 1 ? 'Imprimantes' : 'Imprimante';
case Equipment.tablet:
return 'Tablettes';
return this.nbTablets > 1 ? 'Tablettes' : 'Tablette';
case Equipment.computer:
return 'Ordinateurs';
return this.nbComputers > 1 ? 'Ordinateurs à disposition' : 'Ordinateur à disposition';
case Equipment.scanner:
return this.nbScanners > 1 ? 'Scanners' : 'Scanner';
default:
return null;
}
......
<svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor" [attr.stroke]="iconColor">
<title *ngIf="title">{{ title }}</title>
<use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
</svg>
<div app-tooltipDirective title="{{ title }}">
<ng-template #tooltipTemplate>
<div class="tooltip">{{ title }}</div>
</ng-template>
<svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor" [attr.stroke]="iconColor">
<use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
</svg>
</div>
import {
Input,
Renderer2,
HostListener,
Directive,
ElementRef,
TemplateRef,
ViewContainerRef,
ContentChild,
} from '@angular/core';
@Directive({ selector: '[app-tooltipDirective]' })
export class TooltipDirective {
@Input() title: string;
constructor(
private renderer: Renderer2,
private elementRef: ElementRef,
private viewContainerRef: ViewContainerRef
) {}
@Input() parametroPlantilla: TemplateRef<any>;
@ContentChild('tooltipTemplate') private tooltipTemplateRef: TemplateRef<object>;
@HostListener('mouseenter') onMouseEnter(): void {
if (this.title && this.title.length > 0) {
const view = this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
view.rootNodes.forEach((node) => this.renderer.appendChild(this.elementRef.nativeElement, node));
}
}
@HostListener('mouseleave') onMouseLeave(): void {
if (this.viewContainerRef) {
this.viewContainerRef.clear();
}
}
}
import { TooltipDirective } from '../components/tooltip/tooltip.directive';
import { ModalOutsideDirective } from './modalOutside.directive';
export { ModalOutsideDirective };
// tslint:disable-next-line:variable-name
export const SharedDirectives = [ModalOutsideDirective];
export const SharedDirectives = [ModalOutsideDirective, TooltipDirective];
......@@ -18,6 +18,7 @@
[type]="'ico'"
[iconColor]="'currentColor'"
[icon]="structure.getEquipmentsIcon(equipement)"
[title]="getEquipmentsLabel(equipement)"
></app-svg-icon>
</div>
</div>
......@@ -39,14 +40,15 @@
class="hide-on-print"
[structure]="structure"
[isCalledByDetails]="true"
[title]="'Horaire d\'ouverture'"
></app-structure-opening-status>
</div>
<div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'adress'"></app-svg-icon>
<app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
<p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
</div>
<div *ngIf="structure.website" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'web'"></app-svg-icon>
<app-svg-icon [type]="'ico'" [icon]="'web'" [title]="'Site web'"></app-svg-icon>
<a
target="_blank"
class="custom-link"
......@@ -65,7 +67,7 @@
rel="noopener noreferrer"
[href]="'http://' + structure.facebook"
>
<app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="Facebook"></app-svg-icon
<app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'"></app-svg-icon
></a>
<a
*ngIf="structure.twitter"
......@@ -74,7 +76,7 @@
rel="noopener noreferrer"
[href]="'http://' + structure.twitter"
>
<app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="Twitter"></app-svg-icon
<app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'"></app-svg-icon
></a>
<a
*ngIf="structure.instagram"
......@@ -83,7 +85,7 @@
rel="noopener noreferrer"
[href]="'http://' + structure.instagram"
>
<app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="Instagram"></app-svg-icon
<app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'"></app-svg-icon
></a>
<a
*ngIf="structure.linkedin"
......@@ -92,12 +94,12 @@
rel="noopener noreferrer"
[href]="'http://' + structure.linkedin"
>
<app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="Linkedin"></app-svg-icon
<app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'"></app-svg-icon
></a>
</div>
</div>
<div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'tel'"></app-svg-icon>
<app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
<p>{{ structure.contactPhone | phone }}</p>
</div>
</div>
......@@ -108,11 +110,11 @@
fxLayoutAlign="none center"
fxLayoutGap="13px"
>
<app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'"></app-svg-icon>
<app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
<p>{{ structure.contactMail }}</p>
</div>
<div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'pass'"></app-svg-icon>
<app-svg-icon [type]="'ico'" [icon]="'pass'" [title]="'Pass numérique'"></app-svg-icon>
<p>agréé Pass Numérique</p>
</div>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
......
......@@ -278,3 +278,18 @@ button {
max-width: 50%;
margin: 0 auto;
}
[app-tooltipDirective] {
position: relative;
}
.tooltip {
position: absolute;
bottom: 100%;
white-space: nowrap;
left: 0;
padding: 10px;
background: $grey;
color: $white;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment