Tooltips on icon buttons

src/app/app.component.html

@@ -53,10 +53,12 @@
       
     </div>
 
-    <button *ngIf="currentRoute != '/list'" mat-icon-button id="new-calculator" routerLink="/list" (click)="sidenav.close()">
+    <button *ngIf="currentRoute != '/list'" mat-icon-button id="new-calculator" routerLink="/list"
+      [title]="uitextSidenavNewCalc" (click)="sidenav.close()">
       <mat-icon>add_box</mat-icon>
     </button>
-    <a *ngIf="enableHeaderDoc" target="_blank" id="header-doc" href="assets/docs-fr/index.html" (click)="sidenav.close()">
+    <a *ngIf="enableHeaderDoc" target="_blank" id="header-doc" href="assets/docs-fr/index.html"
+      [title]="uitextSidenavHelp" (click)="sidenav.close()">
       <mat-icon>help</mat-icon>
     </a>
 

src/app/components/app-setup/app-setup.component.html

@@ -7,10 +7,10 @@
         <h1>{{ uitextTitle }}</h1>
       </mat-card-title>
 
-      <button type="button" mat-icon-button (click)="storePreferences()">
+      <button type="button" mat-icon-button (click)="storePreferences()" [title]="uitextStorePreferences">
         <mat-icon>file_download</mat-icon>
       </button>
-      <button type="button" mat-icon-button (click)="restoreDefaultValues()">
+      <button type="button" mat-icon-button (click)="restoreDefaultValues()" [title]="uitextRestoreDefaultValues">
         <mat-icon>settings_backup_restore</mat-icon>
       </button>
     </mat-card-header>

src/app/components/app-setup/app-setup.component.ts

@@ -89,6 +89,13 @@ export class ApplicationSetupComponent extends BaseComponent implements Observer
         return this.intlService.localizeText("ERROR_PARAM_MUST_BE_A_NUMBER");
     }
 
+    public get uitextStorePreferences(): string {
+        return this.intlService.localizeText("INFO_SETUP_STORE_PREFERENCES");
+    }
+
+    public get uitextRestoreDefaultValues(): string {
+        return this.intlService.localizeText("INFO_SETUP_RESTORE_DEFAULT_VALUES");
+    }
 
     public storePreferences() {
         this.appSetupService.saveValuesIntoLocalStorage();

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html

-<button mat-icon-button id="show-values-chart" (click)="toggleViewChart()">
+<button mat-icon-button id="show-values-chart" (click)="toggleViewChart()" [title]="uitextShowValuesChart">
     <mat-icon *ngIf="! viewChart">show_chart</mat-icon>
     <mat-icon *ngIf="viewChart">mode_edit</mat-icon>
 </button>

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts

@@ -381,39 +381,39 @@ export class DialogEditParamValuesComponent implements OnInit {
         };
     }
 
-    public get uiTextModeSelection() {
+    public get uiTextModeSelection(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_MODE");
     }
 
-    public get uitextValeurMini() {
+    public get uitextValeurMini(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_VALEURMINI");
     }
 
-    public get uitextValeurMaxi() {
+    public get uitextValeurMaxi(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_VALEURMAXI");
     }
 
-    public get uitextPasVariation() {
+    public get uitextPasVariation(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_PASVARIATION");
     }
 
-    public get uitextClose() {
+    public get uitextClose(): string {
         return this.intlService.localizeText("INFO_OPTION_CLOSE");
     }
 
-    public get uitextCancel() {
+    public get uitextCancel(): string {
         return this.intlService.localizeText("INFO_OPTION_CANCEL");
     }
 
-    public get uitextValidate() {
+    public get uitextValidate(): string {
         return this.intlService.localizeText("INFO_OPTION_VALIDATE");
     }
 
-    public get uitextEditParamVariableValues() {
+    public get uitextEditParamVariableValues(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_TITLE");
     }
 
-    public get uitextListeValeurs() {
+    public get uitextListeValeurs(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_VALUES_FORMAT");
     }
 
@@ -421,26 +421,34 @@ export class DialogEditParamValuesComponent implements OnInit {
         return this.intlService.localizeText("ERROR_PARAM_MUST_BE_A_NUMBER");
     }
 
-    public get uitextMustBeListOfNumbers() {
+    public get uitextMustBeListOfNumbers(): string {
         return sprintf(this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_VALUES_FORMAT_ERROR"), this.separatorPattern);
     }
 
-    public get uitextDecimalSeparator() {
+    public get uitextDecimalSeparator(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_DECIMAL");
     }
 
-    public get uitextImportFile() {
+    public get uitextImportFile(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_IMPORT_FICHIER");
     }
 
-    public get uitextExtensionStrategy() {
+    public get uitextExtensionStrategy(): string {
         return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_EXT_STRATEGY");
     }
 
-    public get uitextMustBePositive() {
+    public get uitextMustBePositive(): string {
       return this.intlService.localizeText("ERROR_PARAM_MUST_BE_POSITIVE");
     }
 
+    public get uitextShowValuesChart(): string {
+        if (this.viewChart) {
+            return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_EDIT_VALUES");
+        } else {
+            return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_SHOW_CHART");
+        }
+    }
+
     public ngOnInit() {
         this.initVariableValues();
     }

src/app/components/field-set/field-set.component.html

@@ -8,20 +8,20 @@
                 {{ i }}
             </mat-option>
         </mat-select>
-        <button type="button" mat-icon-button (click)="onAddClick()" class="add-structure">
+        <button type="button" mat-icon-button (click)="onAddClick()" class="add-structure" [title]="uitextAddStructure">
             <mat-icon>add_box</mat-icon>
         </button>
-        <button type="button" mat-icon-button (click)="onCopyClick()" class="copy-structure">
+        <button type="button" mat-icon-button (click)="onCopyClick()" class="copy-structure" [title]="uitextCopyStructure">
             <mat-icon>content_copy</mat-icon>
         </button>
         |
-        <button type="button" mat-icon-button [disabled]="! enableRemoveButton" (click)="onRemoveClick()">
+        <button type="button" mat-icon-button [disabled]="! enableRemoveButton" (click)="onRemoveClick()" [title]="uitextRemoveStructure">
             <mat-icon>delete</mat-icon>
         </button>
-        <button type="button" mat-icon-button [disabled]="! enableUpButton" (click)="onMoveUpClick()">
+        <button type="button" mat-icon-button [disabled]="! enableUpButton" (click)="onMoveUpClick()" [title]="uitextMoveStructureUp">
             <mat-icon>arrow_upward</mat-icon>
         </button>
-        <button type="button" mat-icon-button [disabled]="! enableDownButton" (click)="onMoveDownClick()">
+        <button type="button" mat-icon-button [disabled]="! enableDownButton" (click)="onMoveDownClick()" [title]="uitextMoveStructureDown">
             <mat-icon>arrow_downward</mat-icon>
         </button>
     </div>

src/app/components/field-set/field-set.component.ts

@@ -311,6 +311,26 @@ export class FieldSetComponent implements DoCheck {
         this._paramComponents.forEach(fsc => fsc.updateLinkedParameter());
     }
 
+    public get uitextAddStructure(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_ADD");
+    }
+
+    public get uitextCopyStructure(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_COPY");
+    }
+
+    public get uitextRemoveStructure(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_REMOVE");
+    }
+
+    public get uitextMoveStructureUp(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_MOVE_UP");
+    }
+
+    public get uitextMoveStructureDown(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_MOVE_DOWN");
+    }
+
     /**
      * clic sur le bouton ajouter
      */

src/app/components/fixedvar-results/fixed-results.component.html

 <div class="fixed-results-container" *ngIf="hasFixedParameters">
 
     <div class="fixed-results-buttons">
-        <button mat-icon-button (click)="exportAsSpreadsheet()">
+        <button mat-icon-button (click)="exportAsSpreadsheet()" [title]="uitextExportAsSpreadsheet">
             <mat-icon color="primary">file_download</mat-icon>
         </button>
     </div>

src/app/components/fixedvar-results/fixed-results.component.ts

@@ -46,6 +46,10 @@ export class FixedResultsComponent {
         return this.intlService.localizeText("INFO_CALCULATOR_VALEURS");
     }
 
+    private get uitextExportAsSpreadsheet() {
+        return this.intlService.localizeText("INFO_RESULTS_EXPORT_AS_SPREADSHEET");
+    }
+
     private get fixedParams() {
         return this._fixedResults && this._fixedResults.fixedParameters;
     }

src/app/components/fixedvar-results/var-results.component.html

 <div class="var-results-container" #variableResults *ngIf="hasResults" fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="var-results-buttons">
-            <button mat-icon-button (click)="exportAsSpreadsheet()">
+            <button mat-icon-button (click)="exportAsSpreadsheet()" [title]="uitextExportAsSpreadsheet">
                 <mat-icon color="primary">file_download</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(variableResults)">
+            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(variableResults)" [title]="uitextEnterFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()">
+            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
             </button>
         </div>

src/app/components/fixedvar-results/var-results.component.ts

@@ -181,6 +181,18 @@ export class VarResultsComponent extends ResultsComponent {
         XLSX.writeFile(wb, "VariableResults.xlsx");
     }
 
+    public get uitextExportAsSpreadsheet() {
+        return this.intlService.localizeText("INFO_RESULTS_EXPORT_AS_SPREADSHEET");
+    }
+
+    public get uitextEnterFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_ENTER_FS");
+    }
+
+    public get uitextExitFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXIT_FS");
+    }
+
     /** Shows a modal displaying the log messages details for a calcutation step */
     public openLogDetails(messages: Message[]) {
         if (this.isFullscreen) {

src/app/components/pab-results/pab-results-table.component.html

@@ -2,13 +2,13 @@
 <div class="pab-results-table-container" #pabResultsTable fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="pab-results-table-buttons">
-            <button mat-icon-button (click)="exportAsSpreadsheet()">
+            <button mat-icon-button (click)="exportAsSpreadsheet()" [title]="uitextExportAsSpreadsheet">
                 <mat-icon color="primary">file_download</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(pabResultsTable)">
+            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(pabResultsTable)" [title]="uitextEnterFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()">
+            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
             </button>
         </div>

src/app/components/pab-results/pab-results-table.component.ts

@@ -136,4 +136,16 @@ export class PabResultsTableComponent extends ResultsComponent {
         // save and download
         XLSX.writeFile(wb, "PABResults.xlsx");
     }
+
+    public get uitextExportAsSpreadsheet() {
+        return this.intlService.localizeText("INFO_RESULTS_EXPORT_AS_SPREADSHEET");
+    }
+
+    public get uitextEnterFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_ENTER_FS");
+    }
+
+    public get uitextExitFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXIT_FS");
+    }
 }

src/app/components/pab-table/pab-table.component.html

@@ -21,21 +21,26 @@
                     {{ i }}
                 </mat-option>
             </mat-select>
-            <button type="button" mat-icon-button color="primary" [disabled]="! enableAddButton" (click)="onAddClick()">
+            <button type="button" mat-icon-button color="primary" [disabled]="! enableAddButton" (click)="onAddClick()"
+              [title]="uitextAdd">
                 <mat-icon>add_box</mat-icon>
             </button>
-            <button type="button" mat-icon-button color="primary" [disabled]="! enableCopyButton" (click)="onCopyClick()">
+            <button type="button" mat-icon-button color="primary" [disabled]="! enableCopyButton" (click)="onCopyClick()"
+              [title]="uitextCopy">
                 <mat-icon>content_copy</mat-icon>
             </button>
             |
-            <button type="button" mat-icon-button color="primary" [disabled]="! enableRemoveButton" (click)="onRemoveClick()">
+            <button type="button" mat-icon-button color="primary" [disabled]="! enableRemoveButton" (click)="onRemoveClick()"
+              [title]="uitextRemove">
                 <mat-icon>delete</mat-icon>
             </button>
-            <button type="button" mat-icon-button color="primary" [disabled]="! enableUpButton" (click)="onMoveUpClick()">
+            <button type="button" mat-icon-button color="primary" [disabled]="! enableUpButton" (click)="onMoveUpClick()"
+              [title]="uitextMoveUp">
                 <mat-icon *ngIf="! selectionIsOneDevice">arrow_upward</mat-icon>
                 <mat-icon *ngIf="selectionIsOneDevice">arrow_back</mat-icon>
             </button>
-            <button type="button" mat-icon-button color="primary" [disabled]="! enableDownButton" (click)="onMoveDownClick()">
+            <button type="button" mat-icon-button color="primary" [disabled]="! enableDownButton" (click)="onMoveDownClick()"
+              [title]="uitextMoveDown">
                 <mat-icon *ngIf="! selectionIsOneDevice">arrow_downward</mat-icon>
                 <mat-icon *ngIf="selectionIsOneDevice">arrow_forward</mat-icon>
             </button>

src/app/components/pab-table/pab-table.component.ts

@@ -1020,6 +1020,34 @@ export class PabTableComponent implements AfterViewInit, OnInit {
         this.refresh();
     }
 
+    public get uitextAdd(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_ADD");
+    }
+
+    public get uitextCopy(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_COPY");
+    }
+
+    public get uitextRemove(): string {
+        return this.i18nService.localizeText("INFO_FIELDSET_REMOVE");
+    }
+
+    public get uitextMoveUp(): string {
+        if (this.selectionIsOneDevice) {
+            return this.i18nService.localizeText("INFO_FIELDSET_MOVE_LEFT");
+        } else {
+            return this.i18nService.localizeText("INFO_FIELDSET_MOVE_UP");
+        }
+    }
+
+    public get uitextMoveDown(): string {
+        if (this.selectionIsOneDevice) {
+            return this.i18nService.localizeText("INFO_FIELDSET_MOVE_RIGHT");
+        } else {
+            return this.i18nService.localizeText("INFO_FIELDSET_MOVE_DOWN");
+        }
+    }
+
     /** Replace device Nub when LoiDebit is changed */
     public loiDebitSelected($event: any, cell: any) {
         const device = cell.model as Nub;

src/app/components/param-computed/param-computed.component.html

 <!-- a fake input bound to nothing, for the sake of UI consistency -->
 <mat-form-field>
     <input matInput disabled [id]="inputId" class="form-control" type="text" [ngModel]="infoText" [placeholder]="param.title">
-    <button type="button" *ngIf="isDicho" mat-icon-button class="param-computed-more" (click)="openDialog()">
+    <button type="button" *ngIf="isDicho" mat-icon-button class="param-computed-more" (click)="openDialog()" [title]="uitextEditInitialValue">
         <mat-icon>more_horiz</mat-icon>
     </button>
 </mat-form-field>

src/app/components/param-computed/param-computed.component.ts

@@ -3,6 +3,7 @@ import { MatDialog } from "@angular/material";
 import { NgParameter } from "../../formulaire/ngparam";
 import { ParamCalculability, Structure } from "jalhyd";
 import { DialogEditParamComputedComponent } from "../dialog-edit-param-computed/dialog-edit-param-computed.component";
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
 
 @Component({
     selector: "param-computed",
@@ -34,7 +35,8 @@ export class ParamComputedComponent {
     }
 
     constructor(
-        private editInitialValueDialog: MatDialog
+        private editInitialValueDialog: MatDialog,
+        private i18nService: I18nService
     ) { }
 
     public get isDicho() {
@@ -58,4 +60,8 @@ export class ParamComputedComponent {
             }
         );
     }
+
+    public get uitextEditInitialValue() {
+        return this.i18nService.localizeText("INFO_DIALOG_COMPUTED_VALUE_TITLE");
+    }
 }

src/app/components/param-values/param-values.component.html

@@ -2,7 +2,7 @@
 <mat-form-field>
     <input matInput disabled class="form-control" type="text"
         [id]="inputId" [name]="inputId" [ngModel]="infoText" [placeholder]="param.title">
-    <button type="button" mat-icon-button class="param-values-more" (click)="openDialog()">
+    <button type="button" mat-icon-button class="param-values-more" (click)="openDialog()" [title]="uitextEditValues">
         <mat-icon>more_horiz</mat-icon>
     </button>
 </mat-form-field>

src/app/components/param-values/param-values.component.ts

@@ -3,6 +3,7 @@ import { NgParameter } from "../../formulaire/ngparam";
 import { DialogEditParamValuesComponent } from "../dialog-edit-param-values/dialog-edit-param-values.component";
 import { MatDialog } from "@angular/material";
 import { ParamValueMode, Observer, Structure } from "jalhyd";
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
 
 @Component({
     selector: "param-values",
@@ -26,7 +27,8 @@ export class ParamValuesComponent implements AfterViewInit, Observer {
     protected change = new EventEmitter<any>();
 
     constructor(
-        private editValuesDialog: MatDialog
+        private editValuesDialog: MatDialog,
+        private i18nService: I18nService
     ) { }
 
     public get isMinMax() {
@@ -97,4 +99,8 @@ export class ParamValuesComponent implements AfterViewInit, Observer {
         }
     }
 
+    public get uitextEditValues(): string {
+        return this.i18nService.localizeText("INFO_PARAMFIELD_PARAMVARIER_EDIT_VALUES");
+    }
+
 }

src/app/components/remous-results/remous-results.component.html

 <div class="remous-results-container" #remousResults *ngIf="hasResults" fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="remous-results-buttons">
-            <button mat-icon-button (click)="exportAsImage(remousResults)">
+            <button mat-icon-button (click)="exportAsImage(remousResults)" [title]="uitextExportImageTitle">
                 <mat-icon color="primary">image</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(remousResults)">
+            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(remousResults)" [title]="uitextEnterFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()">
+            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
             </button>
         </div>
@@ -21,13 +21,13 @@
 <div class="remous-results-extragraph-container" #remousResultsExtra *ngIf="extraGraph" fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="remous-results-buttons">
-            <button mat-icon-button (click)="exportAsImage(remousResultsExtra)">
+            <button mat-icon-button (click)="exportAsImage(remousResultsExtra)" [title]="uitextExportImageTitle">
                 <mat-icon color="primary">image</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(remousResultsExtra)">
+            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(remousResultsExtra)" [title]="uitextEnterFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()">
+            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
             </button>
         </div>