UI: icons refactoring additions

3 years ago · d4ffff1490
10 changed files with 29 additions and 15 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
@ -74,7 +74,7 @@
                            [disabled]="isLoading$ | async"
                            [fxShow]="actionDescriptor.isEnabled()"
                            (click)="actionDescriptor.onAction($event)">
-                      <tb-icon>{{actionDescriptor.icon}}</tb-icon>
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                      <span>{{ actionDescriptor.name }}</span>
                    </button>
                  </mat-menu>
@ -240,7 +240,7 @@
                            [disabled]="isLoading$ | async"
                            [fxShow]="actionDescriptor.isEnabled(entity)"
                            (click)="actionDescriptor.onAction($event, entity)">
-                      <tb-icon [ngStyle]="actionDescriptor.style">
+                      <tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
                        {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
                      </tb-icon>
                      <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
--- 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
@ -78,7 +78,7 @@
                  <button mat-menu-item *ngIf="actionDescriptor.icon"
                          [disabled]="isLoading$ | async"
                          (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <tb-icon>{{actionDescriptor.icon}}</tb-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/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/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@ -24,7 +24,7 @@
        [matTooltipPosition]="matTooltipPosition"
        (click)="copy($event)">
  <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
-    {{ icon }}
+    {{  icon || mdiIcon }}
  </tb-icon>
  <ng-template #copiedTemplate>
    <mat-icon [ngStyle]="style" class="copied">done</mat-icon>
--- 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,10 @@ export class CopyButtonComponent {
  @coerceBoolean()
  disabled = false;

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