tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: icons refactoring

pull/9747/head
Dmitriymush 3 years ago
parent
85f5b3e32b
commit
ae775e0a17
10 changed files with 28 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
  2. 4
      ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
  3. 3
      ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
  4. 2
      ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
  5. 6
      ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
  6. 4
      ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
  7. 2
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
  8. 2
      ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
  9. 4
      ui-ngx/src/app/shared/components/button/copy-button.component.html
  10. 3
      ui-ngx/src/app/shared/components/button/copy-button.component.ts

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

@ -60,7 +60,7 @@
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)" (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}" matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon> <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
</button> </button>
<ng-template #addActionsMenu> <ng-template #addActionsMenu>
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
@ -74,7 +74,7 @@
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled()" [fxShow]="actionDescriptor.isEnabled()"
(click)="actionDescriptor.onAction($event)"> (click)="actionDescriptor.onAction($event)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <tb-icon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.name }}</span> <span>{{ actionDescriptor.name }}</span>
</button> </button>
</mat-menu> </mat-menu>
@ -132,7 +132,7 @@
matTooltip="{{ actionDescriptor.name }}" matTooltip="{{ actionDescriptor.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="actionDescriptor.onAction($event, dataSource.selection.selected)"> (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <tb-icon>{{actionDescriptor.icon}}</tb-icon>
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
@ -176,7 +176,7 @@
tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}" tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
tooltipPosition="above" tooltipPosition="above"
[icon]="column.actionCell.icon" [icon]="column.actionCell.icon"
[mdiIcon]="column.actionCell.mdiIcon" [style]="column.actionCell.style"> [style]="column.actionCell.style">
</tb-copy-button> </tb-copy-button>
</ng-template> </ng-template>
<ng-template ngSwitchDefault> <ng-template ngSwitchDefault>
@ -185,9 +185,9 @@
matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}" matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="column.actionCell.onAction($event, entity)"> (click)="column.actionCell.onAction($event, entity)">
<mat-icon [svgIcon]="column.actionCell.mdiIcon" [ngStyle]="column.actionCell.style"> <tb-icon [ngStyle]="column.actionCell.style">
{{column.actionCell.icon}} {{column.actionCell.icon}}
</mat-icon> </tb-icon>
</button> </button>
</ng-template> </ng-template>
</ng-container> </ng-container>
@ -203,8 +203,9 @@
matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}" matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="column.actionDescriptor.onAction($event, entity)"> (click)="column.actionDescriptor.onAction($event, entity)">
<mat-icon [svgIcon]="column.actionDescriptor.mdiIcon" [ngStyle]="column.actionDescriptor.style"> <tb-icon [ngStyle]="column.actionDescriptor.style">
{{column.actionDescriptor.icon}}</mat-icon> {{column.actionDescriptor.icon}}
</tb-icon>
</button> </button>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
@ -223,9 +224,9 @@
matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}" matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="actionDescriptor.onAction($event, entity)"> (click)="actionDescriptor.onAction($event, entity)">
<mat-icon svgIcon="{{ actionDescriptor.mdiIconFunction ? actionDescriptor.mdiIconFunction(entity) : actionDescriptor.mdiIcon }}" <tb-icon [ngStyle]="actionDescriptor.style">
[ngStyle]="actionDescriptor.style"> {{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
{{actionDescriptor.icon}}</mat-icon> </tb-icon>
</button> </button>
</div> </div>
<div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length"> <div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
@ -239,9 +240,9 @@
[disabled]="isLoading$ | async" [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled(entity)" [fxShow]="actionDescriptor.isEnabled(entity)"
(click)="actionDescriptor.onAction($event, entity)"> (click)="actionDescriptor.onAction($event, entity)">
<mat-icon svgIcon="{{ actionDescriptor.mdiIconFunction ? actionDescriptor.mdiIconFunction(entity) : actionDescriptor.mdiIcon }}" <tb-icon [ngStyle]="actionDescriptor.style">
[ngStyle]="actionDescriptor.style"> {{actionDescriptor.iconFunction ? actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
{{actionDescriptor.icon}}</mat-icon> </tb-icon>
<span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span> <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
</button> </button>
</mat-menu> </mat-menu>

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

@ -63,7 +63,7 @@
matTooltip="{{ actionDescriptor.displayName }}" matTooltip="{{ actionDescriptor.displayName }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="onActionButtonClick($event, entity, actionDescriptor)"> (click)="onActionButtonClick($event, entity, actionDescriptor)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <tb-icon>{{actionDescriptor.icon}}</tb-icon>
</button> </button>
</ng-container> </ng-container>
</div> </div>
@ -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)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon> <tb-icon>{{actionDescriptor.icon}}</tb-icon>
<span>{{ actionDescriptor.displayName }}</span> <span>{{ actionDescriptor.displayName }}</span>
</button> </button>
</ng-container> </ng-container>

3
ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
View File

@ -57,8 +57,7 @@ export interface CellActionDescriptor<T extends BaseData<HasId>> {
name: string; name: string;
nameFunction?: (entity: T) => string; nameFunction?: (entity: T) => string;
icon?: string; icon?: string;
mdiIcon?: string; iconFunction?: (entity: T) => string;
mdiIconFunction?: (entity: T) => string;
style?: any; style?: any;
isEnabled: (entity: T) => boolean; isEnabled: (entity: T) => boolean;
onAction: ($event: MouseEvent, entity: T) => any; onAction: ($event: MouseEvent, entity: T) => any;

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

@ -304,7 +304,7 @@
[copyText]="mailSettings.get('redirectUri').value" [copyText]="mailSettings.get('redirectUri').value"
tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}" tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
tooltipPosition="above" tooltipPosition="above"
mdiIcon="mdi:clipboard-arrow-left"> icon="mdi:clipboard-arrow-left">
</tb-copy-button> </tb-copy-button>
</mat-form-field> </mat-form-field>
</div> </div>

6
ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
View File

@ -100,7 +100,7 @@
[copyText]="redirectURI(domainInfo)" [copyText]="redirectURI(domainInfo)"
tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}" tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
tooltipPosition="above" tooltipPosition="above"
mdiIcon="mdi:clipboard-arrow-left"> icon="mdi:clipboard-arrow-left">
</tb-copy-button> </tb-copy-button>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex *ngIf="domainInfo.get('scheme').value === 'MIXED'" class="mat-block"> <mat-form-field fxFlex *ngIf="domainInfo.get('scheme').value === 'MIXED'" class="mat-block">
@ -112,7 +112,7 @@
[copyText]="redirectURIMixed(domainInfo)" [copyText]="redirectURIMixed(domainInfo)"
tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}" tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
tooltipPosition="above" tooltipPosition="above"
mdiIcon="mdi:clipboard-arrow-left"> icon="mdi:clipboard-arrow-left">
</tb-copy-button> </tb-copy-button>
</mat-form-field> </mat-form-field>
</div> </div>
@ -171,7 +171,7 @@
[copyText]="mobileInfo.get('appSecret').value" [copyText]="mobileInfo.get('appSecret').value"
tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}" tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"
tooltipPosition="above" tooltipPosition="above"
mdiIcon="mdi:clipboard-arrow-left"> icon="mdi:clipboard-arrow-left">
</tb-copy-button> </tb-copy-button>
<mat-error *ngIf="mobileInfo.get('appSecret').invalid"> <mat-error *ngIf="mobileInfo.get('appSecret').invalid">
{{ 'admin.oauth2.invalid-mobile-app-secret' | translate }} {{ 'admin.oauth2.invalid-mobile-app-secret' | translate }}

4
ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
View File

@ -95,9 +95,9 @@ export class RuleTableConfigResolver implements Resolve<EntityTableConfig<Notifi
name: '', name: '',
nameFunction: (entity) => nameFunction: (entity) =>
this.translate.instant(entity.enabled ? 'notification.rule-disable' : 'notification.rule-enable'), this.translate.instant(entity.enabled ? 'notification.rule-disable' : 'notification.rule-enable'),
mdiIcon: 'mdi:toggle-switch', icon: 'mdi:toggle-switch',
isEnabled: () => true, isEnabled: () => true,
mdiIconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline', iconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline',
onAction: ($event, entity) => this.toggleEnableMode($event, entity) onAction: ($event, entity) => this.toggleEnableMode($event, entity)
}, },
{ {

2
ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
View File

@ -107,7 +107,7 @@ export class SentTableConfigResolver implements Resolve<EntityTableConfig<Notifi
private configureCellActions(): Array<CellActionDescriptor<NotificationRequestInfo>> { private configureCellActions(): Array<CellActionDescriptor<NotificationRequestInfo>> {
return [{ return [{
name: this.translate.instant('notification.notify-again'), name: this.translate.instant('notification.notify-again'),
mdiIcon: 'mdi:repeat-variant', icon: 'mdi:repeat-variant',
isEnabled: (request) => request.status !== NotificationRequestStatus.SCHEDULED, isEnabled: (request) => request.status !== NotificationRequestStatus.SCHEDULED,
onAction: ($event, entity) => this.createRequest($event, entity) onAction: ($event, entity) => this.createRequest($event, entity)
}]; }];

2
ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
View File

@ -146,7 +146,7 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
name: this.authority === Authority.TENANT_ADMIN ? name: this.authority === Authority.TENANT_ADMIN ?
this.translate.instant('user.login-as-tenant-admin') : this.translate.instant('user.login-as-tenant-admin') :
this.translate.instant('user.login-as-customer-user'), this.translate.instant('user.login-as-customer-user'),
mdiIcon: 'mdi:login', icon: 'mdi:login',
isEnabled: () => true, isEnabled: () => true,
onAction: ($event, entity) => this.loginAsUser($event, entity) onAction: ($event, entity) => this.loginAsUser($event, entity)
} }

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

@ -23,9 +23,9 @@
[matTooltip]="matTooltipText" [matTooltip]="matTooltipText"
[matTooltipPosition]="matTooltipPosition" [matTooltipPosition]="matTooltipPosition"
(click)="copy($event)"> (click)="copy($event)">
<mat-icon [svgIcon]="mdiIcon" [ngStyle]="style" *ngIf="!copied; else copiedTemplate"> <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
{{ icon }} {{ icon }}
</mat-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>
</ng-template> </ng-template>

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

@ -39,9 +39,6 @@ export class CopyButtonComponent {
@coerceBoolean() @coerceBoolean()
disabled = false; disabled = false;
@Input()
mdiIcon: string;
@Input() @Input()
icon: string; icon: string;

Write Preview
Loading…
Cancel
Save