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