Use Angular Material MDC components (#1460)

skycoin · Jan 29, 2023 · 81385e5 · 81385e5
1 parent 8375a75
commit 81385e5
Show file tree

Hide file tree

Showing 106 changed files with 683 additions and 444 deletions.
diff --git a/static/skywire-manager-src/src/app/app.component.ts b/static/skywire-manager-src/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { of, Subscription } from 'rxjs';
 import { delay, flatMap } from 'rxjs/operators';
 

diff --git a/static/skywire-manager-src/src/app/app.module.ts b/static/skywire-manager-src/src/app/app.module.ts
@@ -10,20 +10,20 @@ import { NodeListComponent } from './components/pages/node-list/node-list.compon
 import { NodeComponent } from './components/pages/node/node.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher, RippleGlobalOptions, MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
-import { MAT_LEGACY_DIALOG_DEFAULT_OPTIONS as MAT_DIALOG_DEFAULT_OPTIONS, MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySnackBarModule as MatSnackBarModule, MAT_LEGACY_SNACK_BAR_DEFAULT_OPTIONS as MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/legacy-snack-bar';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TransportListComponent } from './components/pages/node/routing/transport-list/transport-list.component';
 import { NodeAppsListComponent } from './components/pages/node/apps/node-apps-list/node-apps-list.component';
 import { CopyToClipboardTextComponent } from './components/layout/copy-to-clipboard-text/copy-to-clipboard-text.component';

diff --git a/.../components/layout/bulk-reward-address-changer/bulk-reward-address-changer.component.html b/.../components/layout/bulk-reward-address-changer/bulk-reward-address-changer.component.html
@@ -10,13 +10,15 @@
 
     <!-- Address field. -->
     <mat-form-field>
-      <input
-        [ngClass]="{'element-disabled' : processingStarted}"
-        [placeholder]="'rewards-address-config.address' | translate"
-        formControlName="address"
-        maxlength="40"
-        matInput
-      >
+      <div class="field-container">
+        <label class="field-label" for="remoteKey">{{ 'rewards-address-config.address' | translate }}</label>
+        <input
+          [ngClass]="{'element-disabled' : processingStarted}"
+          formControlName="address"
+          maxlength="40"
+          matInput
+        >
+      </div>
     </mat-form-field>
 
     <div class="text-container">

diff --git a/...pp/components/layout/bulk-reward-address-changer/bulk-reward-address-changer.component.ts b/...pp/components/layout/bulk-reward-address-changer/bulk-reward-address-changer.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, OnDestroy, ViewChild } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Subscription, of, Observable } from 'rxjs';
 
 import { AppConfig } from 'src/app/app.config';

diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.html b/static/skywire-manager-src/src/app/components/layout/button/button.component.html
@@ -6,7 +6,9 @@
   [ngClass]="{'for-dark-background': forDarkBackground}"
   #button2
 >
-  <mat-spinner *ngIf="state === buttonStates.Loading" [diameter]="loadingSize"></mat-spinner>
-  <mat-icon *ngIf="state === buttonStates.Error">error_outline</mat-icon>
-  <ng-content></ng-content>
+  <div class="d-flex">
+    <mat-spinner *ngIf="state === buttonStates.Loading" [diameter]="loadingSize"></mat-spinner>
+    <mat-icon *ngIf="state === buttonStates.Error">error_outline</mat-icon>
+    <ng-content></ng-content>
+  </div>
 </button>
diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.scss b/static/skywire-manager-src/src/app/components/layout/button/button.component.scss
@@ -11,11 +11,9 @@ button {
   }
 }
 
-mat-icon, mat-spinner {
+mat-icon {
   display: inline-block;
-  margin-right: 20px;
-  position: relative;
-  top: -2px;
+  margin-right: 15px;
 }
 
 .for-dark-background:disabled {

diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.ts b/static/skywire-manager-src/src/app/components/layout/button/button.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output, ViewChild, OnDestroy } from '@angular/core';
-import { MatLegacyButton as MatButton } from '@angular/material/legacy-button';
+import { MatButton } from '@angular/material/button';
 
 enum ButtonStates {
   Normal, Error, Loading
@@ -22,7 +22,7 @@ export class ButtonComponent implements OnDestroy {
   @Input() disabled = false;
   // Must be one of the colors defined on the default theme.
   @Input() color = '';
-  @Input() loadingSize = 24;
+  @Input() loadingSize = 20;
   // Click event.
   @Output() action = new EventEmitter();
   state = ButtonStates.Normal;

diff --git a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, Output, EventEmitter, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { ButtonComponent } from '../button/button.component';
 

diff --git a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.scss b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.scss
@@ -18,11 +18,11 @@
   text-transform: uppercase;
   font-weight: bold;
   display: flex;
-  justify-content: space-between;
   align-items: center;
 
   span {
     @extend .single-line;
+    flex-grow: 1;
   }
 
   @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
@@ -37,13 +37,14 @@
     margin: 18px 0;
   }
 
-  .mat-icon-button {
+  .mat-mdc-icon-button {
     @extend .cursor-pointer;
     color: darken($white, 30%);
     width: 32px;
     height: 32px;
     line-height: 20px;
     margin-left: 10px;
+    padding: 0;
 
     @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
       & {

diff --git a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostListener, Input } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 /**
  * Base component for all the modal windows. Its main function is to show the title bar.

diff --git a/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html b/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html
@@ -1,7 +1,10 @@
 <app-dialog [headline]="'labeled-element.edit-label' | translate" [dialog]="dialogRef">
   <form [formGroup]="form">
     <mat-form-field>
-      <input #firstInput [placeholder]="'edit-label.label' | translate" formControlName="label" maxlength="66" matInput>
+      <div class="field-container">
+        <label class="field-label" for="remoteKey">{{ 'edit-label.label' | translate }}</label>
+        <input #firstInput formControlName="label" maxlength="66" matInput>
+      </div>
     </mat-form-field>
   </form>
   <app-button class="float-right" color="primary" (action)="save()">{{ 'common.save' | translate }}</app-button>

diff --git a/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts b/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef, MatLegacyDialogConfig as MatDialogConfig, MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogConfig, MatDialog } from '@angular/material/dialog';
 import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 
 import { StorageService, LabelInfo } from '../../../services/storage.service';

diff --git a/...-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html b/...-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html
@@ -3,39 +3,40 @@
     <!-- Form fields. -->
     <ng-container *ngFor="let fieldParams of data.filterPropertiesList">
       <mat-form-field>
-        <!-- Text input. -->
-        <input
-          *ngIf="fieldParams.type === filterFieldTypes.TextInput"
-          [formControlName]="fieldParams.keyNameInFiltersObject"
-          [maxlength]="fieldParams.maxlength"
-          [placeholder]="fieldParams.filterName | translate"
-          matInput
-        >
-        <!-- Select. -->
-        <mat-select
-          *ngIf="fieldParams.type === filterFieldTypes.Select"
-          [formControlName]="fieldParams.keyNameInFiltersObject"
-          [placeholder]="fieldParams.filterName | translate"
-        >
-          <mat-option *ngFor="let option of fieldParams.printableLabelsForValues" [value]="option.value">
-            <!-- Option image. -->
-            <div
-              *ngIf="fieldParams.printableLabelGeneralSettings && option.image"
-              class="image-container"
-              [style]="
-                'background-image: url(\'' + fieldParams.printableLabelGeneralSettings.defaultImage + '\'); ' +
-                'width: ' + fieldParams.printableLabelGeneralSettings.imageWidth + 'px; ' +
-                'height: ' + fieldParams.printableLabelGeneralSettings.imageHeight + 'px;'"
-            >
+        <div class="field-container">
+          <label class="field-label" for="remoteKey">{{ fieldParams.filterName | translate }}</label>
+          <!-- Text input. -->
+          <input
+            *ngIf="fieldParams.type === filterFieldTypes.TextInput"
+            [formControlName]="fieldParams.keyNameInFiltersObject"
+            [maxlength]="fieldParams.maxlength"
+            matInput
+          >
+          <!-- Select. -->
+          <mat-select
+            *ngIf="fieldParams.type === filterFieldTypes.Select"
+            [formControlName]="fieldParams.keyNameInFiltersObject"
+          >
+            <mat-option *ngFor="let option of fieldParams.printableLabelsForValues" [value]="option.value">
+              <!-- Option image. -->
               <div
-                class="image"
-                [style]="'background-image: url(\'' + option.image + '\');'">
+                *ngIf="fieldParams.printableLabelGeneralSettings && option.image"
+                class="image-container"
+                [style]="
+                  'background-image: url(\'' + fieldParams.printableLabelGeneralSettings.defaultImage + '\'); ' +
+                  'width: ' + fieldParams.printableLabelGeneralSettings.imageWidth + 'px; ' +
+                  'height: ' + fieldParams.printableLabelGeneralSettings.imageHeight + 'px;'"
+              >
+                <div
+                  class="image"
+                  [style]="'background-image: url(\'' + option.image + '\');'">
+                </div>
               </div>
-            </div>
-            <!-- Option text. -->
-            {{ option.label | translate }}
-          </mat-option>
-        </mat-select>
+              <!-- Option text. -->
+              {{ option.label | translate }}
+            </mat-option>
+          </mat-select>
+        </div>
       </mat-form-field>
     </ng-container>
   </form>

diff --git a/...re-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts b/...re-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
 import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 
 import { AppConfig } from 'src/app/app.config';

diff --git a/...ager-src/src/app/components/layout/labeled-element-text/labeled-element-text.component.ts b/...ager-src/src/app/components/layout/labeled-element-text/labeled-element-text.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 
 import { SelectOptionComponent, SelectableOption } from '../select-option/select-option.component';

diff --git a/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.scss b/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.scss
@@ -6,7 +6,8 @@
   background-color: $white;
   border-radius: 100%;
   padding: 0;
-  line-height: normal;
+  line-height: 1;
+  padding: 0 !important;
 
   .flag {
     width: 20px;

diff --git a/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.ts b/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 
 import { LanguageService, LanguageData } from '../../../services/language.service';
 import { SelectLanguageComponent } from '../select-language/select-language.component';

diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.ts b/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 
 import { SelectableOption, SelectOptionComponent } from '../select-option/select-option.component';

diff --git a/...kywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.html b/...kywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.html
@@ -5,11 +5,13 @@
   [ngClass]="{'grey-button-background' : !showLoading}"
   [matTooltip]="showAlert ? ('refresh-button.error-tooltip' | translate:{time: refeshRate}) : ''"
 >
-  <mat-spinner *ngIf="showLoading" class="icon d-none d-md-inline-block" [diameter]="14"></mat-spinner>
-  <mat-spinner *ngIf="showLoading" class="icon d-md-none" [diameter]="18"></mat-spinner>
-  <ng-container *ngIf="!showLoading">
-    <mat-icon *ngIf="!showAlert" class="icon" [inline]="true">refresh</mat-icon>
-    <mat-icon *ngIf="showAlert" class="icon alert" [inline]="true">warning</mat-icon>
-  </ng-container>
-  <span class="d-none d-md-inline" *ngIf="elapsedTime">{{ ('refresh-button.' + elapsedTime.translationVarName) | translate:{time: elapsedTime.elapsedTime} }}</span>
+  <div class="internal-container">
+    <mat-spinner *ngIf="showLoading" class="icon d-none d-md-inline-block" [diameter]="14"></mat-spinner>
+    <mat-spinner *ngIf="showLoading" class="icon d-md-none" [diameter]="18"></mat-spinner>
+    <ng-container *ngIf="!showLoading">
+      <mat-icon *ngIf="!showAlert" class="icon" [inline]="true">refresh</mat-icon>
+      <mat-icon *ngIf="showAlert" class="icon alert" [inline]="true">warning</mat-icon>
+    </ng-container>
+    <span class="d-none d-md-inline" *ngIf="elapsedTime">{{ ('refresh-button.' + elapsedTime.translationVarName) | translate:{time: elapsedTime.elapsedTime} }}</span>
+  </div>
 </button>
diff --git a/...kywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.scss b/...kywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.scss
@@ -16,6 +16,11 @@
     }
   }
 
+  .internal-container {
+    display: flex;
+    align-items: center;
+  }
+
   .icon {
     font-size: 16px;
     margin-right: 5px;

diff --git a/...wire-manager-src/src/app/components/layout/select-language/select-language.component.scss b/...wire-manager-src/src/app/components/layout/select-language/select-language.component.scss
@@ -12,12 +12,17 @@ $label-background: rgba(255, 255, 255, 0.25);
 
   button {
     width: 118px;
+    height: auto !important;
     margin: 20px;
     font-size: $font-size-mini;
     line-height: unset;
-    padding: 0;
+    padding: 0 !important;
     color: unset;
 
+    ::ng-deep .mdc-button__label {
+      width: 100%;
+    }
+
     @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
       & {
         width: 90px;
@@ -41,6 +46,7 @@ $label-background: rgba(255, 255, 255, 0.25);
     }
 
     .label {
+      color: $black !important;
       background-color: $label-background;
       padding: 4px 10px;
       @extend .single-line;

diff --git a/...kywire-manager-src/src/app/components/layout/select-language/select-language.component.ts b/...kywire-manager-src/src/app/components/layout/select-language/select-language.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
 import { LanguageData, LanguageService } from '../../../services/language.service';

diff --git a/.../skywire-manager-src/src/app/components/layout/select-option/select-option.component.scss b/.../skywire-manager-src/src/app/components/layout/select-option/select-option.component.scss
@@ -3,3 +3,8 @@
   width: 14px;
   line-height: 1;
 }
+
+.grey-button-background {
+  justify-content: left !important;
+  min-height: 45px;
+}
diff --git a/...ic/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts b/...ic/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MatDialog, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { AppConfig } from 'src/app/app.config';
 
 /**

diff --git a/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.ts b/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_LEGACY_SNACK_BAR_DATA as MAT_SNACK_BAR_DATA, MatLegacySnackBarRef as MatSnackBarRef } from '@angular/material/legacy-snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
 
 /**
  * Icons SnackbarComponent can show.