margin in mat-menu / new tooltips / replace purger by effacer / fix add role...

margin in mat-menu / new tooltips / replace purger by effacer / fix add role dialog message  / zoomin and zoomout with buttons / click on a piece show details + remove icon button to show detail / set font-family everywhere

src/app/app.component.scss

@@ -125,7 +125,7 @@
                                     display: flex;
                                     flex-direction: row;
                                 }
-
+                                /*
                                 &-menuButton {
                                     border-radius: 10px;
                                     margin-bottom: 5px;
@@ -134,6 +134,7 @@
                                 &-menuButton:hover {
                                     opacity: 0.75;
                                 }
+                                */
                             }
                         }
                     }
@@ -187,8 +188,49 @@
             height: 50px;
         }
     }
+
+    &-zoom {
+        position: fixed;
+        height: 110px;
+        right: 350px;
+        bottom: 25px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        z-index: 2;
+
+        button {
+            width: 50px;
+            height: 50px;
+
+            mat-icon {
+                transform: scale(1.2);
+            }
+        }
+    }
 }
 
 ::ng-deep .mat-tooltip {
-    font-size: 13px;
+    font-size: 15px;
+    font-family: 'Glacial Indifference', sans-serif;
+}
+
+::ng-deep .mat-button {
+    font-family: 'Glacial Indifference', sans-serif;
+    font-size: 16px;
+}
+
+::ng-deep .mat-menu-content {
+    padding: 5px;
+
+    button {
+        font-family: 'Glacial Indifference', sans-serif;
+        font-size: 17px;
+        border-radius: 10px;
+        margin-bottom: 5px;
+    }
+
+    button:hover {
+        opacity: 0.75;
+    }
 }
\ No newline at end of file

src/app/app.component.ts

-import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
 import { Mission } from './class/mission/mission';
 import { Scenario } from './class/scenario/scenario';
 import { Step } from './class/step/step';
@@ -24,6 +24,7 @@ import { ObjectiveReward } from './class/rewards/objective-reward/objective-rewa
 import { OtherReward } from './class/rewards/other-reward/other-reward';
 import { PrerequireRessource } from './class/prerequires/prerequire-ressource/prerequire-ressource';
 import { TooltipService } from './services/tooltip/tooltip.service';
+import { ZoomService } from './services/zoom/zoom.service';
 
 @Component({
   selector: 'app-root',
@@ -36,7 +37,8 @@ export class AppComponent {
   scenario: Scenario = new Scenario();
   @ViewChild('fileInput') fileInput: any;
 
-  constructor(private cdr: ChangeDetectorRef, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) {
+  constructor(private cdr: ChangeDetectorRef, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService,
+    private elementRef: ElementRef, private zoomService: ZoomService) {
     pieceDetailsService.piece = this.scenario;
 
     this.scenario.missions.forEach(mission => {
@@ -194,6 +196,21 @@ export class AppComponent {
     }
   }
 
+  zoomIn(): void {
+    const element = this.elementRef.nativeElement.querySelector('.container-appMouseWheelZoom');
+    this.zoomService.zoom += 0.1;
+    element.style.transform = `scale(${this.zoomService.zoom})`;
+  }
+
+  zoomOut(): void {
+    if (this.zoomService.zoom > 0.3) {
+      const element = this.elementRef.nativeElement.querySelector('.container-appMouseWheelZoom');
+      this.zoomService.zoom -= 0.1;
+      element.style.transform = `scale(${this.zoomService.zoom})`;      
+    }
+
+  }
+
   addMissionStep(mission: Mission, index: number): void {
     mission.addChronologieStep(index);
     mission.equalizeLengths();

src/app/components/dialogs/clean-dialog/clean-dialog.component.html

-<h2 mat-dialog-title>Purger le contenu</h2>
-<mat-dialog-content>Êtes vous sûr de vouloir purger le contenu de cette tuile {{data}} ?</mat-dialog-content>
+<h2 mat-dialog-title>Effacer le contenu</h2>
+<mat-dialog-content>Êtes vous sûr de vouloir effacer le contenu de cette tuile {{data}} ?</mat-dialog-content>
 <mat-dialog-actions align="end">
     <button mat-button mat-dialog-close>Non</button>
     <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Oui</button>

src/app/directives/mouse-wheel-zoom.directive.ts

 import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ZoomService } from '../services/zoom/zoom.service';
 
 @Directive({
   selector: '[appMouseWheelZoom]'
 })
 export class MouseWheelZoomDirective {
 
-  private zoom: number = 1;
   private element: HTMLElement;
 
-  constructor(private elementRef: ElementRef) {
+  constructor(private elementRef: ElementRef, private zoomService: ZoomService) {
     this.element = elementRef.nativeElement;
   }
 
@@ -18,10 +18,10 @@ export class MouseWheelZoomDirective {
     let zoomLevel: number = 0;
     if (event.deltaY < 0) {
       zoomLevel = 0.1
-    } else if (this.zoom > 0.3) {
+    } else if (this.zoomService.zoom > 0.3) {
       zoomLevel = -0.1
     }
-    this.zoom += zoomLevel;
-    this.element.style.transform = `scale(${this.zoom})`;
+    this.zoomService.zoom += zoomLevel;
+    this.element.style.transform = `scale(${this.zoomService.zoom})`;
   }
 }
\ No newline at end of file

src/app/pieces/educational-objective/educational-objective.component.html

-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left-top"></div>
     <div class="piece-attach piece-attach-left-bottom"></div>
     
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"
+        matTooltip="Ajouter une mission."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"
+        matTooltip="Supprimer la mission."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
    
     <div class="piece-form">

src/app/pieces/educational-objective/educational-objective.component.scss

@@ -119,7 +119,6 @@
                 background-position: center;
                 background-repeat: no-repeat;
                 background-size: 30%;
-                font-size: 15px;
             }
         }
     }

src/app/pieces/educational-objective/educational-objective.component.ts

@@ -27,7 +27,7 @@ export class EducationalObjectiveComponent implements OnInit {
 
   displayMenu: string = 'hide';
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.scenario.missions[this.i];
   }
 

src/app/pieces/game-context/game-context.component.html

-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-right-top"></div>
     <div class="piece-attach piece-attach-right-bottom"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
     
     <div class="piece-form">

src/app/pieces/game-context/game-context.component.scss

@@ -86,7 +86,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
         textarea {
             border-radius: 20px;
@@ -94,7 +93,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
         }
         &-title {
             margin-top: 20px;

src/app/pieces/game-context/game-context.component.ts

@@ -36,7 +36,7 @@ export class GameContextComponent implements OnInit {
     });
   } 
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.scenario;
   }
 

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html

-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-right-top"></div>
     <div class="piece-attach piece-attach-right-bottom"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
    
     <div class="piece-form">

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.scss

@@ -108,7 +108,6 @@
                 background-position: center;
                 background-repeat: no-repeat;
                 background-size: 30%;
-                font-size: 15px;
             }
         }
         &-footer {

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts

@@ -23,7 +23,7 @@ export class GameEducationnalObjectiveComponent implements OnInit {
 
   displayMenu: string = 'hide';
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.scenario;
   }
 

src/app/pieces/mission-context/mission-context.component.html

-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-left-top"></div>
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left-bottom"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"
+        matTooltip="Ajouter une mission."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"
+        matTooltip="Supprimer la mission."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-form">
@@ -20,15 +25,21 @@
         </div>
         <div class="piece-form-intrigue">
             <label for="intrigue">Intrigue</label>
-            <textarea name="intrigue" [(ngModel)]="missionContext.intrigue" placeholder="Concevez un site web ergonomique pour votre premier client"></textarea>  
+            <textarea name="intrigue" [(ngModel)]="missionContext.intrigue" placeholder="Concevez un site web ergonomique pour votre premier client"  
+            matTooltip="Quelle est l’histoire de la mission ? Quel est l’enjeu pour les joueurs ?"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         </div>
         <div class="piece-form-communication">
             <label for="communication">Moyen(s) de communication</label>
-            <textarea name="communication" [(ngModel)]="missionContext.communication"></textarea>
+            <textarea name="communication" [(ngModel)]="missionContext.communication"
+            matTooltip="Comment les joueurs vont-ils communiquer entre eux : à l'oral, par chat, en vocal sur ordinateur, par messages, etc."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         </div>
         <div class="piece-form-divers">
             <label for="divers">Divers</label>
-            <textarea name="divers" [(ngModel)]="missionContext.various"></textarea>
+            <textarea name="divers" [(ngModel)]="missionContext.various"
+            matTooltip="Tout autre élément que vous souhaiteriez prendre en compte dans la mission et non défini dans les tuiles"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         </div>
     </div>
 </div>

src/app/pieces/mission-context/mission-context.component.scss

@@ -101,7 +101,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
 
         textarea {
@@ -110,7 +109,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
         }
 
         &-title {

src/app/pieces/mission-context/mission-context.component.ts

@@ -27,7 +27,7 @@ export class MissionContextComponent implements OnInit {
 
   displayMenu: string = 'hide';
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.scenario.missions[this.i];
   }
 

src/app/pieces/role/role.component.html

-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-left-top"></div>
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left-bottom"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"
+        matTooltip="Ajouter un rôle."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-form">
@@ -29,7 +34,9 @@
         </div>
         <div class="piece-form-description">
             <label for="description">Description</label>
-            <textarea name="description" [(ngModel)]="role.description"></textarea>
+            <textarea name="description" [(ngModel)]="role.description"
+            matTooltip="Élément précis sur ce rôle si nécessaire."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         </div>
         <div class="piece-form-objectives">
             <label for="objective">Objectif(s) pédagoqique(s)</label>
@@ -128,7 +135,9 @@
             </div>
         </div>
 
-        <div class="piece-form-ressources">
+        <div class="piece-form-ressources"
+        matTooltip="Objets, ressources disponibles pour ce rôle"
+        matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
             <div class="piece-form-title">Ressources & compétences</div>
             <div class="piece-form-ressources-ressource" *ngFor="let ressource of role.ressources, let i = index">
                 <div class="piece-form-ressources-ressource-name">

src/app/pieces/role/role.component.scss

@@ -106,7 +106,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
 
         textarea {
@@ -115,7 +114,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
         }
 
         img {

src/app/pieces/role/role.component.ts

@@ -29,6 +29,7 @@ export class RoleComponent implements OnInit {
   @Input() role: Role = new Role();
   @Input() mission: Mission = new Mission();
   @Input() i: number = 0;
+  @Input() missionIndex: number = 0;
 
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
 
@@ -39,12 +40,12 @@ export class RoleComponent implements OnInit {
   displayMenu: string = 'hide';
   rewardType: number = 0;
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.role;
   }
 
   onClickAdd(): void {
-    const dialogRef = this.dialog.open(CreateDialogComponent, { data: 'un nouveau Rôle pour la Mission '+(this.i+1) });
+    const dialogRef = this.dialog.open(CreateDialogComponent, { data: 'un nouveau Rôle pour la Mission '+(this.missionIndex+1) });
     dialogRef.afterClosed().subscribe(result => {
       if (result == true) {
         this.mission.roles.push(new Role());        

src/app/pieces/step/step.component.html

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="arrow_back_ios" (click)="moveStep('left')" *ngIf="index > 0"></mat-icon>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
-        <mat-icon fontIcon="arrow_forward_ios" (click)="moveStep('right')"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveStep('left')" *ngIf="index > 0"
+        matTooltip="Décaler la tuile vers la gauche."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveStep('right')"
+        matTooltip="Décaler la tuile vers la droite."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-form">

src/app/pieces/step/step.component.scss

@@ -98,7 +98,6 @@
             border-radius: 10px;
             border: none;
             resize: none;
-            font-size: 15px;
             background-image: url("../../../assets/background-images/step.png");
             background-position: center;
             background-repeat: no-repeat;

src/app/pieces/step/step.component.ts

@@ -6,6 +6,7 @@ import { Step } from 'src/app/class/step/step';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
 import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dialog/suppress-dialog.component';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-step',
@@ -22,13 +23,13 @@ export class StepComponent implements OnInit {
   displayMenu: string = 'hide';
   pieceWidth = '400px';
 
-  constructor(private pieceDetailsService: PieceDetailsService, public dialog: MatDialog) { }
+  constructor(private pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
     this.durationChange();
   }
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.step;
   }
 

src/app/pieces/tasks/annexe-task/annexe-task.component.html

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'"
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
     : 'var(--piece-background-color)'"
@@ -8,19 +8,28 @@
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
+        matTooltip="Décaler la tuile vers la gauche."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
         <div>
-            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
+            matTooltip="Changer le type de cette tuile."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
             <mat-menu #menuChange="matMenu">
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer Tâche optionnelle</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
             </mat-menu>
         </div>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
-        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
+        matTooltip="Décaler la tuile vers la droite."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-prerequires" [class]="displayPrequires">

src/app/pieces/tasks/annexe-task/annexe-task.component.scss

@@ -190,7 +190,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
 
         textarea {
@@ -199,7 +198,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/annexe-task/annexe-task.component.ts

@@ -79,7 +79,7 @@ export class AnnexeTaskComponent implements OnInit {
     });
   } 
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.task;
     this.pieceDetailsService.parent = this.role;
   }

src/app/pieces/tasks/final-task/final-task.component.html

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'"
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
     : 'var(--piece-background-color)'"
@@ -7,19 +7,28 @@
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
+        matTooltip="Décaler la tuile vers la gauche."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
         <div>
-            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
+            matTooltip="Changer le type de cette tuile."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
             <mat-menu #menuChange="matMenu">
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer Tâche annexe</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer une Tâche optionnelle</button>
             </mat-menu>
         </div>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
-        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
+        matTooltip="Décaler la tuile vers la droite."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">

src/app/pieces/tasks/final-task/final-task.component.scss

@@ -225,7 +225,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
 
         textarea {
@@ -234,7 +233,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/final-task/final-task.component.ts

@@ -81,7 +81,7 @@ export class FinalTaskComponent implements OnInit {
     });
   } 
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.task;
     this.pieceDetailsService.parent = this.role;
   }

src/app/pieces/tasks/optionnal-task/optionnal-task.component.html

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'"
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
     : 'var(--piece-background-color)'"
@@ -8,19 +8,28 @@
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
+        matTooltip="Décaler la tuile vers la gauche."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
         <div>    
-            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
+            matTooltip="Changer le type de cette tuile."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
             <mat-menu #menuChange="matMenu">
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer Tâche annexe</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
             </mat-menu>
         </div>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
-        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
+        matTooltip="Décaler la tuile vers la droite."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">

src/app/pieces/tasks/optionnal-task/optionnal-task.component.scss

@@ -236,7 +236,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
 
         textarea {
@@ -245,7 +244,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts

@@ -81,7 +81,7 @@ export class OptionnalTaskComponent implements OnInit {
     });
   } 
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.task;
     this.pieceDetailsService.parent = this.role;
   }

src/app/pieces/tasks/random-event/random-event.component.html

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'"
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
     : 'var(--piece-background-color)'">
@@ -6,11 +6,18 @@
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
-        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
+        matTooltip="Décaler la tuile vers la gauche."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
+        matTooltip="Décaler la tuile vers la droite."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">

src/app/pieces/tasks/random-event/random-event.component.scss

@@ -227,7 +227,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
 
         textarea {
@@ -236,7 +235,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/random-event/random-event.component.ts

@@ -81,7 +81,7 @@ export class RandomEventComponent implements OnInit {
     });
   } 
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.task;
     this.pieceDetailsService.parent = this.role;
   }

src/app/pieces/tasks/repeat-task/repeat-task.component.html

-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
-        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
+        matTooltip="Décaler la tuile vers la gauche."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
+        matTooltip="Décaler la tuile vers la droite."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-form">

src/app/pieces/tasks/repeat-task/repeat-task.component.scss

@@ -84,7 +84,6 @@
             border-radius: 20px;
             resize: none;
             height: 50%;
-            font-size: 15px;
             padding: 10px;
             background-position: center;
             background-repeat: no-repeat;

src/app/pieces/tasks/repeat-task/repeat-task.component.ts

@@ -40,7 +40,7 @@ export class RepeatTaskComponent implements OnInit {
     });
   } 
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.task;
     this.pieceDetailsService.parent = this.role;
   }

src/app/pieces/tasks/task/task.component.html

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'"
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
     : 'var(--piece-background-color)'">
@@ -8,17 +8,24 @@
     <div class="piece-menu" [class]="displayMenu">
         <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
         <div>
-            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
+            matTooltip="Changer le type de cette tuile."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
             <mat-menu #menuChange="matMenu">
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer en Tâche annexe</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer Tâche optionnelle</button>
                 <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
             </mat-menu>
         </div>
-        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
-        <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
-        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
-        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"
+        matTooltip="Effacer le contenu de cette tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="delete" (click)="onClickDelete()"
+        matTooltip="Supprimer la tuile."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
+        matTooltip="Décaler la tuile vers la droite."
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">

src/app/pieces/tasks/task/task.component.scss

@@ -236,7 +236,6 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
-            font-size: 15px;
         }
 
         textarea {
@@ -245,7 +244,6 @@
             border: none;
             resize: none;
             flex-grow: 1;
-            font-size: 15px;
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/task/task.component.ts

@@ -81,7 +81,7 @@ export class TaskComponent implements OnInit {
     });
   } 
 
-  onClickDots(): void {
+  onClickPiece(): void {
     this.pieceDetailsService.piece = this.task;
     this.pieceDetailsService.parent = this.role;
   }

src/app/services/zoom/zoom.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ZoomService } from './zoom.service';
+
+describe('ZoomService', () => {
+  let service: ZoomService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ZoomService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/zoom/zoom.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ZoomService {
+
+  constructor() { }
+
+  zoom: number = 1;
+}

src/styles.scss

@@ -25,9 +25,20 @@
 }
 
 body {
-    //margin-top: 60px;
     background-color: var(--background-color);
     font-family: 'Glacial Indifference', sans-serif;
-    //transform: scale(0.9);
-    //transform-origin: top left;
+
+    input {
+        font-family: 'Glacial Indifference', sans-serif;
+        font-size: 17px;
+    }
+
+    textarea {
+        font-family: 'Glacial Indifference', sans-serif;
+        font-size: 17px;
+    }
+
+    select {
+        font-family: 'Glacial Indifference', sans-serif;
+    }
 }
\ No newline at end of file