UI: Refactoring notification settings

ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html

@@ -18,19 +18,17 @@
 <form [formGroup]="notificationSettingsFormGroup" fxLayout="column">
   <div fxLayout="row" style="height: 48px;">
     <div fxFlex="50" fxLayoutAlign="start center">
-      <button mat-icon-button
-        (click)="toggleEnabled()">
-        <mat-icon style="color: rgba(0, 0, 0, 0.54);"
-                  [svgIcon]="notificationSettingsFormGroup.get('enabled').value ? 'mdi:toggle-switch': 'mdi:toggle-switch-off-outline'">
-        </mat-icon>
-      </button>
-      <span class="notification-type"
-            [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
-        {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
-      </span>
+      <mat-checkbox color="primary"
+                    [checked]="notificationSettingsFormGroup.get('enabled').value"
+                    (click)="toggleEnabled()">
+        <span class="notification-type"
+              [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
+          {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
+        </span>
+      </mat-checkbox>
     </div>
     <div fxFlex fxLayout="row" *ngFor="let deliveryMethods of notificationDeliveryMethodMap">
-      <div fxFlex fxLayoutAlign="center center">
+      <div fxFlex fxLayoutAlign="start center">
         <mat-checkbox color="primary"
                       [disabled]="!allowDeliveryMethods?.includes(deliveryMethods) || !notificationSettingsFormGroup.get('enabled').value"
                       [checked]="getChecked(deliveryMethods)"

ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html

@@ -33,8 +33,8 @@
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-    <mat-card-content style="padding-top: 16px;">
-      <form [formGroup]="notificationSettings" (ngSubmit)="save()">
+    <mat-card-content style="padding-top: 16px; overflow: hidden;">
+      <form [formGroup]="notificationSettings" class="notification-form">
         <section class="notification-section">
           <div  class="notification-section-block">
             <div fxLayout="row" fxLayoutAlign="start center" style="height: 44px;">
@@ -48,7 +48,7 @@
                 </mat-checkbox>
               </div>
               <div fxFlex *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                <div fxFlex fxLayoutAlign="center center">
+                <div fxFlex fxLayoutAlign="start center">
                   <mat-checkbox color="warn"
                                 [disabled]="!allowNotificationDeliveryMethods?.includes(deliveryMethods) || !getSomeChecked()"
                                 [checked]="getChecked(deliveryMethods)"
@@ -67,14 +67,15 @@
             </div>
           </div>
         </section>
-        <div fxLayout="row" fxLayoutAlign="end start">
-          <button mat-button mat-raised-button color="primary"
-                  type="submit"
-                  [disabled]="(isLoading$ | async) || notificationSettings.invalid || !notificationSettings.dirty">
-            {{ 'action.save' | translate }}
-          </button>
-        </div>
       </form>
+      <div fxLayout="row" fxLayoutAlign="end start">
+        <button mat-button mat-raised-button color="primary"
+                type="button"
+                (click)="save()"
+                [disabled]="(isLoading$ | async) || notificationSettings.invalid || !notificationSettings.dirty">
+          {{ 'action.save' | translate }}
+        </button>
+      </div>
     </mat-card-content>
   </mat-card>
 </div>

ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.scss

@@ -17,6 +17,11 @@
 
 :host {
   .mat-mdc-card.settings-card {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     margin: 8px;
     @media #{$mat-gt-sm} {
       width: 60%;
@@ -24,13 +29,18 @@
     .mat-headline-5 {
       margin: 0;
     }
-    .notification-section {
+    .notification-form {
+      height: calc(100% - 48px);
+      min-height: min-content;
+      max-height: min-content;
       margin-bottom: 16px;
+    }
+    .notification-section {
+      height: 100%;
       border: 1px solid rgba(0, 0, 0, 0.12);
-      overflow-y: hidden;
-      overflow-x: scroll;
+      overflow: scroll;
       &-block {
-        min-width: 700px;
+        min-width: 470px;
       }
     }
   }