Merge pull request #9747 from Dmitriymush/enhacements/mdi-icons-refactoring

Fixed mdi and other icons appearing
3 years ago · 36afd39814
16 changed files with 51 additions and 40 deletions
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@ -36,7 +36,7 @@
                (click)="changeSortDirection()"
                [matTooltip]="getSortDirectionTooltipText()"
                matTooltipPosition="above">
-          <mat-icon class="material-icons" [svgIcon]="getSortDirectionIcon()"></mat-icon>
+          <tb-icon class="material-icons">{{ getSortDirectionIcon() }}</tb-icon>
        </button>
        <button mat-icon-button
                type="button"
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@ -60,7 +60,7 @@
                        (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
                        matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
                        matTooltipPosition="above">
-                  <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
+                  <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
                </button>
                <ng-template #addActionsMenu>
                  <button mat-icon-button [disabled]="isLoading$ | async"
@ -74,7 +74,7 @@
                            [disabled]="isLoading$ | async"
                            [fxShow]="actionDescriptor.isEnabled()"
                            (click)="actionDescriptor.onAction($event)">
-                      <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                      <span>{{ actionDescriptor.name }}</span>
                    </button>
                  </mat-menu>
@ -132,7 +132,7 @@
                    matTooltip="{{ actionDescriptor.name }}"
                    matTooltipPosition="above"
                    (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
-              <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+              <tb-icon>{{actionDescriptor.icon}}</tb-icon>
            </button>
          </div>
        </mat-toolbar>
@ -181,7 +181,7 @@
                        tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                        tooltipPosition="above"
                        [icon]="column.actionCell.icon"
-                        [mdiIcon]="column.actionCell.mdiIcon" [style]="column.actionCell.style">
+                        [style]="column.actionCell.style">
                      </tb-copy-button>
                    </ng-template>
                    <ng-template ngSwitchDefault>
@ -190,9 +190,9 @@
                              matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                              matTooltipPosition="above"
                              (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}}
-                        </mat-icon>
+                        </tb-icon>
                      </button>
                    </ng-template>
                  </ng-container>
@ -208,8 +208,9 @@
                        matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                        matTooltipPosition="above"
                        (click)="column.actionDescriptor.onAction($event, entity)">
-                  <mat-icon [svgIcon]="column.actionDescriptor.mdiIcon" [ngStyle]="column.actionDescriptor.style">
-                    {{column.actionDescriptor.icon}}</mat-icon>
+                  <tb-icon [ngStyle]="column.actionDescriptor.style">
+                    {{column.actionDescriptor.icon}}
+                  </tb-icon>
                </button>
              </mat-cell>
            </ng-container>
@ -228,9 +229,9 @@
                          matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
                          matTooltipPosition="above"
                          (click)="actionDescriptor.onAction($event, entity)">
-                    <mat-icon svgIcon="{{ actionDescriptor.mdiIconFunction ? actionDescriptor.mdiIconFunction(entity) : actionDescriptor.mdiIcon }}"
-                              [ngStyle]="actionDescriptor.style">
-                      {{actionDescriptor.icon}}</mat-icon>
+                    <tb-icon [ngStyle]="actionDescriptor.style">
+                      {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                    </tb-icon>
                  </button>
                </div>
                <div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
@ -244,9 +245,9 @@
                            [disabled]="isLoading$ | async"
                            [fxShow]="actionDescriptor.isEnabled(entity)"
                            (click)="actionDescriptor.onAction($event, entity)">
-                      <mat-icon svgIcon="{{ actionDescriptor.mdiIconFunction ? actionDescriptor.mdiIconFunction(entity) : actionDescriptor.mdiIcon }}"
-                                [ngStyle]="actionDescriptor.style">
-                        {{actionDescriptor.icon}}</mat-icon>
+                      <tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
+                        {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                      </tb-icon>
                      <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
                    </button>
                  </mat-menu>
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@ -81,6 +81,6 @@
          matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
          matTooltipPosition="above"
          (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>
 </div>
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
@ -71,6 +71,6 @@
          matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
          matTooltipPosition="above"
          (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>
 </div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
@ -148,7 +148,7 @@
                  <button mat-menu-item *ngIf="actionDescriptor.icon"
                          [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
                          (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                    <span>{{ actionDescriptor.displayName }}</span>
                  </button>
                </ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
@ -63,7 +63,7 @@
                        matTooltip="{{ actionDescriptor.displayName }}"
                        matTooltipPosition="above"
                        (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                  <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                  <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                </button>
              </ng-container>
            </div>
@ -78,7 +78,7 @@
                  <button mat-menu-item *ngIf="actionDescriptor.icon"
                          [disabled]="isLoading$ | async"
                          (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                    <span>{{ actionDescriptor.displayName }}</span>
                  </button>
                </ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@ -76,7 +76,7 @@
                              matTooltip="{{ actionDescriptor.displayName }}"
                              matTooltipPosition="above"
                              (click)="onActionButtonClick($event, row, actionDescriptor)">
-                        <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                        <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                      </button>
                    </ng-container>
                  </div>
@ -92,7 +92,7 @@
                        <button mat-menu-item *ngIf="actionDescriptor.icon"
                                [disabled]="isLoading$ | async"
                                (click)="onActionButtonClick($event, row, actionDescriptor)">
-                          <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                          <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                          <span>{{ actionDescriptor.displayName }}</span>
                        </button>
                      </ng-container>
--- a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
+++ b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
@ -57,8 +57,7 @@ export interface CellActionDescriptor<T extends BaseData<HasId>> {
  name: string;
  nameFunction?: (entity: T) => string;
  icon?: string;
-  mdiIcon?: string;
-  mdiIconFunction?: (entity: T) => string;
+  iconFunction?: (entity: T) => string;
  style?: any;
  isEnabled: (entity: T) => boolean;
  onAction: ($event: MouseEvent, entity: T) => any;
--- 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
@ -304,7 +304,7 @@
                        [copyText]="mailSettings.get('redirectUri').value"
                        tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
                        tooltipPosition="above"
-                        mdiIcon="mdi:clipboard-arrow-left">
+                        icon="mdi:clipboard-arrow-left">
                      </tb-copy-button>
                    </mat-form-field>
                  </div>
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@ -100,7 +100,7 @@
                                          [copyText]="redirectURI(domainInfo)"
                                          tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
                                          tooltipPosition="above"
-                                          mdiIcon="mdi:clipboard-arrow-left">
+                                          icon="mdi:clipboard-arrow-left">
                                        </tb-copy-button>
                                      </mat-form-field>
                                      <mat-form-field fxFlex *ngIf="domainInfo.get('scheme').value === 'MIXED'" class="mat-block">
@ -112,7 +112,7 @@
                                          [copyText]="redirectURIMixed(domainInfo)"
                                          tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
                                          tooltipPosition="above"
-                                          mdiIcon="mdi:clipboard-arrow-left">
+                                          icon="mdi:clipboard-arrow-left">
                                        </tb-copy-button>
                                      </mat-form-field>
                                    </div>
@ -171,7 +171,7 @@
                                          [copyText]="mobileInfo.get('appSecret').value"
                                          tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"
                                          tooltipPosition="above"
-                                          mdiIcon="mdi:clipboard-arrow-left">
+                                          icon="mdi:clipboard-arrow-left">
                                        </tb-copy-button>
                                        <mat-error *ngIf="mobileInfo.get('appSecret').invalid">
                                          {{ 'admin.oauth2.invalid-mobile-app-secret' | translate }}
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
@ -95,9 +95,9 @@ export class RuleTableConfigResolver implements Resolve<EntityTableConfig<Notifi
      name: '',
      nameFunction: (entity) =>
        this.translate.instant(entity.enabled ? 'notification.rule-disable' : 'notification.rule-enable'),
-      mdiIcon: 'mdi:toggle-switch',
+      icon: 'mdi:toggle-switch',
      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)
    },
    {
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
@ -107,7 +107,7 @@ export class SentTableConfigResolver implements Resolve<EntityTableConfig<Notifi
  private configureCellActions(): Array<CellActionDescriptor<NotificationRequestInfo>> {
    return [{
      name: this.translate.instant('notification.notify-again'),
-      mdiIcon: 'mdi:repeat-variant',
+      icon: 'mdi:repeat-variant',
      isEnabled: (request) => request.status !== NotificationRequestStatus.SCHEDULED,
      onAction: ($event, entity) => this.createRequest($event, entity)
    }];
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@ -86,23 +86,33 @@
            <h3 class="card-title" translate>security.password-requirement.password-requirements</h3>
            <h4 class="mat-h4" translate>security.password-requirement.at-least</h4>
            <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} }}
            </p>
            <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} }}
            </p>
            <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} }}
            </p>
            <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} }}
            </p>
            <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} }}
            </p>
          </div>
--- a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
@ -146,7 +146,7 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
          name: this.authority === Authority.TENANT_ADMIN ?
            this.translate.instant('user.login-as-tenant-admin') :
            this.translate.instant('user.login-as-customer-user'),
-          mdiIcon: 'mdi:login',
+          icon: 'mdi:login',
          isEnabled: () => true,
          onAction: ($event, entity) => this.loginAsUser($event, entity)
        }
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@ -23,9 +23,9 @@
        [matTooltip]="matTooltipText"
        [matTooltipPosition]="matTooltipPosition"
        (click)="copy($event)">
-  <mat-icon [svgIcon]="mdiIcon" [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
-    {{ icon }}
-  </mat-icon>
+  <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
+    {{  icon || mdiIcon }}
+  </tb-icon>
  <ng-template #copiedTemplate>
    <mat-icon [ngStyle]="style" class="copied">done</mat-icon>
  </ng-template>
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.ts
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
@ -39,6 +39,7 @@ export class CopyButtonComponent {
  @coerceBoolean()
  disabled = false;

+  // @deprecated need to use icon input
  @Input()
  mdiIcon: string;