From bf01430938e41c245521257d543795a13cb87508 Mon Sep 17 00:00:00 2001
From: "francois.grand" <francois.grand@irstea.fr>
Date: Wed, 20 Dec 2017 17:54:15 +0100
Subject: [PATCH] =?UTF-8?q?r=C3=A9organisation=20des=20lignes=20g=C3=A9ran?=
=?UTF-8?q?t=20les=20param=C3=A8tres=20-=20ParamFieldLineComponent=20:=20m?=
=?UTF-8?q?odif=20de=20la=20config=20des=20colonnes=20Bootstrap=20-=20Para?=
=?UTF-8?q?mInputComponent=20:=20simplification=20du=20composant,=20utilis?=
=?UTF-8?q?ation=20des=20input=20MDBootstrap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../param-field-line.component.html | 73 +++++++++++--------
.../param-field-line.component.ts | 25 ++++++-
.../param-input/param-input.component.html | 28 +------
.../param-input/param-input.component.ts | 7 +-
4 files changed, 69 insertions(+), 64 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 a623902d3..d351ac52a 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
@@ -1,61 +1,70 @@
<div class="row">
- <!-- titre -->
- <div class="col-sm-4 text-xs-left text-sm-right">
- {{title}}
- </div>
-
<!-- input de saisie de la valeur -->
- <div class="col-sm-2">
- <param-input [inputDisabled]="isInputDisabled" [param]="_param"></param-input>
+ <div class="col-12 col-sm-6 pt-3">
+ <param-input [inputDisabled]="isInputDisabled" [param]="_param" [title]="title"></param-input>
</div>
<!-- radio "fixé" -->
- <div class="col-sm-2 col-lg-1">
+ <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>
<!-- radio "varier" -->
- <div class="col-sm-2 col-lg-1">
+ <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 "calculer" -->
- <div class="col-sm-2 col-lg-2">
+ <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>
</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 class="container-fluid" [style.display]="isVarRadio">
- <div class="row">
- <div class="offset-sm-2 offset-md-4 offset-lg-6 col-sm-4 col-md-3">
- {{uitextValeurMini}}
- </div>
- <div class="col-sm-3 col-md-2">
- <input type="text" class="input-alternate" name="inputmin" placeholder="min" [(ngModel)]="_param.minValue" />
- </div>
+<div *ngIf="isRadioVarChecked" class="row">
+ <div class="col-6 col-sm-8 text-xs-left text-sm-right">
+ {{uitextValeurMini}}
+ </div>
+ <div class="col-6 col-sm-4 pr-5">
+ <input type="text" class="input-alternate" name="inputmin" placeholder="min" [(ngModel)]="_param.minValue" />
</div>
+</div>
- <div class="row">
- <div class="offset-sm-2 offset-md-4 offset-lg-6 col-sm-4 col-md-3">
- {{uitextValeurMaxi}}
- </div>
- <div class="col-sm-3 col-md-2">
- <input type="text" class="input-alternate" name="inputmax" placeholder="max" [(ngModel)]="_param.maxValue" />
- </div>
+<div *ngIf="isRadioVarChecked" class="row">
+ <div class="col-6 col-sm-8 text-xs-left text-sm-right">
+ {{uitextValeurMaxi}}
+ </div>
+ <div class="col-6 col-sm-4 pr-5">
+ <input type="text" class="input-alternate" name="inputmax" placeholder="max" [(ngModel)]="_param.maxValue" />
</div>
+</div>
- <div class="row">
- <div class="offset-sm-2 offset-md-4 offset-lg-6 col-sm-4 col-md-3">
- {{uitextPasVariation}}
- </div>
- <div class="col-sm-3 col-md-2">
- <input type="text" class="input-alternate" name="inputstep" placeholder="step" [(ngModel)]="_param.stepValue" />
- </div>
+<div *ngIf="isRadioVarChecked" class="row">
+ <div class="col-6 col-sm-8 text-xs-left text-sm-right">
+ {{uitextPasVariation}}
+ </div>
+ <div class="col-6 col-sm-4 pr-5">
+ <input type="text" class="input-alternate" name="inputstep" placeholder="step" [(ngModel)]="_param.stepValue" />
</div>
</div>
\ No newline at end of file
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 13b70a5de..08385a6f3 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
@@ -134,10 +134,6 @@ export class ParamFieldLineComponent {
return this._param.radioState == ParamRadioConfig.VAR;
}
- private get isVarRadio(): string {
- return this.isRadioVarChecked ? "block" : "none";
- }
-
/*
* gestion des événements clic sur les radios :
* envoi d'un message au composant parent
@@ -174,4 +170,25 @@ export class ParamFieldLineComponent {
private get isInputDisabled(): boolean {
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";
+ // }
}
diff --git a/src/app/components/param-input/param-input.component.html b/src/app/components/param-input/param-input.component.html
index 14ef2479a..2e1af91be 100644
--- a/src/app/components/param-input/param-input.component.html
+++ b/src/app/components/param-input/param-input.component.html
@@ -1,25 +1,5 @@
-<div class="row" *ngIf="displayTitle">
- <div class="col-12">
- {{uitextParamInput}}
- </div>
-</div>
-
-<div class="row">
- <div class="col-10">
- <form>
- <div class="md-form">
- <!-- <input mdbActive type="text" class="form-control" id="form1" name="email" mdbInputValidate> -->
- <input type="text" class="input-alternate" id="form1" name="form1" [disabled]="_inputDisabled" placeholder="{{_paramDef.symbol}}"
- [ngModel]="_uiValue.uncheckedValueString" (ngModelChange)="setValue($event)" />
- <label class="active" for="form1" *ngIf="displayTitle">{{uitextParamInput}}</label>
- <small class="text-danger">{{_message}}</small>
- </div>
- </form>
- </div>
-</div>
-
-<div class="row" *ngIf="displayTitle">
- <div class="col-12">
- {{_message}}
- </div>
+<div class="md-form form-sm">
+ <input mdbActive type="text" id="form1" class="form-control" [ngModel]="_uiValue.uncheckedValueString" (ngModelChange)="setValue($event)">
+ <label for="form1">{{_title}}</label>
+ <small class="text-danger">{{_message}}</small>
</div>
\ No newline at end of file
diff --git a/src/app/components/param-input/param-input.component.ts b/src/app/components/param-input/param-input.component.ts
index 8d867a8db..a2eeb9810 100644
--- a/src/app/components/param-input/param-input.component.ts
+++ b/src/app/components/param-input/param-input.component.ts
@@ -37,6 +37,9 @@ export class ParamInputComponent implements ControlValueAccessor, DoCheck {
@Input('param')
private _paramDef: NgParameter;
+ @Input('title')
+ private _title: string;
+
private _message: string;
/**
@@ -59,10 +62,6 @@ export class ParamInputComponent implements ControlValueAccessor, DoCheck {
this._uiValue = new NumericalString();
}
- hasError(): boolean {
- return this._message != undefined;
- }
-
private getSfromUI(): string {
return this._fromUI ? " fromUI " : " fromMODEL";
}
--
GitLab