dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #12124 from vvlladd28/bug/toggle-select/disable-overlay

Browse Source 
Fixed highlighting when disabled toggle-selected
This commit is contained in:
Igor Kulikov 2024-11-29 17:58:52 +02:00 committed by GitHub
commit e779a6a6b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 27 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
View File

@ -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>

55
ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
View File

@ -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;
}
}
}
}

10
ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
View File

@ -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;"
<tb-toggle-select class="w-44" appearance="fill"
[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-option [value]=true>{{ 'notification.unread' | translate }}</tb-toggle-option>
<tb-toggle-option [value]=false>{{ 'notification.all' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>

75
ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
View File

@ -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;
}
}
}

2
ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.ts
View File

@ -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> {

12
ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
View File

@ -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

54
ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
View File

@ -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;
}
}
}
}

7
ui-ngx/src/app/shared/components/script-lang.component.scss
View File

@ -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;
}
}

4
ui-ngx/src/app/shared/components/toggle-header.component.scss
View File

@ -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 {