From 4da857befd21e8004c1875b504a3e11bb008066c Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Thu, 18 Jul 2019 11:29:09 +0200
Subject: [PATCH] Fix #248 - added [title] tooltips on all mat-select options
---
src/app/components/app-setup/app-setup.component.html | 2 +-
.../dialog-edit-pab/dialog-edit-pab.component.html | 2 +-
.../dialog-edit-param-values.component.html | 2 +-
.../generic-select/generic-select.component.html | 2 +-
.../pab-variable-results-selector.component.html | 2 +-
src/app/components/pab-table/pab-table.component.html | 2 +-
src/app/components/param-link/param-link.component.html | 2 +-
src/app/components/param-link/param-link.component.scss | 8 ++++++++
.../components/results-graph/results-graph.component.html | 4 ++--
.../select-model-field-line.component.html | 2 +-
10 files changed, 18 insertions(+), 10 deletions(-)
diff --git a/src/app/components/app-setup/app-setup.component.html b/src/app/components/app-setup/app-setup.component.html
index 78e9b85ef..a8bef4b4c 100644
--- a/src/app/components/app-setup/app-setup.component.html
+++ b/src/app/components/app-setup/app-setup.component.html
@@ -75,7 +75,7 @@
<!-- langue -->
<mat-form-field>
<mat-select [placeholder]="uitextLanguage" [(value)]="currentLanguageCode" data-testid="language-select">
- <mat-option *ngFor="let l of availableLanguages | keyvalue" [value]="l.key">
+ <mat-option *ngFor="let l of availableLanguages | keyvalue" [value]="l.key" [title]="l.value">
{{ l.value }}
</mat-option>
</mat-select>
diff --git a/src/app/components/dialog-edit-pab/dialog-edit-pab.component.html b/src/app/components/dialog-edit-pab/dialog-edit-pab.component.html
index 8674eb361..c5658d7f4 100644
--- a/src/app/components/dialog-edit-pab/dialog-edit-pab.component.html
+++ b/src/app/components/dialog-edit-pab/dialog-edit-pab.component.html
@@ -12,7 +12,7 @@
<!-- champ à modifier -->
<mat-form-field class="select-form-field">
<mat-select [placeholder]="uitextVariable" [(value)]="variable">
- <mat-option *ngFor="let v of availableVariables" [value]="v.value">
+ <mat-option *ngFor="let v of availableVariables" [value]="v.value" [title]="v.label">
{{ v.label }}
</mat-option>
</mat-select>
diff --git a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
index 011f1f7d6..6c6da31db 100644
--- a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
+++ b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
@@ -103,7 +103,7 @@
<mat-form-field>
<mat-select [placeholder]="uitextExtensionStrategy" [(value)]="selectedExtensionStrategy"
data-testid="variable-extension-strategy-select">
- <mat-option *ngFor="let e of extensionStrategies" [value]="e.value">
+ <mat-option *ngFor="let e of extensionStrategies" [value]="e.value" [title]="e.label">
{{ e.label }}
</mat-option>
</mat-select>
diff --git a/src/app/components/generic-select/generic-select.component.html b/src/app/components/generic-select/generic-select.component.html
index 005ac9427..f4200c534 100644
--- a/src/app/components/generic-select/generic-select.component.html
+++ b/src/app/components/generic-select/generic-select.component.html
@@ -1,6 +1,6 @@
<mat-form-field>
<mat-select [id]="selectId" [placeholder]="label" [(value)]="selectedValue">
- <mat-option *ngFor="let e of entries" [value]="e">
+ <mat-option *ngFor="let e of entries" [value]="e" [title]="entryLabel(e)">
{{ entryLabel(e) }}
</mat-option>
</mat-select>
diff --git a/src/app/components/pab-results/pab-variable-results-selector.component.html b/src/app/components/pab-results/pab-variable-results-selector.component.html
index a6cc6df24..c02043692 100644
--- a/src/app/components/pab-results/pab-variable-results-selector.component.html
+++ b/src/app/components/pab-results/pab-variable-results-selector.component.html
@@ -2,7 +2,7 @@
<div fxFlex="1 1 100%">
<mat-form-field>
<mat-select id="pab-variating-element" [placeholder]="label" [(value)]="selectedValue">
- <mat-option *ngFor="let e of entries" [value]="e">
+ <mat-option *ngFor="let e of entries" [value]="e" [title]="entryLabel(e)">
{{ entryLabel(e) }}
</mat-option>
</mat-select>
diff --git a/src/app/components/pab-table/pab-table.component.html b/src/app/components/pab-table/pab-table.component.html
index cad53037f..d6d6d956b 100644
--- a/src/app/components/pab-table/pab-table.component.html
+++ b/src/app/components/pab-table/pab-table.component.html
@@ -89,7 +89,7 @@
<mat-select #selectWidget *ngIf="isSelect(cell)" [value]="cell.modelValue"
(selectionChange)="loiDebitSelected($event, cell)">
- <mat-option *ngFor="let opt of cell.options" [value]="opt.value">
+ <mat-option *ngFor="let opt of cell.options" [value]="opt.value" [title]="opt.label">
{{ opt.label }}
</mat-option>
</mat-select>
diff --git a/src/app/components/param-link/param-link.component.html b/src/app/components/param-link/param-link.component.html
index aeba66357..eadf8016d 100644
--- a/src/app/components/param-link/param-link.component.html
+++ b/src/app/components/param-link/param-link.component.html
@@ -1,7 +1,7 @@
<mat-form-field>
<mat-select [id]="selectId" [name]="selectId" [placeholder]="param.title"
[(ngModel)]="currentLinkedParam" required>
- <mat-option *ngFor="let e of linkableParams" [value]="e">
+ <mat-option *ngFor="let e of linkableParams" [value]="e" [title]="selectItemLabel(e)">
{{ selectItemLabel(e) }}
</mat-option>
</mat-select>
diff --git a/src/app/components/param-link/param-link.component.scss b/src/app/components/param-link/param-link.component.scss
index 412764067..6cbd9bf46 100644
--- a/src/app/components/param-link/param-link.component.scss
+++ b/src/app/components/param-link/param-link.component.scss
@@ -32,6 +32,14 @@
}
}
+ /* ::ng-deep .mat-select-panel mat-option.mat-option {
+ height: unset;
+ }
+
+ ::ng-deep .mat-option-text.mat-option-text {
+ white-space: normal;
+ } */
+
.status-icons-container {
position: absolute;
top: -8px;
diff --git a/src/app/components/results-graph/results-graph.component.html b/src/app/components/results-graph/results-graph.component.html
index 1c15bdcc2..8b48221a4 100644
--- a/src/app/components/results-graph/results-graph.component.html
+++ b/src/app/components/results-graph/results-graph.component.html
@@ -26,7 +26,7 @@
<div class="select-x-y-axis" fxLayout="row wrap" fxLayoutAlign="space-between start">
<mat-form-field fxFlex.gt-xs="1 0 auto" fxFlex.lt-sm="1 0 100%">
<mat-select id="selectX" [placeholder]="uitextSelectX" [(value)]="chartX">
- <mat-option *ngFor="let x of availableChartAxis" [value]="x">
+ <mat-option *ngFor="let x of availableChartAxis" [value]="x" [title]="getChartAxisLabel(x)">
{{ getChartAxisLabel(x) }}
</mat-option>
</mat-select>
@@ -35,7 +35,7 @@
<div fxHide.xs fxFlex.gt-xs="0 0 16px"></div>
<mat-form-field fxFlex.gt-xs="1 0 auto" fxFlex.lt-sm="1 0 100%">
- <mat-select id="selectY" [placeholder]="uitextSelectY" [(value)]="chartY">
+ <mat-select id="selectY" [placeholder]="uitextSelectY" [(value)]="chartY" [title]="getChartAxisLabel(y)">
<mat-option *ngFor="let y of availableChartAxis" [value]="y">
{{ getChartAxisLabel(y) }}
</mat-option>
diff --git a/src/app/components/select-model-field-line/select-model-field-line.component.html b/src/app/components/select-model-field-line/select-model-field-line.component.html
index f9153337a..e85ced8af 100644
--- a/src/app/components/select-model-field-line/select-model-field-line.component.html
+++ b/src/app/components/select-model-field-line/select-model-field-line.component.html
@@ -5,7 +5,7 @@
<mat-form-field>
<mat-select [id]="selectId" [name]="selectId" [placeholder]="label" [(value)]="selectedValue" required>
- <mat-option *ngFor="let e of entries" [value]="e">
+ <mat-option *ngFor="let e of entries" [value]="e" [title]="selectItemLabel(e)">
{{ selectItemLabel(e) }}
</mat-option>
</mat-select>
--
GitLab