UI: Fixed highlighting when disabled toggle-selected

2 years ago · 907f6a2f73
9 changed files with 27 additions and 206 deletions
--- 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>
--- 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;
-      }
-    }
  }
 }
--- 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>
--- 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
@ -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;
-    }
-  }
-}
--- 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> {

--- 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
--- 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;
-      }
-    }
  }
 }
--- 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;
+  }
 }
--- 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 {