From 907f6a2f73bb4eb38d47aed7eaaa2a44d6bb00d6 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 26 Nov 2024 19:51:35 +0200
Subject: [PATCH] UI: Fixed highlighting when disabled toggle-selected

---
 .../pages/admin/mail-server.component.html    | 10 +--
 .../pages/admin/mail-server.component.scss    | 55 --------------
 .../inbox/inbox-table-header.component.html   | 14 ++--
 .../inbox/inbox-table-header.component.scss   | 75 -------------------
 .../inbox/inbox-table-header.component.ts     |  2 +-
 .../rule-notification-dialog.component.html   | 12 ++-
 .../rule-notification-dialog.component.scss   | 54 -------------
 .../components/script-lang.component.scss     |  7 ++
 .../components/toggle-header.component.scss   |  4 +
 9 files changed, 27 insertions(+), 206 deletions(-)
 delete mode 100644 ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss

diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index 14a6358efb..ff10de6fc2 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -152,12 +152,10 @@
                      autocomplete="new-username"/>
             </mat-form-field>
             <div class="flex items-center justify-between" style="height: 50px; padding-bottom: 20px" [class.!hidden]="mailSettings.get('providerId').value === 'SENDGRID'">
-              <mat-button-toggle-group class="tb-notification-unread-toggle-group"
-                                       style="width: 250px;"
-                                       formControlName="enableOauth2">
-                <mat-button-toggle class="flex-1" [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
-                <mat-button-toggle class="flex-1" [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
-              </mat-button-toggle-group>
+              <tb-toggle-select class="w-52" formControlName="enableOauth2" appearance="fill">
+                <tb-toggle-option [value]=false>{{ 'admin.oauth2.basic' | translate }}</tb-toggle-option>
+                <tb-toggle-option [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</tb-toggle-option>
+              </tb-toggle-select>
               <div class="details-buttons" *ngIf="helpLink && mailSettings.get('enableOauth2').value">
                 <div [tb-help]="helpLink"></div>
               </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
index b87c58bc48..a60be6f5c2 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
@@ -51,60 +51,5 @@
         border: 1px solid rgba(0, 0, 0, 0.2);
       }
     }
-    .mat-button-toggle-group.tb-notification-unread-toggle-group {
-      &.mat-button-toggle-group-appearance-standard {
-        border: none;
-        border-radius: 14px;
-
-        .mat-button-toggle + .mat-button-toggle {
-          border-left: none;
-        }
-      }
-
-      .mat-button-toggle {
-        background: rgba(0, 0, 0, 0.06);
-        height: 28px;
-        align-items: center;
-        display: flex;
-
-        .mat-button-toggle-ripple {
-          top: 2px;
-          left: 2px;
-          right: 2px;
-          bottom: 2px;
-          border-radius: 12px;
-        }
-      }
-
-      .mat-button-toggle-button {
-        color: #959595;
-      }
-
-      .mat-button-toggle-focus-overlay {
-        border-radius: 14px;
-        margin: 2px;
-      }
-
-      .mat-button-toggle-checked .mat-button-toggle-button {
-        background-color: $tb-primary-color;
-        color: #fff;
-        border-radius: 14px;
-        margin-left: 2px;
-        margin-right: 2px;
-      }
-
-      .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-        line-height: 24px;
-        font-size: 16px;
-        font-weight: 500;
-        .mat-pseudo-checkbox {
-          display: none;
-        }
-      }
-
-      .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-        opacity: .01;
-      }
-    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
index 7338a32fc2..8e7263914e 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
@@ -16,12 +16,10 @@
 
 -->
 <div class="flex flex-full flex-row items-center justify-start">
-  <mat-button-toggle-group class="tb-notification-unread-toggle-group"
-                           style="width: 180px;"
-                           [ngModel]="entitiesTableConfig.componentsData.unreadOnly"
-                           (ngModelChange)="changeUnreadOnly($event)">
-    <mat-button-toggle class="flex-1" [value]=true>{{ 'notification.unread' | translate }}</mat-button-toggle>
-    <mat-button-toggle class="flex-1" [value]=false>{{ 'notification.all' | translate }}</mat-button-toggle>
-  </mat-button-toggle-group>
-
+  <tb-toggle-select class="w-44" appearance="fill"
+                    [ngModel]="entitiesTableConfig.componentsData.unreadOnly"
+                    (ngModelChange)="changeUnreadOnly($event)">
+    <tb-toggle-option [value]=true>{{ 'notification.unread' | translate }}</tb-toggle-option>
+    <tb-toggle-option [value]=false>{{ 'notification.all' | translate }}</tb-toggle-option>
+  </tb-toggle-select>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
deleted file mode 100644
index af69f47306..0000000000
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import "../../../../../../scss/constants";
-
-:host ::ng-deep {
-  .mat-button-toggle-group.tb-notification-unread-toggle-group {
-    &.mat-button-toggle-group-appearance-standard {
-      border: none;
-      border-radius: 14px;
-
-      .mat-button-toggle + .mat-button-toggle {
-        border-left: none;
-      }
-    }
-
-    .mat-button-toggle {
-      background: rgba(0, 0, 0, 0.06);
-      height: 28px;
-      align-items: center;
-      display: flex;
-
-      .mat-button-toggle-ripple {
-        top: 2px;
-        left: 2px;
-        right: 2px;
-        bottom: 2px;
-        border-radius: 14px;
-      }
-    }
-
-    .mat-button-toggle-button {
-      color: #959595;
-    }
-
-    .mat-button-toggle-focus-overlay {
-      border-radius: 14px;
-      margin: 2px;
-    }
-
-    .mat-button-toggle-checked .mat-button-toggle-button {
-      background-color: $tb-primary-color;
-      color: #fff;
-      border-radius: 14px;
-      margin-left: 2px;
-      margin-right: 2px;
-    }
-
-    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-      line-height: 24px;
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: .25px;
-      .mat-pseudo-checkbox {
-        display: none;
-      }
-    }
-
-    .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-      opacity: .01;
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.ts b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.ts
index f317f452bd..d3f7cf2005 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.ts
@@ -23,7 +23,7 @@ import { Notification } from '@shared/models/notification.models';
 @Component({
   selector: 'tb-inbox-table-header',
   templateUrl: './inbox-table-header.component.html',
-  styleUrls: ['inbox-table-header.component.scss']
+  styleUrls: []
 })
 export class InboxTableHeaderComponent extends EntityTableHeaderComponent<Notification> {
 
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
index 23d76e90a3..2d7ef41bd5 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
@@ -161,13 +161,11 @@
       <ng-template matStepLabel>{{ 'notification.device-activity-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="deviceInactivityTemplateForm">
         <section formGroupName="triggerConfig">
-          <div class="flex flex-1 items-center justify-center">
-            <mat-button-toggle-group class="tb-notification-unread-toggle-group"
-                                     style="width: 250px;"
-                                     formControlName="filterByDevice">
-              <mat-button-toggle class="flex-1" [value]=true>{{ 'device.device' | translate }}</mat-button-toggle>
-              <mat-button-toggle class="flex-1" [value]=false>{{ 'device-profile.device-profile' | translate }}</mat-button-toggle>
-            </mat-button-toggle-group>
+          <div class="mb-4 flex justify-center">
+            <tb-toggle-select class="w-60" appearance="fill" formControlName="filterByDevice">
+              <tb-toggle-option [value]=true>{{ 'device.device' | translate }}</tb-toggle-option>
+              <tb-toggle-option [value]=false>{{ 'device-profile.device-profile' | translate }}</tb-toggle-option>
+            </tb-toggle-select>
           </div>
           <ng-container *ngIf="deviceInactivityTemplateForm.get('triggerConfig.filterByDevice').value; else deviceProfile">
             <tb-entity-list
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
index 8e09be6de4..52e0e9e0ba 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
@@ -119,59 +119,5 @@
         }
       }
     }
-
-    .mat-button-toggle-group.tb-notification-unread-toggle-group {
-      &.mat-button-toggle-group-appearance-standard {
-        border: none;
-        border-radius: 18px;
-        margin-bottom: 8px;
-
-        .mat-button-toggle + .mat-button-toggle {
-          border-left: none;
-        }
-      }
-
-      .mat-button-toggle {
-        background: rgba(0, 0, 0, 0.06);
-        height: 36px;
-        align-items: center;
-        display: flex;
-
-        .mat-button-toggle-ripple {
-          top: 2px;
-          left: 2px;
-          right: 2px;
-          bottom: 2px;
-          border-radius: 18px;
-        }
-      }
-
-      .mat-button-toggle-button {
-        color: #959595;
-      }
-
-      .mat-button-toggle-focus-overlay {
-        border-radius: 18px;
-        margin: 2px;
-      }
-
-      .mat-button-toggle-checked .mat-button-toggle-button {
-        background-color: $tb-primary-color;
-        color: #fff;
-        border-radius: 18px;
-        margin-left: 2px;
-        margin-right: 2px;
-      }
-
-      .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-        line-height: 34px;
-        font-size: 16px;
-        font-weight: 500;
-      }
-
-      .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-        opacity: .01;
-      }
-    }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/script-lang.component.scss b/ui-ngx/src/app/shared/components/script-lang.component.scss
index 6818f74dd8..6c437ea6cf 100644
--- a/ui-ngx/src/app/shared/components/script-lang.component.scss
+++ b/ui-ngx/src/app/shared/components/script-lang.component.scss
@@ -23,6 +23,7 @@
     }
   }
   .mat-button-toggle {
+    --mat-standard-button-toggle-disabled-selected-state-background-color: rgba(0, 0, 0, 0.06);
     background: rgba(0, 0, 0, 0.06);
     height: 36px;
     align-items: center;
@@ -62,4 +63,10 @@
   .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
     opacity: .01;
   }
+  .mat-button-toggle-appearance-standard.mat-button-toggle-disabled:hover .mat-button-toggle-focus-overlay {
+    opacity: 0;
+  }
+  .mat-button-toggle-disabled {
+    opacity: 0.6;
+  }
 }
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
index 08adcab38c..cab4339622 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -151,6 +151,10 @@
             border-color: rgba(0, 0, 0, 0.38);
           }
         }
+
+        .mat-button-toggle-focus-overlay {
+          opacity: 0;
+        }
       }
       &.tb-fill {
         .mat-button-toggle.mat-button-toggle-appearance-standard {