UI: Always visible action button in multiple input widgets

This commit is contained in:
Vladyslav_Prykhodko 2022-12-14 13:14:58 +02:00
parent 3a3771db64
commit 93fb9754ef
2 changed files with 23 additions and 16 deletions

View File

@ -19,7 +19,7 @@
[formGroup]="multipleInputFormGroup"
tb-toast toastTarget="{{ toastTargetId }}"
(ngSubmit)="saveForm()" novalidate autocomplete="off">
<div style="padding: 0 8px;" *ngIf="entityDetected && isAllParametersValid">
<div class="tb-multiple-input-container" *ngIf="entityDetected && isAllParametersValid">
<fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
<legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
</legend>
@ -142,19 +142,19 @@
</div>
</div>
</fieldset>
<div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
*ngIf="entityDetected && settings.showActionButtons">
<button mat-button color="primary" type="button"
(click)="discardAll()" style="max-height: 50px; margin-right:20px;"
[disabled]="!multipleInputFormGroup.dirty">
{{ resetButtonLabel }}
</button>
<button mat-button mat-raised-button color="primary" type="submit"
style="max-height: 50px; margin-right:20px;"
[disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
{{ saveButtonLabel }}
</button>
</div>
</div>
<div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
*ngIf="entityDetected && isAllParametersValid && settings.showActionButtons">
<button mat-button color="primary" type="button"
(click)="discardAll()" style="max-height: 50px; margin-right:20px;"
[disabled]="!multipleInputFormGroup.dirty">
{{ resetButtonLabel }}
</button>
<button mat-button mat-raised-button color="primary" type="submit"
style="max-height: 50px; margin-right:20px;"
[disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
{{ saveButtonLabel }}
</button>
</div>
<div class="tb-multiple-input__errors" fxLayout="column" fxLayoutAlign="center center" style="height: 100%;"
*ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">

View File

@ -17,8 +17,15 @@
.tb-multiple-input {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
.tb-multiple-input-container {
padding: 0 8px;
flex: 1 1 100%;
overflow-x: hidden;
overflow-y: auto;
}
.fields-group {
padding: 0 8px;