diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 9ca8e2c497db491fb7b4c9fcac70fe15b2a8715b..0aa47e7a14729dccd72daf7b5d8fd79698ab7263 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -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;
}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.html b/src/app/shared/components/svg-icon/svg-icon.component.html
index 055f851e1d2243edd4b650b23ec510ea3ad9e9a7..5c875441709253e2124049a08056d8bd3f5dbe7e 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.html
+++ b/src/app/shared/components/svg-icon/svg-icon.component.html
@@ -1,4 +1,8 @@
-<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>
diff --git a/src/app/shared/components/tooltip/tooltip.directive.ts b/src/app/shared/components/tooltip/tooltip.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10e872c28c8b476e2526b97ff141b8e9dc7f491c
--- /dev/null
+++ b/src/app/shared/components/tooltip/tooltip.directive.ts
@@ -0,0 +1,37 @@
+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();
+ }
+ }
+}
diff --git a/src/app/shared/directives/index.ts b/src/app/shared/directives/index.ts
index 6f873009890cff2f656316fadce624731b672a4e..924e8410cadc985320d9a2af73b00218a316fe38 100644
--- a/src/app/shared/directives/index.ts
+++ b/src/app/shared/directives/index.ts
@@ -1,6 +1,7 @@
+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];
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index b57a0bcdaee981fb9546cb485f6701e940315764..49fff57c42763c015c843f3b7de7d3a6403d0b52 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -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">
diff --git a/src/styles.scss b/src/styles.scss
index 97e279390d3472b96b1b5a997a4c0516261303ac..9f5d91e585fb301090ac81683675d871ab64fde2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -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);
+}