From 3abf164b48431b339c40c857434c3fd33cb46dca Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Mon, 29 Jul 2019 17:00:31 +0200
Subject: [PATCH] #157 : add help button option on select and input
---
.../calculators/cloisons/cloisons.config.json | 4 ++--
.../generic-input/generic-input.component.html | 6 ++++++
.../generic-select.component.html | 5 +++++
.../ngparam-input/ngparam-input.component.scss | 12 ++++++++++++
.../ngparam-input/ngparam-input.component.ts | 15 +++++++++++++++
.../param-computed.component.scss | 2 +-
.../param-values/param-values.component.scss | 2 +-
.../select-field-line.component.scss | 12 ++++++++++++
.../select-field-line.component.ts | 18 ++++++++++++++++++
9 files changed, 72 insertions(+), 4 deletions(-)
diff --git a/src/app/calculators/cloisons/cloisons.config.json b/src/app/calculators/cloisons/cloisons.config.json
index 7295b9408..6b90ef466 100644
--- a/src/app/calculators/cloisons/cloisons.config.json
+++ b/src/app/calculators/cloisons/cloisons.config.json
@@ -33,12 +33,12 @@
"source": "device_loi_debit",
"help": "pab/cloisonsSelect"
},
+ "h1",
{
- "id": "h1",
+ "id": "L",
"type": "input",
"help": "pab/cloisonsInput"
},
- "L",
"CdWSL",
"CdWR",
"CdGR",
diff --git a/src/app/components/generic-input/generic-input.component.html b/src/app/components/generic-input/generic-input.component.html
index c60194a79..0e261b797 100644
--- a/src/app/components/generic-input/generic-input.component.html
+++ b/src/app/components/generic-input/generic-input.component.html
@@ -4,5 +4,11 @@
(keydown.Tab)="onTabPressed($event, false)" (keydown.shift.Tab)="onTabPressed($event, true)"
pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$" required>
+ <div *ngIf="enableHelpButton" class="overlap-input">
+ <mat-icon (click)="openHelp($event)" [title]="uitextOpenHelp" color="accent">
+ help
+ </mat-icon>
+ </div>
+
<mat-error>{{ errorMessage }}</mat-error>
</mat-form-field>
diff --git a/src/app/components/generic-select/generic-select.component.html b/src/app/components/generic-select/generic-select.component.html
index f4200c534..6d38167d3 100644
--- a/src/app/components/generic-select/generic-select.component.html
+++ b/src/app/components/generic-select/generic-select.component.html
@@ -4,4 +4,9 @@
{{ entryLabel(e) }}
</mat-option>
</mat-select>
+ <div *ngIf="enableHelpButton" class="overlap-select">
+ <mat-icon (click)="openHelp($event)" [title]="uitextOpenHelp" color="accent">
+ help
+ </mat-icon>
+ </div>
</mat-form-field>
diff --git a/src/app/components/ngparam-input/ngparam-input.component.scss b/src/app/components/ngparam-input/ngparam-input.component.scss
index 6d5f7d7ed..004662c2b 100644
--- a/src/app/components/ngparam-input/ngparam-input.component.scss
+++ b/src/app/components/ngparam-input/ngparam-input.component.scss
@@ -20,4 +20,16 @@ mat-form-field {
font-size: 1em;
}
}
+
+ .overlap-input {
+ position: absolute;
+ right: 0;
+ text-align: right;
+ top: 0;
+
+ mat-icon {
+ cursor: pointer;
+ transform: scale(0.9);
+ }
+ }
}
diff --git a/src/app/components/ngparam-input/ngparam-input.component.ts b/src/app/components/ngparam-input/ngparam-input.component.ts
index c61a4fb78..c56cb8c2d 100644
--- a/src/app/components/ngparam-input/ngparam-input.component.ts
+++ b/src/app/components/ngparam-input/ngparam-input.component.ts
@@ -112,4 +112,19 @@ export class NgParamInputComponent extends GenericInputComponent implements Obse
public ngOnDestroy() {
this._paramDef.removeObserver(this);
}
+
+ public openHelp($event: any) {
+ window.open("assets/docs-fr/calculators/" + this._model.helpLink + ".html", "_blank");
+ $event.preventDefault();
+ $event.stopPropagation();
+ return false;
+ }
+
+ public get enableHelpButton() {
+ return this._model && this._model.helpLink;
+ }
+
+ public get uitextOpenHelp() {
+ return this.intlService.localizeText("INFO_CALCULATOR_OPEN_HELP");
+ }
}
diff --git a/src/app/components/param-computed/param-computed.component.scss b/src/app/components/param-computed/param-computed.component.scss
index 404691336..829a805dd 100644
--- a/src/app/components/param-computed/param-computed.component.scss
+++ b/src/app/components/param-computed/param-computed.component.scss
@@ -15,7 +15,7 @@
.param-computed-more {
position: absolute;
bottom: 0;
- right: 0;
+ right: -7px;
}
::ng-deep .mat-form-field-label {
diff --git a/src/app/components/param-values/param-values.component.scss b/src/app/components/param-values/param-values.component.scss
index 1edcbe0ed..4bd6ca386 100644
--- a/src/app/components/param-values/param-values.component.scss
+++ b/src/app/components/param-values/param-values.component.scss
@@ -15,7 +15,7 @@
.param-values-more {
position: absolute;
bottom: 0;
- right: 0;
+ right: -7px;
}
::ng-deep .mat-form-field-label {
diff --git a/src/app/components/select-field-line/select-field-line.component.scss b/src/app/components/select-field-line/select-field-line.component.scss
index 6f94917d1..0ca9e0024 100644
--- a/src/app/components/select-field-line/select-field-line.component.scss
+++ b/src/app/components/select-field-line/select-field-line.component.scss
@@ -21,4 +21,16 @@ mat-form-field {
font-size: 1em;
}
}
+
+ .overlap-select {
+ position: absolute;
+ right: 20px;
+ text-align: right;
+ top: 2px;
+
+ mat-icon {
+ cursor: pointer;
+ transform: scale(0.9);
+ }
+ }
}
diff --git a/src/app/components/select-field-line/select-field-line.component.ts b/src/app/components/select-field-line/select-field-line.component.ts
index 61c4cc62a..e430231f2 100644
--- a/src/app/components/select-field-line/select-field-line.component.ts
+++ b/src/app/components/select-field-line/select-field-line.component.ts
@@ -2,6 +2,7 @@ import { Component, Input } from "@angular/core";
import { SelectField } from "../../formulaire/select-field";
import { SelectEntry } from "../../formulaire/select-entry";
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
@Component({
selector: "select-field-line",
@@ -14,6 +15,8 @@ export class SelectFieldLineComponent {
@Input()
private _select: SelectField;
+ public constructor(private i18nService: I18nService) {}
+
public get selectId() {
return this._select.id;
}
@@ -44,4 +47,19 @@ export class SelectFieldLineComponent {
return "";
}
}
+
+ public openHelp($event: any) {
+ window.open("assets/docs-fr/calculators/" + this._select.helpLink + ".html", "_blank");
+ $event.preventDefault();
+ $event.stopPropagation();
+ return false;
+ }
+
+ public get enableHelpButton() {
+ return this._select && this._select.helpLink;
+ }
+
+ public get uitextOpenHelp() {
+ return this.i18nService.localizeText("INFO_CALCULATOR_OPEN_HELP");
+ }
}
--
GitLab