Revize 3dcfc4ab
Přidáno uživatelem Lukáš Moučka před téměř 4 roky(ů)
Re #8969 - Upravit UX Popup formulářů
- Modify HTML DOM
| src/app/dashboard/components/dashboard.component.html | ||
|---|---|---|
| 7 | 7 |
<div [className]="'row dashboard-unit'"> |
| 8 | 8 |
<div class="col-sm-5 col-md-7 col-xl-9"><h3 class="unitName">{{ unit.unit.description}}</h3></div>
|
| 9 | 9 |
<div class="col-sm-7 col-md-5 col-xl-3 dashboard-unit-heading"> |
| 10 |
<p-button [id]="unit.unit.description" label="Sensors graph" icon="pi pi-chart-line" [routerLink]="['/dashboard/unit', unit.unit.unitId]" [queryParams]="{unitDescription: unit.unit.description}"></p-button>
|
|
| 10 |
<button pButton type="button" label="Sensors graph" class="p-button-primary" icon="pi pi-chart-line" [id]="unit.unit.description" [routerLink]="['/dashboard/unit', unit.unit.unitId]" [queryParams]="{unitDescription: unit.unit.description}"></button>
|
|
| 11 | 11 |
<div class="dashboard-button-separator"></div> |
| 12 |
<p-button [id]="'manipulation_'+unit.unit.unitId" icon="pi pi-cog" styleClass="p-button-warning" (click)="showItems($event, unit.unit); menu.toggle($event)"></p-button>
|
|
| 12 |
<button pButton type="button" class="p-button-warning" icon="pi pi-cog" [id]="'manipulation_'+unit.unit.unitId" (click)="showItems($event, unit.unit); menu.toggle($event)"></button>
|
|
| 13 | 13 |
<p-menu #menu [popup]="true" [model]="items" [appendTo]="'body'" [baseZIndex]="50"></p-menu> |
| 14 | 14 |
</div> |
| 15 | 15 |
</div> |
| ... | ... | |
| 31 | 31 |
<app-position-insert-popup *ngIf="showInsertPositionPopup" [unitId]="editedUnit.unitId" [(isVisible)]="showInsertPositionPopup"></app-position-insert-popup> |
| 32 | 32 |
|
| 33 | 33 |
|
| 34 |
<p-confirmDialog [style]="{width: '50vw'}" key="positionDialog" [position]="position" [baseZIndex]="10000" rejectButtonStyleClass="p-button" [className]="'popup-form'" [closable]="false"></p-confirmDialog>
|
|
| 34 |
<p-confirmDialog key="positionDialog" [position]="position" [baseZIndex]="10000" rejectButtonStyleClass="p-button" [className]="'popup-form confirm'" [closable]="false"></p-confirmDialog> |
|
| src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html | ||
|---|---|---|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add position to unit!" [style]="{width: '50vw'}"
|
|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add position to unit" |
|
| 2 | 2 |
[baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'"> |
| 3 | 3 |
|
| 4 | 4 |
<form [formGroup]="insertForm"> |
| ... | ... | |
| 71 | 71 |
placeholder="Dilution of precision"/> |
| 72 | 72 |
</div> |
| 73 | 73 |
</form> |
| 74 |
|
|
| 75 | 74 |
<p-footer> |
| 76 |
<div class="row justify-content-end align-items-center"> |
|
| 77 |
<div> |
|
| 78 |
<p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button> |
|
| 79 |
<p-button icon="pi pi-check" (click)="processInsertion()" type="submit" label="Save" class="pr-2"></p-button> |
|
| 80 |
</div> |
|
| 75 |
<div class="popup-buttons"> |
|
| 76 |
<button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button> |
|
| 77 |
<button pButton type="submit" label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="processInsertion()"></button> |
|
| 81 | 78 |
</div> |
| 82 | 79 |
</p-footer> |
| 83 | 80 |
</p-dialog> |
| src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html | ||
|---|---|---|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add sensor to unit – {{unit?.unitId}}" [style]="{width: '40vw'}"
|
|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add sensor to unit – {{unit?.unitId}}"
|
|
| 2 | 2 |
[baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'"> |
| 3 | 3 |
|
| 4 | 4 |
<form [formGroup]="insertForm"> |
| ... | ... | |
| 47 | 47 |
</form> |
| 48 | 48 |
<p-footer> |
| 49 | 49 |
<div class="popup-buttons-wrapper"> |
| 50 |
<p-button type="button" (click)="addSensor()" class="pr-2">Add Sensor</p-button> |
|
| 51 |
<p-button *ngIf="sensors > 1" type="button" (click)="removeSensor()" class="pr-2">Remove last sensor</p-button> |
|
| 52 |
<div> |
|
| 53 |
<p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button> |
|
| 54 |
<p-button icon="pi pi-check" (click)="processSensorInsertion()" type="submit" label="Save" class="pr-2"></p-button> |
|
| 50 |
<div class="popup-buttons-group"> |
|
| 51 |
<button pButton type="button" label="Add sensor" class="p-button-success" (click)="addSensor()"></button> |
|
| 52 |
<button pButton type="button" label="Remove last sensor" class="p-button-danger" *ngIf="sensors > 1" (click)="removeSensor()"></button> |
|
| 53 |
</div> |
|
| 54 |
<div class="popup-buttons-group"> |
|
| 55 |
<button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button> |
|
| 56 |
<button pButton type="submit" label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="processSensorInsertion()"></button> |
|
| 55 | 57 |
</div> |
| 56 | 58 |
</div> |
| 57 | 59 |
</p-footer> |
| src/app/dashboard/components/unit-popup/unit-popup.component.html | ||
|---|---|---|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Edit unit - {{ unit?.unitId}}" [style]="{width: '50vw'}" [baseZIndex]="10000" [className]="'popup-form'">
|
|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Edit unit - {{ unit?.unitId}}" [baseZIndex]="10000" [className]="'popup-form'">
|
|
| 2 | 2 |
|
| 3 | 3 |
<form [formGroup]="insertForm"> |
| 4 | 4 |
<div class="input-group form-group"> |
| ... | ... | |
| 10 | 10 |
</form> |
| 11 | 11 |
|
| 12 | 12 |
<p-footer> |
| 13 |
<div class="row justify-content-end align-items-center"> |
|
| 14 |
<div> |
|
| 15 |
<p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button> |
|
| 16 |
<p-button icon="pi pi-check" (click)="saveUnit()" type="submit" label="Save" class="pr-2"></p-button> |
|
| 17 |
</div> |
|
| 13 |
<div class="pupup-buttons"> |
|
| 14 |
<button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button> |
|
| 15 |
<button pButton type="submit" label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="saveUnit()"></button> |
|
| 18 | 16 |
</div> |
| 19 | 17 |
</p-footer> |
| 20 | 18 |
</p-dialog> |
| src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.html | ||
|---|---|---|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add unit" [style]="{width: '50vw'}"
|
|
| 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add unit" |
|
| 2 | 2 |
[baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'"> |
| 3 | 3 |
|
| 4 | 4 |
<form [formGroup]="insertForm"> |
| ... | ... | |
| 77 | 77 |
</small> |
| 78 | 78 |
</div> |
| 79 | 79 |
</div> |
| 80 |
<h3>Add sensors</h3> |
|
| 80 |
<h3>Added sensors</h3>
|
|
| 81 | 81 |
<hr> |
| 82 | 82 |
<div class="input-group form-group popup-sensors-wrapper"> |
| 83 | 83 |
<div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">
|
| ... | ... | |
| 124 | 124 |
</form> |
| 125 | 125 |
<p-footer> |
| 126 | 126 |
<div class="popup-buttons-wrapper"> |
| 127 |
<div> |
|
| 128 |
<p-button type="button" (click)="addSensor()" class="pr-2">Add sensor</p-button>
|
|
| 129 |
<p-button *ngIf="sensors > 0" type="button" (click)="removeSensor()" class="pr-2">Remove last sensor</p-button>
|
|
| 127 |
<div class="popup-buttons-group">
|
|
| 128 |
<button pButton type="button" label="Add sensor" class="p-button-success" (click)="addSensor()"></button>
|
|
| 129 |
<button pButton type="button" *ngIf="sensors > 0" label="Remove last sensor" class="p-button-danger" (click)="removeSensor()"></button>
|
|
| 130 | 130 |
</div> |
| 131 |
<div> |
|
| 132 |
<p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button>
|
|
| 133 |
<p-button icon="pi pi-check" (click)="processInsertion()" type="submit" label="Save" class="pr-2"></p-button>
|
|
| 131 |
<div class="popup-buttons-group">
|
|
| 132 |
<button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
|
|
| 133 |
<button pButton type="submit" label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="processInsertion()"></button>
|
|
| 134 | 134 |
</div> |
| 135 | 135 |
</div> |
| 136 | 136 |
</p-footer> |
| src/app/shared/nav-bar/components/user-insert-popup/user-insert-popup.component.html | ||
|---|---|---|
| 1 | 1 |
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add user" |
| 2 |
[style]="{width: '50vw'}" [baseZIndex]="10000" [className]="'popup-form'">
|
|
| 2 |
[baseZIndex]="10000" [className]="'popup-form'"> |
|
| 3 | 3 |
|
| 4 | 4 |
<form [formGroup]="insertForm"> |
| 5 | 5 |
<div class="input-group form-group"> |
| ... | ... | |
| 47 | 47 |
</div> |
| 48 | 48 |
</div> |
| 49 | 49 |
</form> |
| 50 |
|
|
| 51 | 50 |
<p-footer> |
| 52 |
<div class="row justify-content-end align-items-center">
|
|
| 53 |
<div> |
|
| 54 |
<p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button>
|
|
| 55 |
<p-button icon="pi pi-check" (click)="saveUser()" type="submit" label="Save" class="pr-2"></p-button>
|
|
| 51 |
<div class="row"> |
|
| 52 |
<div class="popup-buttons">
|
|
| 53 |
<button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
|
|
| 54 |
<button pButton type="submit" label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="saveUser()"></button>
|
|
| 56 | 55 |
</div> |
| 57 | 56 |
</div> |
| 58 | 57 |
</p-footer> |
Také k dispozici: Unified diff