From 396f1cf2a8ec3b0bf490e6e1a76b9f00f9ef597a Mon Sep 17 00:00:00 2001
From: Antonin Coquet <ext.sopra.acoquet@grandlyon.com>
Date: Fri, 7 May 2021 17:03:14 +0200
Subject: [PATCH 1/5] feat: add a directive to show tooltip on icon
---
.../svg-icon/svg-icon.component.html | 12 ++++--
.../components/tooltip/tooltip.directive.ts | 41 +++++++++++++++++++
src/app/shared/directives/index.ts | 3 +-
3 files changed, 51 insertions(+), 5 deletions(-)
create mode 100644 src/app/shared/components/tooltip/tooltip.directive.ts
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 055f851e1..e022624d3 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 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 000000000..0fbc62bf6
--- /dev/null
+++ b/src/app/shared/components/tooltip/tooltip.directive.ts
@@ -0,0 +1,41 @@
+import {
+ Component,
+ Input,
+ Renderer2,
+ HostListener,
+ Directive,
+ ElementRef,
+ TemplateRef,
+ ViewContainerRef,
+ ContentChild,
+ ComponentRef,
+} from '@angular/core';
+
+@Directive({ selector: '[tooltipDirective]' })
+export class MyTooltipDirective {
+ @Input('title') tooltipTitle: string;
+ private tooltipId: 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.tooltipTitle && this.tooltipTitle.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 6f8730098..c03d89c7d 100644
--- a/src/app/shared/directives/index.ts
+++ b/src/app/shared/directives/index.ts
@@ -1,6 +1,7 @@
+import { MyTooltipDirective } 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, MyTooltipDirective];
--
GitLab
From 211fa6f6187f3f4018be291c7b1c8c323a1e6ec8 Mon Sep 17 00:00:00 2001
From: Antonin Coquet <ext.sopra.acoquet@grandlyon.com>
Date: Fri, 7 May 2021 17:06:26 +0200
Subject: [PATCH 2/5] fix: add missing css
---
src/styles.scss | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/src/styles.scss b/src/styles.scss
index 97e279390..220873364 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -278,3 +278,16 @@ button {
max-width: 50%;
margin: 0 auto;
}
+
+[tooltipDirective] {
+ position: relative;
+}
+
+.tooltip {
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ padding: 10px;
+ background: #fff;
+ box-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);
+}
--
GitLab
From a2cd2ad4d2a3ca802e278c84d054191c73aac38e Mon Sep 17 00:00:00 2001
From: Antonin Coquet <ext.sopra.acoquet@grandlyon.com>
Date: Wed, 12 May 2021 15:14:54 +0200
Subject: [PATCH 3/5] fix: add titles for tooltip of structure details
---
.../structure-details.component.html | 20 ++++++++++---------
1 file changed, 11 insertions(+), 9 deletions(-)
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 b57a0bcda..49fff57c4 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">
--
GitLab
From 13fe2a9e16e5556a2c05928720006d886f4f4265 Mon Sep 17 00:00:00 2001
From: Antonin Coquet <ext.sopra.acoquet@grandlyon.com>
Date: Mon, 17 May 2021 15:50:54 +0200
Subject: [PATCH 4/5] fix: scss and minor fix
---
src/app/shared/components/tooltip/tooltip.directive.ts | 3 ---
src/styles.scss | 3 ++-
2 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/app/shared/components/tooltip/tooltip.directive.ts b/src/app/shared/components/tooltip/tooltip.directive.ts
index 0fbc62bf6..1f6a8da64 100644
--- a/src/app/shared/components/tooltip/tooltip.directive.ts
+++ b/src/app/shared/components/tooltip/tooltip.directive.ts
@@ -8,14 +8,11 @@ import {
TemplateRef,
ViewContainerRef,
ContentChild,
- ComponentRef,
} from '@angular/core';
@Directive({ selector: '[tooltipDirective]' })
export class MyTooltipDirective {
@Input('title') tooltipTitle: string;
- private tooltipId: string;
-
constructor(
private renderer: Renderer2,
private elementRef: ElementRef,
diff --git a/src/styles.scss b/src/styles.scss
index 220873364..6525b3522 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -288,6 +288,7 @@ button {
bottom: 100%;
left: 0;
padding: 10px;
- background: #fff;
+ background: $grey;
+ color: $white;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);
}
--
GitLab
From 310f131e8e8dbeff0c8b36f61ba19c499e81022b Mon Sep 17 00:00:00 2001
From: Antonin Coquet <ext.sopra.acoquet@grandlyon.com>
Date: Wed, 19 May 2021 11:30:27 +0200
Subject: [PATCH 5/5] fix: minor fix after review
---
src/app/models/structure.model.ts | 12 +++++++-----
.../components/svg-icon/svg-icon.component.html | 2 +-
.../shared/components/tooltip/tooltip.directive.ts | 11 +++++------
src/app/shared/directives/index.ts | 4 ++--
src/styles.scss | 3 ++-
5 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 9ca8e2c49..0aa47e7a1 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 e022624d3..5c8754417 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,4 @@
-<div tooltipDirective title="{{ title }}">
+<div app-tooltipDirective title="{{ title }}">
<ng-template #tooltipTemplate>
<div class="tooltip">{{ title }}</div>
</ng-template>
diff --git a/src/app/shared/components/tooltip/tooltip.directive.ts b/src/app/shared/components/tooltip/tooltip.directive.ts
index 1f6a8da64..10e872c28 100644
--- a/src/app/shared/components/tooltip/tooltip.directive.ts
+++ b/src/app/shared/components/tooltip/tooltip.directive.ts
@@ -1,5 +1,4 @@
import {
- Component,
Input,
Renderer2,
HostListener,
@@ -10,9 +9,9 @@ import {
ContentChild,
} from '@angular/core';
-@Directive({ selector: '[tooltipDirective]' })
-export class MyTooltipDirective {
- @Input('title') tooltipTitle: string;
+@Directive({ selector: '[app-tooltipDirective]' })
+export class TooltipDirective {
+ @Input() title: string;
constructor(
private renderer: Renderer2,
private elementRef: ElementRef,
@@ -21,10 +20,10 @@ export class MyTooltipDirective {
@Input() parametroPlantilla: TemplateRef<any>;
- @ContentChild('tooltipTemplate') private tooltipTemplateRef: TemplateRef<Object>;
+ @ContentChild('tooltipTemplate') private tooltipTemplateRef: TemplateRef<object>;
@HostListener('mouseenter') onMouseEnter(): void {
- if (this.tooltipTitle && this.tooltipTitle.length > 0) {
+ 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));
}
diff --git a/src/app/shared/directives/index.ts b/src/app/shared/directives/index.ts
index c03d89c7d..924e8410c 100644
--- a/src/app/shared/directives/index.ts
+++ b/src/app/shared/directives/index.ts
@@ -1,7 +1,7 @@
-import { MyTooltipDirective } from '../components/tooltip/tooltip.directive';
+import { TooltipDirective } from '../components/tooltip/tooltip.directive';
import { ModalOutsideDirective } from './modalOutside.directive';
export { ModalOutsideDirective };
// tslint:disable-next-line:variable-name
-export const SharedDirectives = [ModalOutsideDirective, MyTooltipDirective];
+export const SharedDirectives = [ModalOutsideDirective, TooltipDirective];
diff --git a/src/styles.scss b/src/styles.scss
index 6525b3522..9f5d91e58 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -279,13 +279,14 @@ button {
margin: 0 auto;
}
-[tooltipDirective] {
+[app-tooltipDirective] {
position: relative;
}
.tooltip {
position: absolute;
bottom: 100%;
+ white-space: nowrap;
left: 0;
padding: 10px;
background: $grey;
--
GitLab