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

UI: icons refactoring additions

Browse Source
This commit is contained in:
Dmitriymush 2023-12-01 16:05:43 +02:00
parent ae775e0a17
commit d4ffff1490
10 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
View File

@ -36,7 +36,7 @@
(click)="changeSortDirection()" (click)="changeSortDirection()"
[matTooltip]="getSortDirectionTooltipText()" [matTooltip]="getSortDirectionTooltipText()"
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon class="material-icons" [svgIcon]="getSortDirectionIcon()"></mat-icon> <tb-icon class="material-icons">{{ getSortDirectionIcon() }}</tb-icon>
</button> </button>
<button mat-icon-button <button mat-icon-button
type="button" type="button"

4
ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
View File

@ -74,7 +74,7 @@
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled()" [fxShow]="actionDescriptor.isEnabled()"
(click)="actionDescriptor.onAction($event)"> (click)="actionDescriptor.onAction($event)">
<tb-icon>{{actionDescriptor.icon}}</tb-icon> <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.name }}</span> <span>{{ actionDescriptor.name }}</span>
</button> </button>
</mat-menu> </mat-menu>
@ -240,7 +240,7 @@
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled(entity)" [fxShow]="actionDescriptor.isEnabled(entity)"
(click)="actionDescriptor.onAction($event, entity)"> (click)="actionDescriptor.onAction($event, entity)">
<tb-icon [ngStyle]="actionDescriptor.style"> <tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
{{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}} {{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
</tb-icon> </tb-icon>
<span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span> <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>

2
ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
View File

@ -81,6 +81,6 @@
matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}" matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="dynamicMode = !dynamicMode"> (click)="dynamicMode = !dynamicMode">
<mat-icon class="tb-mat-20" [svgIcon]="dynamicMode ? 'mdi:numeric' : 'mdi:variable'"></mat-icon> <tb-icon class="tb-mat-20">{{ dynamicMode ? 'mdi:numeric' : 'mdi:variable' }}</tb-icon>
</button> </button>
</div> </div>

2
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
View File

@ -71,6 +71,6 @@
matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}" matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="dynamicMode = !dynamicMode"> (click)="dynamicMode = !dynamicMode">
<mat-icon class="tb-mat-20" [svgIcon]="dynamicMode ? 'mdi:numeric' : 'mdi:variable'"></mat-icon> <tb-icon class="tb-mat-20">{{ dynamicMode ? 'mdi:numeric' : 'mdi:variable' }}</tb-icon>
</button> </button>
</div> </div>

2
ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
View File

@ -148,7 +148,7 @@
<button mat-menu-item *ngIf="actionDescriptor.icon" <button mat-menu-item *ngIf="actionDescriptor.icon"
[disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)" [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
(click)="onActionButtonClick($event, alarm, actionDescriptor)"> (click)="onActionButtonClick($event, alarm, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.displayName }}</span> <span>{{ actionDescriptor.displayName }}</span>
</button> </button>
</ng-container> </ng-container>

2
ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
View File

@ -78,7 +78,7 @@
<button mat-menu-item *ngIf="actionDescriptor.icon" <button mat-menu-item *ngIf="actionDescriptor.icon"
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
(click)="onActionButtonClick($event, entity, actionDescriptor)"> (click)="onActionButtonClick($event, entity, actionDescriptor)">
<tb-icon>{{actionDescriptor.icon}}</tb-icon> <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.displayName }}</span> <span>{{ actionDescriptor.displayName }}</span>
</button> </button>
</ng-container> </ng-container>

4
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
View File

@ -76,7 +76,7 @@
matTooltip="{{ actionDescriptor.displayName }}" matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="onActionButtonClick($event, row, actionDescriptor)"> (click)="onActionButtonClick($event, row, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <tb-icon>{{actionDescriptor.icon}}</tb-icon>
</button> </button>
</ng-container> </ng-container>
</div> </div>
@ -92,7 +92,7 @@
<button mat-menu-item *ngIf="actionDescriptor.icon" <button mat-menu-item *ngIf="actionDescriptor.icon"
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
(click)="onActionButtonClick($event, row, actionDescriptor)"> (click)="onActionButtonClick($event, row, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.displayName }}</span> <span>{{ actionDescriptor.displayName }}</span>
</button> </button>
</ng-container> </ng-container>

20
ui-ngx/src/app/modules/home/pages/security/security.component.html
View File

@ -86,23 +86,33 @@
<h3 class="card-title" translate>security.password-requirement.password-requirements</h3> <h3 class="card-title" translate>security.password-requirement.password-requirements</h3>
<h4 class="mat-h4" translate>security.password-requirement.at-least</h4> <h4 class="mat-h4" translate>security.password-requirement.at-least</h4>
<p class="mat-body" *ngIf="passwordPolicy.minimumUppercaseLetters > 0"> <p class="mat-body" *ngIf="passwordPolicy.minimumUppercaseLetters > 0">
<mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notUpperCase') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon> <tb-icon class="tb-mat-20">
{{ changePassword.get('newPassword').hasError('notUpperCase') ? 'mdi:circle-small' : 'mdi:check' }}
</tb-icon>
{{ 'security.password-requirement.uppercase-letter' | translate : {count: passwordPolicy.minimumUppercaseLetters} }} {{ 'security.password-requirement.uppercase-letter' | translate : {count: passwordPolicy.minimumUppercaseLetters} }}
</p> </p>
<p class="mat-body" *ngIf="passwordPolicy.minimumLowercaseLetters > 0"> <p class="mat-body" *ngIf="passwordPolicy.minimumLowercaseLetters > 0">
<mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notLowerCase') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon> <tb-icon class="tb-mat-20">
{{ changePassword.get('newPassword').hasError('notLowerCase') ? 'mdi:circle-small' : 'mdi:check' }}
</tb-icon>
{{ 'security.password-requirement.lowercase-letter' | translate : {count: passwordPolicy.minimumLowercaseLetters} }} {{ 'security.password-requirement.lowercase-letter' | translate : {count: passwordPolicy.minimumLowercaseLetters} }}
</p> </p>
<p class="mat-body" *ngIf="passwordPolicy.minimumDigits > 0"> <p class="mat-body" *ngIf="passwordPolicy.minimumDigits > 0">
<mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notNumeric') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon> <tb-icon class="tb-mat-20">
{{ changePassword.get('newPassword').hasError('notNumeric') ? 'mdi:circle-small' : 'mdi:check' }}
</tb-icon>
{{ 'security.password-requirement.digit' | translate : {count: passwordPolicy.minimumDigits} }} {{ 'security.password-requirement.digit' | translate : {count: passwordPolicy.minimumDigits} }}
</p> </p>
<p class="mat-body" *ngIf="passwordPolicy.minimumSpecialCharacters > 0"> <p class="mat-body" *ngIf="passwordPolicy.minimumSpecialCharacters > 0">
<mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notSpecial') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon> <tb-icon class="tb-mat-20">
{{ changePassword.get('newPassword').hasError('notSpecial') ? 'mdi:circle-small' : 'mdi:check' }}
</tb-icon>
{{ 'security.password-requirement.special-character' | translate : {count: passwordPolicy.minimumSpecialCharacters} }} {{ 'security.password-requirement.special-character' | translate : {count: passwordPolicy.minimumSpecialCharacters} }}
</p> </p>
<p class="mat-body" *ngIf="passwordPolicy.minimumLength > 0"> <p class="mat-body" *ngIf="passwordPolicy.minimumLength > 0">
<mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('minLength') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon> <tb-icon class="tb-mat-20">
{{ changePassword.get('newPassword').hasError('minLength') ? 'mdi:circle-small' : 'mdi:check' }}
</tb-icon>
{{ 'security.password-requirement.character' | translate : {count: passwordPolicy.minimumLength} }} {{ 'security.password-requirement.character' | translate : {count: passwordPolicy.minimumLength} }}
</p> </p>
</div> </div>

2
ui-ngx/src/app/shared/components/button/copy-button.component.html
View File

@ -24,7 +24,7 @@
[matTooltipPosition]="matTooltipPosition" [matTooltipPosition]="matTooltipPosition"
(click)="copy($event)"> (click)="copy($event)">
<tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate"> <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
{{ icon }} {{ icon || mdiIcon }}
</tb-icon> </tb-icon>
<ng-template #copiedTemplate> <ng-template #copiedTemplate>
<mat-icon [ngStyle]="style" class="copied">done</mat-icon> <mat-icon [ngStyle]="style" class="copied">done</mat-icon>

4
ui-ngx/src/app/shared/components/button/copy-button.component.ts
View File

@ -39,6 +39,10 @@ export class CopyButtonComponent {
@coerceBoolean() @coerceBoolean()
disabled = false; disabled = false;
// @deprecated need to used icon
@Input()
mdiIcon: string;
@Input() @Input()
icon: string; icon: string;