Refine Disabled Slide Toggles and Action Buttons

CarnegieLearningWeb · Oct 7, 2024 · c0f5bce · c0f5bce
1 parent ac0f91b
commit c0f5bce
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 14 deletions.
diff --git a/...ommon-details-participant-list-table/common-details-participant-list-table.component.html b/...ommon-details-participant-list-table/common-details-participant-list-table.component.html
@@ -65,12 +65,16 @@
         {{ PARTICIPANT_LIST_TRANSLATION_KEYS.ACTIONS | translate }}
       </th>
       <td mat-cell *matCellDef="let rowData" class="actions-column ft-14-400 dense-2">
-        <button mat-icon-button class="action-button" [disabled]="actionsDisabled" (click)="onEditButtonClick(rowData)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button class="action-button" [disabled]="actionsDisabled" (click)="onDeleteButtonClick(rowData)">
-          <mat-icon>delete_outline</mat-icon>
-        </button>
+        <div class="button-wrapper">
+          <button mat-icon-button class="action-button" [disabled]="actionsDisabled" (click)="onEditButtonClick(rowData)">
+            <mat-icon>edit</mat-icon>
+          </button>
+        </div>
+        <div class="button-wrapper">
+          <button mat-icon-button class="action-button" [disabled]="actionsDisabled" (click)="onDeleteButtonClick(rowData)">
+            <mat-icon>delete_outline</mat-icon>
+          </button>
+        </div>
       </td>
     </ng-container>
 

diff --git a/...ommon-details-participant-list-table/common-details-participant-list-table.component.scss b/...ommon-details-participant-list-table/common-details-participant-list-table.component.scss
@@ -76,6 +76,46 @@
     .enable-column {
       width: 20%;
       text-align: center;
+
+      ::ng-deep .mat-mdc-slide-toggle {
+        cursor: not-allowed;
+        .mdc-switch {
+          cursor: not-allowed;
+          &--unselected {
+            .mdc-switch__track {
+              opacity: 1.0;
+              &::before {
+                background: var(--mdc-switch-unselected-track-color);
+              }
+            }
+
+            .mdc-switch__shadow {
+              background: var(--mdc-switch-unselected-handle-color);
+            }
+
+            .mdc-switch__icons {
+              opacity: 1.0;
+            }
+          }
+
+          &--selected {
+            .mdc-switch__track {
+              opacity: 1.0;
+              &::after {
+                background: var(--mdc-switch-selected-track-color);
+              }
+            }
+
+            .mdc-switch__shadow {
+              background: var(--mdc-switch-selected-handle-color);
+            }
+
+            .mdc-switch__icons {
+              opacity: 1.0;
+            }
+          }
+        }
+      }
     }
 
     .actions-column {
@@ -84,14 +124,20 @@
       text-align: center;
       padding-right: 16px;
 
-      .action-button {
-        color: var(--dark-grey);
+      .button-wrapper {
+        display: inline-block;
+        .action-button {
+          color: var(--dark-grey);
 
-        &[disabled] {
-          .mat-icon {
-            opacity: 0.5;
+          &[disabled] {
+            .mat-icon {
+              opacity: 0.5;
+            }
           }
         }
+        &:has(.action-button:disabled) {
+          cursor: not-allowed;
+        }
       }
     }
   }

diff --git a/...ents/common-section-card-action-buttons/common-section-card-action-buttons.component.scss b/...ents/common-section-card-action-buttons/common-section-card-action-buttons.component.scss
@@ -9,9 +9,50 @@
     column-gap: 34px;
     padding: 0 16px;
 
-    ::ng-deep .mat-mdc-slide-toggle .mdc-label {
-      margin-left: 5px;
-      color: var(--dark-grey);
+    ::ng-deep .mat-mdc-slide-toggle {
+      cursor: not-allowed;
+      .mdc-switch {
+        cursor: not-allowed;
+        &--unselected {
+          .mdc-switch__track {
+            opacity: 1.0;
+            &::before {
+              background: var(--mdc-switch-unselected-track-color);
+            }
+          }
+
+          .mdc-switch__shadow {
+            background: var(--mdc-switch-unselected-handle-color);
+          }
+
+          .mdc-switch__icons {
+            opacity: 1.0;
+          }
+        }
+
+        &--selected {
+          .mdc-switch__track {
+            opacity: 1.0;
+            &::after {
+              background: var(--mdc-switch-selected-track-color);
+            }
+          }
+
+          .mdc-switch__shadow {
+            background: var(--mdc-switch-selected-handle-color);
+          }
+
+          .mdc-switch__icons {
+            opacity: 1.0;
+          }
+        }
+      }
+
+      .mdc-label {
+        margin-left: 5px;
+        color: var(--dark-grey);
+        cursor: not-allowed;
+      }
     }
 
     .primary-button-text {
@@ -22,6 +63,7 @@
   .options-container {
     display: flex;
     column-gap: 4px;
+    cursor: not-allowed;
 
     .mat-mdc-icon-button:not(.mat-mdc-button-disabled) .mat-icon {
       color: var(--dark-grey);