From bc9f4ad75bfac4c5d51b251982e65b420f9b14fb Mon Sep 17 00:00:00 2001
From: "francois.grand" <francois.grand@irstea.fr>
Date: Wed, 3 Jan 2018 10:16:12 +0100
Subject: [PATCH] =?UTF-8?q?Remplacement=20des=20radios=20"param=C3=A8tre?=
=?UTF-8?q?=20fix=C3=A9/=C3=A0=20varier/=C3=A0=20calculer"=20par=20des=20b?=
=?UTF-8?q?outons=20dans=20un=20buttongroup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../param-field-line.component.html | 49 +++++--------
.../param-field-line.component.ts | 70 ++++++++++++-------
2 files changed, 62 insertions(+), 57 deletions(-)
diff --git a/src/app/components/param-field-line/param-field-line.component.html b/src/app/components/param-field-line/param-field-line.component.html
index d351ac52a..ba9d29cca 100644
--- a/src/app/components/param-field-line/param-field-line.component.html
+++ b/src/app/components/param-field-line/param-field-line.component.html
@@ -4,42 +4,25 @@
<param-input [inputDisabled]="isInputDisabled" [param]="_param" [title]="title"></param-input>
</div>
- <!-- radio "fixé" -->
- <div class="col-4 col-sm-2">
- <input *ngIf="hasRadioFix()" type="radio" name="radio_param_{{symbol}}" value="fix" (click)="onRadioClick(symbol, 'fix')"
- [checked]=radioFixCheck [disabled]=isDisabled id="radio_fix" />
- <label *ngIf="hasRadioFix()" for="radio_fix">{{uitextParamFixe}}</label>
- </div>
+ <div class="btn-group" role="group">
+ <!-- radio "fixé" -->
+ <label class="{{radioFixClass}} h-50 px-3 py-2" [(ngModel)]="radioModel" mdbRadio="Left" name="radio_param_{{symbol}}" value="fix"
+ (click)="onRadioClick(symbol, 'fix')" [checked]=radioFixCheck [disabled]=isDisabled id="radio_fix">
+ {{uitextParamFixe}}
+ </label>
- <!-- radio "varier" -->
- <div class="col-4 col-sm-2">
- <input *ngIf="hasRadioVar()" type="radio" name="radio_param_{{symbol}}" value="var" (click)="onRadioClick(symbol,
- 'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var" />
- <label *ngIf="hasRadioVar()" for="radio_var">{{uitextParamVarier}}</label>
- </div>
+ <!-- radio "varier" -->
+ <label class="{{radioVarClass}} h-50 px-3 py-2" [(ngModel)]="radioModel" mdbRadio="Middle" name="radio_param_{{symbol}}"
+ value="var" (click)="onRadioClick(symbol, 'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var">
+ {{uitextParamVarier}}
+ </label>
- <!-- radio "calculer" -->
- <div class="col-4 col-sm-2">
- <input *ngIf="hasRadioCal()" type="radio" name="radio_param_{{symbol}}" value="cal" (click)="onRadioClick(symbol,
- 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal" />
- <label *ngIf="hasRadioCal()" for="radio_cal">{{uitextParamCalculer}}</label>
+ <!-- radio "calculer" -->
+ <label class="{{radioCalClass}} h-50 px-3 py-2" [(ngModel)]="radioModel" mdbRadio="Right" name="radio_param_{{symbol}}" value="cal"
+ (click)="onRadioClick(symbol, 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal">
+ {{uitextParamCalculer}}
+ </label>
</div>
-
- <!-- <div class="btn-group" role="group"> -->
- <!-- <label class="btn {{radioFixClass}} btn-sm h-50" aria-pressed="false" [(ngModel)]="radioModel" mdbRadio="Left" mdbRippleRadius
- name="radio_param_{{symbol}}" value="fix" (click)="onRadioClick(symbol, 'fix')" [checked]=radioFixCheck [disabled]=isDisabled
- id="radio_fix">
- {{uitextParamFixe}}
- </label>
- <label class="btn {{radioVarClass}} btn-sm h-50" [(ngModel)]="radioModel" mdbRadio="Middle" mdbRippleRadius name="radio_param_{{symbol}}"
- value="var" (click)="onRadioClick(symbol, 'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var">
- {{uitextParamVarier}}
- </label>
- <label class="btn {{radioCalClass}} btn-sm h-50" [(ngModel)]="radioModel" mdbRadio="Right" mdbRippleRadius name="radio_param_{{symbol}}"
- value="cal" (click)="onRadioClick(symbol, 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal">
- {{uitextParamCalculer}}
- </label> -->
- <!-- </div> -->
</div>
<div *ngIf="isRadioVarChecked" class="row">
diff --git a/src/app/components/param-field-line/param-field-line.component.ts b/src/app/components/param-field-line/param-field-line.component.ts
index 08385a6f3..9e4addee9 100644
--- a/src/app/components/param-field-line/param-field-line.component.ts
+++ b/src/app/components/param-field-line/param-field-line.component.ts
@@ -7,7 +7,23 @@ import { NgParameter, ParamRadioConfig } from "../../formulaire/ngparam";
@Component({
selector: "param-field-line",
- templateUrl: "./param-field-line.component.html"
+ templateUrl: "./param-field-line.component.html",
+ styles: [
+ `.btn-on {
+ color:#505050;
+ border: 3px solid #505050;
+ background-color:white;
+ text-transform: uppercase;
+ font-size: 0.8em;
+ }`,
+ `.btn-off {
+ color:white;
+ border: 3px solid #505050;
+ background-color:#505050;
+ text-transform: uppercase;
+ font-size: 0.8em;
+ }`
+ ]
})
export class ParamFieldLineComponent {
@Input("param")
@@ -60,7 +76,6 @@ export class ParamFieldLineComponent {
* calcule la présence du radio "paramètre fixé"
*/
private hasRadioFix(): boolean {
- // switch (this._option) {
switch (this._param.radioConfig) {
case ParamRadioConfig.FIX:
return false;
@@ -74,7 +89,6 @@ export class ParamFieldLineComponent {
* calcule la présence du radio "paramètre à varier"
*/
private hasRadioVar(): boolean {
- // switch (this._option) {
switch (this._param.radioConfig) {
case ParamRadioConfig.VAR:
case ParamRadioConfig.CAL:
@@ -89,7 +103,6 @@ export class ParamFieldLineComponent {
* calcule la présence du radio "paramètre à calculer"
*/
private hasRadioCal(): boolean {
- // switch (this._option) {
switch (this._param.radioConfig) {
case ParamRadioConfig.CAL:
return true;
@@ -171,24 +184,33 @@ export class ParamFieldLineComponent {
return this._param.radioState != ParamRadioConfig.FIX;
}
- // /**
- // * classe du radio "fixé"
- // */
- // private get radioFixClass(): string {
- // return this.radioFixCheck == undefined ? "btn-primary" : "btn-outline-primary";
- // }
-
- // /**
- // * classe du radio "varier"
- // */
- // private get radioVarClass(): string {
- // return this.radioVarCheck == undefined ? "btn-primary" : "btn-outline-primary";
- // }
-
- // /**
- // * classe du radio "calculer"
- // */
- // private get radioCalClass(): string {
- // return this.radioCalCheck == undefined ? "btn-primary" : "btn-outline-primary";
- // }
+ /**
+ * classe du radio "fixé"
+ */
+ private on = true;
+ private onClass = "btn-on"
+ private offClass = "btn-off"
+ private get radioFixClass(): string {
+ if (this.on)
+ return this.radioFixCheck == undefined ? this.offClass : this.onClass;
+ return "";
+ }
+
+ /**
+ * classe du radio "varier"
+ */
+ private get radioVarClass(): string {
+ if (this.on)
+ return this.radioVarCheck == undefined ? this.offClass : this.onClass;
+ return "";
+ }
+
+ /**
+ * classe du radio "calculer"
+ */
+ private get radioCalClass(): string {
+ if (this.on)
+ return this.radioCalCheck == undefined ? this.offClass : this.onClass;
+ return "";
+ }
}
--
GitLab