Skip to content

Commit 5c1b61f

Browse files
pbelkepbelke
authored
Merge pull request #392 from Consdata/IKC-405-dialog-modals
IKC-405 Dialog modals
2 parents f26d160 + 5da5478 commit 5c1b61f

File tree

4 files changed

+68
-75
lines changed

4 files changed

+68
-75
lines changed

‎kouncil-frontend/libs/feat-topic-form/src/lib/topic/topic-form.component.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../../../../../apps/kouncil/src/styles/buttons';
22
@import '../../../../../apps/kouncil/src/styles/palette';
3+
@import "../../../../../apps/kouncil/src/styles/spaces";
34

45
:host {
56
.topic-form {
@@ -10,18 +11,16 @@
1011
display: flex;
1112
flex-wrap: wrap;
1213
justify-content: space-between;
13-
margin-bottom: 20px;
1414
width: 100%;
1515

1616
.topic-form-field {
1717
width: 100%;
18-
padding-bottom: 10px;
18+
padding-bottom: $space-4;
1919
}
2020
}
2121

2222
.actions {
23-
float: right;
24-
margin-top: 20px;
23+
margin-top: $space-6;
2524

2625
.action-button-blue {
2726
@include buttons.button-blue;
@@ -33,7 +32,7 @@
3332

3433
.action-button-white {
3534
@include buttons.button-white;
36-
margin-right: 10px;
35+
margin-right: $space-4;
3736
}
3837
}
3938
}

‎kouncil-frontend/libs/feat-topic-form/src/lib/topic/topic-form.component.ts

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -12,49 +12,47 @@ import {SnackBarComponent, SnackBarData, ViewMode} from '@app/common-utils';
1212
@Component({
1313
selector: 'app-topic-form',
1414
template: `
15-
<mat-dialog-content>
16-
<form [formGroup]="topicForm" (ngSubmit)="save()" class="form topic-form">
17-
<div class="drawer-header">
18-
<div class="drawer-title">
19-
{{ header }}
20-
</div>
21-
<div class="spacer"></div>
22-
<mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
23-
</div>
24-
25-
<div class="topic-info">
26-
<div class="topic-form-field">
27-
<app-common-text-field [form]="topicForm" [controlName]="'name'"
28-
[readonly]="ViewMode.CREATE !== viewMode"
29-
[label]="'Name'" [required]="true"></app-common-text-field>
30-
</div>
15+
<div mat-dialog-title class="drawer-header">
16+
<div class="drawer-title">
17+
{{ header }}
18+
</div>
19+
<div class="spacer"></div>
20+
<mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
21+
</div>
3122
32-
<div class="topic-form-field">
33-
<app-common-number-field [form]="topicForm" [controlName]="'partitions'"
34-
[label]="'Partitions'"
35-
[required]="true"></app-common-number-field>
36-
</div>
23+
<form [formGroup]="topicForm" (ngSubmit)="save()" class="form topic-form">
24+
<div mat-dialog-content class="topic-info">
25+
<div class="topic-form-field">
26+
<app-common-text-field [form]="topicForm" [controlName]="'name'"
27+
[readonly]="ViewMode.CREATE !== viewMode"
28+
[label]="'Name'" [required]="true"></app-common-text-field>
29+
</div>
3730
38-
<div class="topic-form-field">
39-
<app-common-number-field [form]="topicForm" [controlName]="'replicationFactor'"
40-
[label]="'Replication Factor'"
41-
[readonly]="ViewMode.CREATE !== viewMode"
42-
[required]="true"></app-common-number-field>
43-
</div>
31+
<div class="topic-form-field">
32+
<app-common-number-field [form]="topicForm" [controlName]="'partitions'"
33+
[label]="'Partitions'"
34+
[required]="true"></app-common-number-field>
4435
</div>
4536
46-
<div class="actions">
47-
<button type="button" mat-dialog-close mat-button [disableRipple]="true"
48-
class="action-button-white">
49-
Cancel
50-
</button>
51-
<button mat-button [disableRipple]="true"
52-
class="action-button-blue" type="submit" [disabled]="!topicForm.valid">
53-
Save
54-
</button>
37+
<div class="topic-form-field">
38+
<app-common-number-field [form]="topicForm" [controlName]="'replicationFactor'"
39+
[label]="'Replication Factor'"
40+
[readonly]="ViewMode.CREATE !== viewMode"
41+
[required]="true"></app-common-number-field>
5542
</div>
56-
</form>
57-
</mat-dialog-content>
43+
</div>
44+
</form>
45+
46+
<div mat-dialog-actions class="actions">
47+
<button type="button" mat-dialog-close mat-button [disableRipple]="true"
48+
class="action-button-white">
49+
Cancel
50+
</button>
51+
<button mat-button [disableRipple]="true"
52+
class="action-button-blue" type="submit" [disabled]="!topicForm.valid">
53+
Save
54+
</button>
55+
</div>
5856
`,
5957
styleUrls: ['./topic-form.component.scss']
6058
})

‎kouncil-frontend/libs/feat-user-groups/src/lib/user-groups/form/user-group-form.component.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
display: flex;
1111
flex-wrap: wrap;
1212
justify-content: space-between;
13-
margin-bottom: $space-6;
1413
width: 100%;
1514

1615
.user-group-form-field {
@@ -20,7 +19,6 @@
2019
}
2120

2221
.actions {
23-
float: right;
2422
margin-top: $space-6;
2523

2624
.action-button-blue {

‎kouncil-frontend/libs/feat-user-groups/src/lib/user-groups/form/user-group-form.component.ts

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -19,40 +19,38 @@ import {UserGroup} from '../../user-groups-functions-matrix/user-groups.model';
1919
@Component({
2020
selector: 'app-user-group-form',
2121
template: `
22-
<mat-dialog-content>
23-
<form [formGroup]="userGroupForm" (ngSubmit)="save()" class="form user-group-form">
24-
<div class="drawer-header">
25-
<div class="drawer-title">
26-
{{ header }}
27-
</div>
28-
<div class="spacer"></div>
29-
<mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
30-
</div>
31-
32-
<div class="user-group-info">
33-
<div class="user-group-form-field">
34-
<app-common-text-field [form]="userGroupForm" [controlName]="'code'"
35-
[label]="'Code'" [required]="true"></app-common-text-field>
36-
</div>
22+
<div mat-dialog-title class="drawer-header">
23+
<div class="drawer-title">
24+
{{ header }}
25+
</div>
26+
<div class="spacer"></div>
27+
<mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
28+
</div>
3729
38-
<div class="user-group-form-field">
39-
<app-common-text-field [form]="userGroupForm" [controlName]="'name'"
40-
[label]="'Name'" [required]="true"></app-common-text-field>
41-
</div>
30+
<form [formGroup]="userGroupForm" (ngSubmit)="save()" class="form user-group-form">
31+
<div mat-dialog-content class="user-group-info">
32+
<div class="user-group-form-field">
33+
<app-common-text-field [form]="userGroupForm" [controlName]="'code'"
34+
[label]="'Code'" [required]="true"></app-common-text-field>
4235
</div>
4336
44-
<div class="actions">
45-
<button type="button" mat-dialog-close mat-button [disableRipple]="true"
46-
class="action-button-white">
47-
Cancel
48-
</button>
49-
<button mat-button [disableRipple]="true"
50-
class="action-button-blue" type="submit" [disabled]="!userGroupForm.valid">
51-
Save
52-
</button>
37+
<div class="user-group-form-field">
38+
<app-common-text-field [form]="userGroupForm" [controlName]="'name'"
39+
[label]="'Name'" [required]="true"></app-common-text-field>
5340
</div>
54-
</form>
55-
</mat-dialog-content>
41+
</div>
42+
</form>
43+
44+
<div mat-dialog-actions class="actions">
45+
<button type="button" mat-dialog-close mat-button [disableRipple]="true"
46+
class="action-button-white">
47+
Cancel
48+
</button>
49+
<button mat-button [disableRipple]="true"
50+
class="action-button-blue" type="submit" [disabled]="!userGroupForm.valid">
51+
Save
52+
</button>
53+
</div>
5654
`,
5755
styleUrls: ['./user-group-form.component.scss']
5856
})

0 commit comments

Comments
 (0)