IKC-405 Dialog modals

Consdata · Oct 14, 2024 · 5da5478 · 5da5478
1 parent 3f753e6
commit 5da5478
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 75 deletions.
diff --git a/kouncil-frontend/libs/feat-topic-form/src/lib/topic/topic-form.component.scss b/kouncil-frontend/libs/feat-topic-form/src/lib/topic/topic-form.component.scss
@@ -1,5 +1,6 @@
 @use '../../../../../apps/kouncil/src/styles/buttons';
 @import '../../../../../apps/kouncil/src/styles/palette';
+@import "../../../../../apps/kouncil/src/styles/spaces";
 
 :host {
   .topic-form {
@@ -10,18 +11,16 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    margin-bottom: 20px;
     width: 100%;
 
     .topic-form-field {
       width: 100%;
-      padding-bottom: 10px;
+      padding-bottom: $space-4;
     }
   }
 
   .actions {
-    float: right;
-    margin-top: 20px;
+    margin-top: $space-6;
 
     .action-button-blue {
       @include buttons.button-blue;
@@ -33,7 +32,7 @@
 
     .action-button-white {
       @include buttons.button-white;
-      margin-right: 10px;
+      margin-right: $space-4;
     }
   }
 }
diff --git a/kouncil-frontend/libs/feat-topic-form/src/lib/topic/topic-form.component.ts b/kouncil-frontend/libs/feat-topic-form/src/lib/topic/topic-form.component.ts
@@ -12,49 +12,47 @@ import {SnackBarComponent, SnackBarData, ViewMode} from '@app/common-utils';
 @Component({
   selector: 'app-topic-form',
   template: `
-    <mat-dialog-content>
-      <form [formGroup]="topicForm" (ngSubmit)="save()" class="form topic-form">
-        <div class="drawer-header">
-          <div class="drawer-title">
-            {{ header }}
-          </div>
-          <div class="spacer"></div>
-          <mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
-        </div>
-
-        <div class="topic-info">
-          <div class="topic-form-field">
-            <app-common-text-field [form]="topicForm" [controlName]="'name'"
-                                   [readonly]="ViewMode.CREATE !== viewMode"
-                                   [label]="'Name'" [required]="true"></app-common-text-field>
-          </div>
+    <div mat-dialog-title class="drawer-header">
+      <div class="drawer-title">
+        {{ header }}
+      </div>
+      <div class="spacer"></div>
+      <mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
+    </div>
 
-          <div class="topic-form-field">
-            <app-common-number-field [form]="topicForm" [controlName]="'partitions'"
-                                     [label]="'Partitions'"
-                                     [required]="true"></app-common-number-field>
-          </div>
+    <form [formGroup]="topicForm" (ngSubmit)="save()" class="form topic-form">
+      <div mat-dialog-content class="topic-info">
+        <div class="topic-form-field">
+          <app-common-text-field [form]="topicForm" [controlName]="'name'"
+                                 [readonly]="ViewMode.CREATE !== viewMode"
+                                 [label]="'Name'" [required]="true"></app-common-text-field>
+        </div>
 
-          <div class="topic-form-field">
-            <app-common-number-field [form]="topicForm" [controlName]="'replicationFactor'"
-                                     [label]="'Replication Factor'"
-                                     [readonly]="ViewMode.CREATE !== viewMode"
-                                     [required]="true"></app-common-number-field>
-          </div>
+        <div class="topic-form-field">
+          <app-common-number-field [form]="topicForm" [controlName]="'partitions'"
+                                   [label]="'Partitions'"
+                                   [required]="true"></app-common-number-field>
         </div>
 
-        <div class="actions">
-          <button type="button" mat-dialog-close mat-button [disableRipple]="true"
-                  class="action-button-white">
-            Cancel
-          </button>
-          <button mat-button [disableRipple]="true"
-                  class="action-button-blue" type="submit" [disabled]="!topicForm.valid">
-            Save
-          </button>
+        <div class="topic-form-field">
+          <app-common-number-field [form]="topicForm" [controlName]="'replicationFactor'"
+                                   [label]="'Replication Factor'"
+                                   [readonly]="ViewMode.CREATE !== viewMode"
+                                   [required]="true"></app-common-number-field>
         </div>
-      </form>
-    </mat-dialog-content>
+      </div>
+    </form>
+
+    <div mat-dialog-actions class="actions">
+      <button type="button" mat-dialog-close mat-button [disableRipple]="true"
+              class="action-button-white">
+        Cancel
+      </button>
+      <button mat-button [disableRipple]="true"
+              class="action-button-blue" type="submit" [disabled]="!topicForm.valid">
+        Save
+      </button>
+    </div>
   `,
   styleUrls: ['./topic-form.component.scss']
 })

diff --git a/...il-frontend/libs/feat-user-groups/src/lib/user-groups/form/user-group-form.component.scss b/...il-frontend/libs/feat-user-groups/src/lib/user-groups/form/user-group-form.component.scss
@@ -10,7 +10,6 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    margin-bottom: $space-6;
     width: 100%;
 
     .user-group-form-field {
@@ -20,7 +19,6 @@
   }
 
   .actions {
-    float: right;
     margin-top: $space-6;
 
     .action-button-blue {

diff --git a/kouncil-frontend/libs/feat-user-groups/src/lib/user-groups/form/user-group-form.component.ts b/kouncil-frontend/libs/feat-user-groups/src/lib/user-groups/form/user-group-form.component.ts
@@ -19,40 +19,38 @@ import {UserGroup} from '../../user-groups-functions-matrix/user-groups.model';
 @Component({
   selector: 'app-user-group-form',
   template: `
-    <mat-dialog-content>
-      <form [formGroup]="userGroupForm" (ngSubmit)="save()" class="form user-group-form">
-        <div class="drawer-header">
-          <div class="drawer-title">
-            {{ header }}
-          </div>
-          <div class="spacer"></div>
-          <mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
-        </div>
-
-        <div class="user-group-info">
-          <div class="user-group-form-field">
-            <app-common-text-field [form]="userGroupForm" [controlName]="'code'"
-                                   [label]="'Code'" [required]="true"></app-common-text-field>
-          </div>
+    <div mat-dialog-title class="drawer-header">
+      <div class="drawer-title">
+        {{ header }}
+      </div>
+      <div class="spacer"></div>
+      <mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
+    </div>
 
-          <div class="user-group-form-field">
-            <app-common-text-field [form]="userGroupForm" [controlName]="'name'"
-                                   [label]="'Name'" [required]="true"></app-common-text-field>
-          </div>
+    <form [formGroup]="userGroupForm" (ngSubmit)="save()" class="form user-group-form">
+      <div mat-dialog-content class="user-group-info">
+        <div class="user-group-form-field">
+          <app-common-text-field [form]="userGroupForm" [controlName]="'code'"
+                                 [label]="'Code'" [required]="true"></app-common-text-field>
         </div>
 
-        <div class="actions">
-          <button type="button" mat-dialog-close mat-button [disableRipple]="true"
-                  class="action-button-white">
-            Cancel
-          </button>
-          <button mat-button [disableRipple]="true"
-                  class="action-button-blue" type="submit" [disabled]="!userGroupForm.valid">
-            Save
-          </button>
+        <div class="user-group-form-field">
+          <app-common-text-field [form]="userGroupForm" [controlName]="'name'"
+                                 [label]="'Name'" [required]="true"></app-common-text-field>
         </div>
-      </form>
-    </mat-dialog-content>
+      </div>
+    </form>
+
+    <div mat-dialog-actions class="actions">
+      <button type="button" mat-dialog-close mat-button [disableRipple]="true"
+              class="action-button-white">
+        Cancel
+      </button>
+      <button mat-button [disableRipple]="true"
+              class="action-button-blue" type="submit" [disabled]="!userGroupForm.valid">
+        Save
+      </button>
+    </div>
   `,
   styleUrls: ['./user-group-form.component.scss']
 })