Merge pull request #1318 from Senyoret1/improve-ui

Several improvements for the UI

static/skywire-manager-src/src/app/components/layout/button/button.component.ts

@@ -91,4 +91,11 @@ export class ButtonComponent implements OnDestroy {
       this.disabled = false;
     }
   }
+
+  /**
+   * Returns true if the button is showing the loading animation.
+   */
+  get isLoading(): boolean {
+    return this.state === ButtonStates.Loading;
+  }
 }

static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="(state !== confirmationStates.Done ? data.headerText : doneTitle) | translate" [disableDismiss]="disableDismiss">
+<app-dialog [headline]="(state !== confirmationStates.Done ? data.headerText : doneTitle) | translate" [dialog]="dialogRef" [disableDismiss]="disableDismiss">
   <div class="text-container">
     {{ (state !== confirmationStates.Done ? data.text : doneText) | translate }}
   </div>

static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts

@@ -79,7 +79,7 @@ export class ConfirmationComponent implements AfterViewInit, OnDestroy {
   @Output() operationAccepted = new EventEmitter();
 
   constructor(
-    private dialogRef: MatDialogRef<ConfirmationComponent>,
+    public dialogRef: MatDialogRef<ConfirmationComponent>,
     @Inject(MAT_DIALOG_DATA) public data: ConfirmationData,
   ) {
     this.disableDismiss = !!data.disableDismiss;

static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostListener, Input } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 /**
  * Base component for all the modal windows. Its main function is to show the title bar.
@@ -11,7 +12,7 @@ import { Component, Input } from '@angular/core';
 export class DialogComponent {
   @Input() headline: string;
   /**
-   * Hides the close button.
+   * Disables all the ways provided by default by the UI for closing the modal window.
    */
   @Input() disableDismiss: boolean;
   /**
@@ -23,4 +24,30 @@ export class DialogComponent {
    * If true, vertical margins will be added to the content.
    */
   @Input() includeVerticalMargins = true;
+
+  // MatDialogRef of the modal window component which is using this component for wrapping
+  // the contents.
+  private dialogInternal: MatDialogRef<any>;
+  @Input() set dialog(val: MatDialogRef<any>) {
+    val.disableClose = true;
+    this.dialogInternal = val;
+  }
+
+  constructor(
+    private matDialog: MatDialog,
+  ) { }
+
+  @HostListener('window:keyup.esc')
+  onKeyUp() {
+    this.closePopup();
+  }
+
+  closePopup() {
+    if (!this.disableDismiss) {
+      // Continue only if the current modal window is the topmost one.
+      if (this.matDialog.openDialogs[this.matDialog.openDialogs.length - 1].id === this.dialogInternal.id) {
+        this.dialogInternal.close();
+      }
+    }
+  }
 }

static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'labeled-element.edit-label' | translate">
+<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>

static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts

@@ -33,7 +33,7 @@ export class EditLabelComponent implements OnInit, AfterViewInit {
   }
 
   constructor(
-    private dialogRef: MatDialogRef<EditLabelComponent>,
+    public dialogRef: MatDialogRef<EditLabelComponent>,
     @Inject(MAT_DIALOG_DATA) private data: LabelInfo,
     private formBuilder: FormBuilder,
     private storageService: StorageService,

static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'filters.filter-action' | translate">
+<app-dialog [headline]="'filters.filter-action' | translate" [dialog]="dialogRef">
   <form [formGroup]="form">
     <!-- Form fields. -->
     <ng-container *ngFor="let fieldParams of data.filterPropertiesList">

static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts

@@ -51,7 +51,7 @@ export class FiltersSelectionComponent implements OnInit {
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: FiltersSelectiondParams,
-    private dialogRef: MatDialogRef<FiltersSelectionComponent>,
+    public dialogRef: MatDialogRef<FiltersSelectionComponent>,
     private formBuilder: FormBuilder,
   ) { }
 

static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'language.title' | translate">
+<app-dialog [headline]="'language.title' | translate" [dialog]="dialogRef">
   <div class="options-container">
     <button
       mat-button

static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.ts

@@ -30,7 +30,7 @@ export class SelectLanguageComponent implements OnInit, OnDestroy {
   }
 
   constructor(
-    private dialogRef: MatDialogRef<SelectLanguageComponent>,
+    public dialogRef: MatDialogRef<SelectLanguageComponent>,
     private languageService: LanguageService,
   ) { }
 

static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="data.title | translate" [includeVerticalMargins]="false">
+<app-dialog [headline]="data.title | translate" [dialog]="dialogRef" [includeVerticalMargins]="false">
   <div class="options-list-button-container" *ngFor="let option of data.options; let i = index">
     <button
       mat-button

static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts

@@ -50,7 +50,7 @@ export class SelectOptionComponent {
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: ComponentData,
-    private dialogRef: MatDialogRef<SelectOptionComponent>,
+    public dialogRef: MatDialogRef<SelectOptionComponent>,
   ) { }
 
   closePopup(selectedOption: number) {

static/skywire-manager-src/src/app/components/layout/top-bar/top-bar.component.scss

@@ -281,7 +281,7 @@ $top-bar-height: 56px;
   font-size: $font-size-mini-plus;
 
   .connection-error-msg-vpn {
-    margin: -5px 0px 5px 10px;
+    margin: -5px 5px 5px 10px;
     color: $yellow-clear;
   }
 

static/skywire-manager-src/src/app/components/layout/update-all/update-all.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'update-all.title' | translate">
+<app-dialog [headline]="'update-all.title' | translate" [dialog]="dialogRef">
   <ng-container *ngIf="updatableNodes && updatableNodes.length > 0">
     <div class="text-container">
       {{ 'update-all.updatable-list-text' | translate }}

static/skywire-manager-src/src/app/components/layout/update-all/update-all.component.ts

@@ -3,7 +3,6 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angu
 
 import { AppConfig } from 'src/app/app.config';
 
-
 /**
  * Data about a node.
  */
@@ -41,6 +40,7 @@ export class UpdateAllComponent {
   }
 
   constructor(
+    public dialogRef: MatDialogRef<UpdateAllComponent>,
     @Inject(MAT_DIALOG_DATA) data: NodeData[][],
   ) {
     this.updatableNodes = data[0];

static/skywire-manager-src/src/app/components/layout/update/update.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="(state !== updatingStates.Error ? 'update.title' : 'update.error-title') | translate">
+<app-dialog [headline]="(state !== updatingStates.Error ? 'update.title' : 'update.error-title') | translate" [dialog]="dialogRef">
   <!-- Main black text area. -->
   <div class="text-container">
     <ng-container *ngIf="state === updatingStates.InitialProcessing">

static/skywire-manager-src/src/app/components/layout/update/update.component.ts

@@ -188,7 +188,7 @@ export class UpdateComponent implements AfterViewInit, OnDestroy {
   }
 
   constructor(
-    private dialogRef: MatDialogRef<UpdateComponent>,
+    public dialogRef: MatDialogRef<UpdateComponent>,
     @Inject(MAT_DIALOG_DATA) public data: NodeData[],
     private nodeService: NodeService,
     private translateService: TranslateService,

static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.html

@@ -1,3 +1,3 @@
-<app-dialog [headline]="'settings.password.initial-config.title' | translate">
+<app-dialog [headline]="'settings.password.initial-config.title' | translate" [dialog]="dialogRef">
   <app-password [forInitialConfig]="true"></app-password>
 </app-dialog>

static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.ts

@@ -23,4 +23,8 @@ export class InitialSetupComponent {
 
     return dialog.open(InitialSetupComponent, config);
   }
+
+  constructor(
+    public dialogRef: MatDialogRef<InitialSetupComponent>,
+  ) { }
 }

static/skywire-manager-src/src/app/components/pages/login/login.component.html

@@ -5,7 +5,7 @@
   >
     <img src="/assets/img/logo-v.png" class="logo" />
     <form class="mt-5" [formGroup]="form">
-      <div class="login-input">
+      <div class="login-input" [ngClass]="{'element-disabled' : loading}">
         <input
           type="password"
           formControlName="password"

static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html

@@ -111,7 +111,12 @@
         </tr>
 
         <!-- Values. -->
-        <tr *ngFor="let node of dataSource" (click)="open(node)" class="selectable">
+        <a
+          *ngFor="let node of dataSource"
+          [ngClass]="{'click-effect': node.online, 'non-selectable': !node.online}"
+          class="selectable link-row"
+          [routerLink]="node.online ? ['/nodes', node.localPk] : null"
+        >
           <td>
             <mat-icon *ngIf="node.isHypervisor" class="hypervisor-icon" [inline]="true" [matTooltip]="'nodes.hypervisor-info' | translate">star</mat-icon>
           </td>
@@ -139,17 +144,17 @@
               {{ 'common.time-in-ms' | translate:{ time: node.roundTripPing } }}
             </ng-container>
           </td>
-          <td (click)="$event.stopPropagation()" class="actions">
+          <td class="actions">
             <button
-              (click)="copyToClipboard(node)"
+              (click)="$event.stopPropagation(); $event.preventDefault(); copyToClipboard(node);"
               mat-icon-button
               [matTooltip]="(showDmsgInfo ? 'nodes.copy-data' : 'nodes.copy-key') | translate"
               class="big-action-button transparent-button"
             >
               <mat-icon [inline]="true">filter_none</mat-icon>
             </button>
             <button
-              (click)="showEditLabelDialog(node)"
+              (click)="$event.stopPropagation(); $event.preventDefault(); showEditLabelDialog(node);"
               mat-icon-button
               [matTooltip]="'labeled-element.edit-label' | translate"
               class="big-action-button transparent-button"
@@ -158,7 +163,6 @@
             </button>
             <button
               *ngIf="node.online"
-              (click)="open(node)"
               mat-icon-button
               [matTooltip]="'nodes.view-node' | translate"
               class="big-action-button transparent-button"
@@ -167,15 +171,15 @@
             </button>
             <button
               *ngIf="!node.online"
-              (click)="deleteNode(node)"
+              (click)="$event.stopPropagation(); $event.preventDefault(); deleteNode(node);"
               mat-icon-button
               [matTooltip]="'nodes.delete-node' | translate"
               class="big-action-button transparent-button"
             >
               <mat-icon>close</mat-icon>
             </button>
           </td>
-        </tr>
+        </a>
       </table>
 
       <!-- List for small screens. -->
@@ -185,7 +189,7 @@
         cellspacing="0" cellpadding="0"
       >
         <!-- Sorting button. -->
-        <tr class="selectable" (click)="dataSorter.openSortingOrderModal()"><td>
+        <tr class="selectable click-effect" (click)="dataSorter.openSortingOrderModal()"><td>
           <div class="list-item-container">
             <div class="left-part">
               <div class="title">{{ 'tables.sorting-title' | translate }}</div>
@@ -200,7 +204,7 @@
           </div>
         </td></tr>
         <!-- Values. -->
-        <tr *ngFor="let node of dataSource" (click)="open(node)" class="selectable"><td>
+        <a *ngFor="let node of dataSource" class="link-row" [ngClass]="{'selectable click-effect': node.online}" [routerLink]="node.online ? ['/nodes', node.localPk] : null"><tr class="d-block"><td class="d-block">
           <div class="list-item-container">
             <div class="left-part">
               <div class="list-row" *ngIf="node.isHypervisor">
@@ -235,7 +239,7 @@
             <div class="margin-part"></div>
             <div class="right-part">
               <button
-                (click)="$event.stopPropagation(); showOptionsDialog(node)"
+                (click)="$event.stopPropagation(); $event.preventDefault(); showOptionsDialog(node);"
                 mat-icon-button
                 [matTooltip]="'common.options' | translate"
                 class="transparent-button"
@@ -244,7 +248,7 @@
               </button>
             </div>
           </div>
-        </td></tr>
+        </td></tr></a>
       </table>
     </div></div>
 

static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss

@@ -26,3 +26,7 @@
 .small-column {
   width: 1px;
 }
+
+.non-selectable {
+  cursor: not-allowed;
+}

static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts

@@ -677,13 +677,4 @@ export class NodeListComponent implements OnInit, OnDestroy {
       }
     });
   }
-
-  /**
-   * Opens the page with the details of the node.
-   */
-  open(node: Node) {
-    if (node.online) {
-      this.router.navigate(['nodes', node.localPk]);
-    }
-  }
 }

static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html

@@ -2,6 +2,7 @@
   [headline]="('actions.terminal.title' | translate) + ' - ' + this.data.label + ' (' + this.data.pk + ')'"
   [includeScrollableArea]="false"
   [includeVerticalMargins]="false"
+  [dialog]="dialogRef"
 >
   <mat-dialog-content #dialogContent (click)="focusTerminal()">
     <div class="wrapper">

static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.ts

@@ -64,6 +64,7 @@ export class BasicTerminalComponent implements AfterViewInit, OnDestroy {
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: BasicTerminalData,
+    public dialogRef: MatDialogRef<BasicTerminalComponent>,
     private renderer: Renderer2,
     private apiService: ApiService,
     private translate: TranslateService,

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'apps.log.filter.title' | translate">
+<app-dialog [headline]="'apps.log.filter.title' | translate" [dialog]="dialogRef">
   <form [formGroup]="form">
     <mat-form-field>
       <mat-select

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.ts

@@ -49,7 +49,7 @@ export class LogFilterComponent implements OnInit, OnDestroy {
 
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: LogsFilter,
-    private dialogRef: MatDialogRef<LogFilterComponent>,
+    public dialogRef: MatDialogRef<LogFilterComponent>,
     private formBuilder: FormBuilder,
   ) { }
 

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'apps.log.title' | translate" [includeVerticalMargins]="false" [includeScrollableArea]="false">
+<app-dialog [headline]="'apps.log.title' | translate" [includeVerticalMargins]="false" [includeScrollableArea]="false" [dialog]="dialogRef">
   <div class="filter-link-container">
     <div class="filter-link subtle-transparent-button" (click)="filter()">
       <span class="transparent">{{ 'apps.log.filter-button' | translate }}</span>&nbsp;

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.ts

@@ -66,6 +66,7 @@ export class LogComponent implements OnInit, OnDestroy {
 
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: Application,
+    public dialogRef: MatDialogRef<LogComponent>,
     private appsService: AppsService,
     private dialog: MatDialog,
     private snackbarService: SnackbarService,

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'apps.vpn-socks-client-settings.change-note-dialog.title' | translate">
+<app-dialog [headline]="'apps.vpn-socks-client-settings.change-note-dialog.title' | translate" [dialog]="dialogRef">
   <form [formGroup]="form">
     <mat-form-field>
       <input #firstInput [placeholder]="'apps.vpn-socks-client-settings.change-note-dialog.note' | translate" formControlName="note" maxlength="100" matInput>

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts

@@ -33,7 +33,7 @@ export class EditSkysocksClientNoteComponent implements OnInit {
   }
 
   constructor(
-    private dialogRef: MatDialogRef<EditSkysocksClientNoteComponent>,
+    public dialogRef: MatDialogRef<EditSkysocksClientNoteComponent>,
     @Inject(MAT_DIALOG_DATA) private data: string,
     private formBuilder: FormBuilder,
   ) { }

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.html

@@ -1,4 +1,4 @@
-<app-dialog [headline]="'apps.vpn-socks-client-settings.filter-dialog.title' | translate">
+<app-dialog [headline]="'apps.vpn-socks-client-settings.filter-dialog.title' | translate" [dialog]="dialogRef">
   <form [formGroup]="form">
 
     <!-- Country. -->

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts

@@ -53,7 +53,7 @@ export class SkysocksClientFilterComponent implements OnInit {
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: FilterWindowData,
-    private dialogRef: MatDialogRef<SkysocksClientFilterComponent>,
+    public dialogRef: MatDialogRef<SkysocksClientFilterComponent>,
     private formBuilder: FormBuilder,
   ) { }