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 a623902d3fcae3cee5cb8e0782ffdca74e4c9904..d351ac52a31f8205dbe5e987283b77cdae8b160d 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 13b70a5de9535105ffedd3f1f5f21d1e52315252..08385a6f342bd8f2f3884d229114e62247bfaa06 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 14ef2479a9c0602a4725fdd307d7f7b1f6b0b206..2e1af91be2ee365ae2d2697b4adf14c634696f9a 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 8d867a8db26727db4602c8bc5fc9b8b6671bced8..a2eeb9810478b13ee5dd309f32ef89824dff8413 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"; }