Merge pull request #1647 from Senyoret1/tab-ui

UI improvements
skycoin · Oct 25, 2023 · 499658a · 499658a
2 parents 8c61f78 + f74a6e6
commit 499658a
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 47 deletions.
diff --git a/static/skywire-manager-src/src/app/app.module.ts b/static/skywire-manager-src/src/app/app.module.ts
@@ -101,6 +101,7 @@ import { RewardsAddressComponent } from './components/pages/node/node-info/node-
 import { BulkRewardAddressChangerComponent } from './components/layout/bulk-reward-address-changer/bulk-reward-address-changer.component';
 import { UserAppSettingsComponent } from './components/pages/node/apps/node-apps/user-app-settings/user-app-settings.component';
 import { NodeLogsComponent } from './components/pages/node/actions/node-logs/node-logs.component';
+import { TabSelectorComponent } from './components/layout/tab-selector/tab-selector.component';
 
 const globalRippleConfig: RippleGlobalOptions = {
   disabled: true,
@@ -178,6 +179,7 @@ const globalRippleConfig: RippleGlobalOptions = {
     BulkRewardAddressChangerComponent,
     UserAppSettingsComponent,
     NodeLogsComponent,
+    TabSelectorComponent,
   ],
   imports: [
     BrowserModule,

diff --git a/...ic/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.html b/...ic/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.html
@@ -0,0 +1,9 @@
+<div class="top-dialog-button" (click)="showTabSelector()">
+  <div class="top-dialog-button-content">
+    <div class="tab-name">
+      <span>{{ tabNames[selectedTab] | translate }}</span>
+    </div>
+    <mat-icon class="icon" [inline]="true">expand_more</mat-icon>
+  </div>
+  <div class="top-dialog-button-margin"></div>
+</div>
diff --git a/...ic/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.scss b/...ic/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.scss
@@ -0,0 +1,17 @@
+.top-dialog-button{
+  .top-dialog-button-content {
+    display: flex;
+
+    .tab-name {
+      flex-grow: 1;
+      margin-right: 10px;
+      align-self: center;
+    }
+
+    .icon {
+      font-size: 20px;
+      flex-shrink: 0;
+      align-self: center;
+    }
+  }
+}
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.ts b/static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.ts
@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { SelectOptionComponent, SelectableOption } from '../select-option/select-option.component';
+import { MatDialog } from '@angular/material/dialog';
+
+/**
+ * Button for changing the selected tab of an app-tab-selector component in small screens.
+ */
+@Component({
+  selector: 'app-tab-selector',
+  templateUrl: './tab-selector.component.html',
+  styleUrls: ['./tab-selector.component.scss']
+})
+export class TabSelectorComponent implements OnDestroy {
+  // Name of the available tabs, for the translation pipe.
+  @Input() tabNames: string[] = [''];
+  // Index of the currently selected tab.
+  @Input() selectedTab = 0;
+  // Event emited if the user selects a different tab. The selectedTab var is not
+  // updated automatically when this event is sent.
+  @Output() tabChanged = new EventEmitter<number>();
+
+  constructor(
+    private dialog: MatDialog
+  ) { }
+
+  ngOnDestroy() {
+    this.tabChanged.complete();
+  }
+
+  showTabSelector() {
+    const options: SelectableOption[] = [];
+
+    // Create a list with all the tabs.
+    this.tabNames.forEach((name, i) => {
+      options.push({ icon: i === this.selectedTab ? 'check' : '', label: name })
+    });
+
+    // Show the tab selection modal window.
+    SelectOptionComponent.openDialog(this.dialog, options, 'node.logs.filter-title').afterClosed().subscribe((selectedOption: number) => {
+      this.tabChanged.emit(selectedOption - 1);
+    });
+  }
+}
diff --git a/...wire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.html b/...wire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.html
@@ -1,7 +1,7 @@
 <app-dialog [headline]="'node.logs.title' | translate" [includeVerticalMargins]="false" [includeScrollableArea]="false" [dialog]="dialogRef">
   <!-- Filter button. -->
-  <div *ngIf="!loading && logEntries && logEntries.length > 0" class="filter-area" (click)="showFilters()">
-    <div class="filter-content">
+  <div *ngIf="!loading && logEntries && logEntries.length > 0" class="top-dialog-button" (click)="showFilters()">
+    <div class="top-dialog-button-content">
       <div>
         <span>{{ 'node.logs.selected-filter' | translate }} </span>
         <span class="actual-value">{{ ('node.logs.' + levelDetails.get(currentMinimumLevel).levelFilterName) | translate }}</span>
@@ -10,7 +10,7 @@
         {{ 'node.logs.filter-ignored' | translate:{number: logEntries.length - filteredLogEntries.length} }}
       </div>
     </div>
-    <div class="filter-margin"></div>
+    <div class="top-dialog-button-margin"></div>
   </div>
 
   <mat-dialog-content #content>

diff --git a/...wire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.scss b/...wire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.scss
@@ -1,19 +1,9 @@
 @import "variables";
 
-.filter-area {
-  margin-left: -$mat-dialog-padding;
-  margin-right: -$mat-dialog-padding;
-  font-size: $font-size-smaller;
-  color: $light-gray;
-  background-color: #d9deeb;
-  cursor: pointer;
-
-  &:hover {
-    background-color: darken(#d9deeb, 3%);
-  }
+.top-dialog-button {
+  color: $light-gray !important;
 
-  .filter-content {
-    padding: 10px $mat-dialog-padding;
+  .top-dialog-button-content {
     text-align: center;
 
     .actual-value {
@@ -24,12 +14,6 @@
       font-size: $font-size-mini-plus;
     }
   }
-
-  .filter-margin {
-    height: 1px;
-    background-color: $modal-separator;
-    margin: 0 12px;
-  }
 }
 
 .log-entry {

diff --git a/...wire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html b/...wire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html
@@ -1,10 +1,15 @@
 <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;
-      <span>{{ currentFilter.text | translate }}</span>
+  <!-- Filter button. -->
+  <div class="top-dialog-button" (click)="filter()">
+    <div class="top-dialog-button-content">
+      <div>
+        <span>{{ 'apps.log.filter-button' | translate }} </span>
+        <span class="actual-value">{{ currentFilter.text | translate }}</span>
+      </div>
     </div>
+    <div class="top-dialog-button-margin"></div>
   </div>
+
   <mat-dialog-content #content>
     <!-- Button for opening all the logs. -->
     <a [href]="getLogsUrl()" target="_blank">

diff --git a/...wire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.scss b/...wire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.scss
@@ -21,22 +21,14 @@
   margin-bottom: $mat-dialog-padding;
 }
 
-.filter-link-container {
-  text-align: center;
-  margin: 15px 0;
-
-  .filter-link {
-    display: inline-block;
-    background: $white;
-    padding: 5px 10px;
-    border-radius: 1000px;
-    font-size: $font-size-sm;
+.top-dialog-button {
+  color: $light-gray !important;
+
+  .top-dialog-button-content {
     text-align: center;
-    color: $blue-medium;
-    cursor: pointer;
 
-    .transparent {
-      color: scale-color($blue-medium, $alpha: -50%);
+    .actual-value {
+      color: $black;
     }
   }
 }

diff --git a/...ages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html b/...ages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html
@@ -2,10 +2,13 @@
   [headline]="('apps.vpn-socks-client-settings.' + ( configuringVpn ? 'vpn-title' : 'socks-title')) | translate"
   [dialog]="dialogRef"
   [disableDismiss]="disableDismiss"
+  [includeVerticalMargins]="false"
+  [includeScrollableArea]="false"
 >
-  <mat-tab-group>
+  <app-tab-selector [tabNames]="tabLabels" [selectedTab]="currentTab" (tabChanged)="tabChangeRequested($event)"></app-tab-selector>
+  <mat-dialog-content #content><mat-tab-group #tabGroup (selectedIndexChange)="tabIdexChanged()">
     <!-- Form. -->
-    <mat-tab [label]="'apps.vpn-socks-client-settings.remote-visor-tab' | translate">
+    <mat-tab [label]="tabLabels[0] | translate">
       <form [formGroup]="form">
         <mat-form-field [ngClass]="{'element-disabled' : disableDismiss}">
           <div class="field-container">
@@ -58,7 +61,7 @@
       </form>
     </mat-tab>
     <!-- Discovery. -->
-    <mat-tab [label]="'apps.vpn-socks-client-settings.discovery-tab' | translate">
+    <mat-tab [label]="tabLabels[1] | translate">
       <app-loading-indicator class="loading-indicator" [showWhite]="false" *ngIf="loadingFromDiscovery"></app-loading-indicator>
 
       <!-- No proxies in the discovery service msg. -->
@@ -154,7 +157,7 @@
       </div>
     </mat-tab>
     <!-- History. -->
-    <mat-tab [label]="'apps.vpn-socks-client-settings.history-tab' | translate">
+    <mat-tab [label]="tabLabels[2] | translate">
       <!-- Msg shown if there is no history. -->
       <div *ngIf="history.length === 0">
         <div class="info-text">
@@ -238,7 +241,7 @@
       </div>
     </mat-tab>
     <!-- Settings. -->
-    <mat-tab [label]="'apps.vpn-socks-client-settings.settings-tab' | translate" *ngIf="configuringVpn">
+    <mat-tab [label]="tabLabels[3] | translate" *ngIf="configuringVpn">
       <form [formGroup]="settingsForm">
         <!-- DNS option. -->
         <mat-form-field [ngClass]="{'element-disabled' : disableDismiss}">
@@ -283,5 +286,5 @@
         </app-button>
       </form>
     </mat-tab>
-  </mat-tab-group>
+  </mat-tab-group></mat-dialog-content>
 </app-dialog>
diff --git a/...ages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.scss b/...ages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.scss
@@ -3,6 +3,22 @@
 
 ::ng-deep mat-tab-header {
   border-bottom: solid 1px $grey-separator;
+
+  @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
+    & {
+      display: none !important;
+    }
+  }
+}
+
+app-tab-selector {
+  display: none;
+
+  @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
+    & {
+      display: block !important;
+    }
+  }
 }
 
 form {
@@ -17,7 +33,7 @@ form {
 
   mat-icon {
     position: relative;
-    top: 2px;
+    top: 5px;
   }
 }
 

diff --git a/.../pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts b/.../pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts
@@ -24,6 +24,7 @@ import { countriesList } from 'src/app/utils/countries-list';
 import { SkysocksClientPasswordComponent } from './skysocks-client-password/skysocks-client-password.component';
 import { ClipboardService } from 'src/app/services/clipboard.service';
 import { StorageService } from 'src/app/services/storage.service';
+import { MatTabGroup } from '@angular/material/tabs';
 
 /**
  * Data of the entries from the history.
@@ -69,9 +70,14 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
   // How many elements to show per page on the proxy discovery tab.
   readonly maxElementsPerPage = 10;
 
+  tabLabels: string[] = [];
+  currentTab = 0;
+
   @ViewChild('button') button: ButtonComponent;
   @ViewChild('settingsButton') settingsButton: ButtonComponent;
   @ViewChild('firstInput') firstInput: ElementRef;
+  @ViewChild('tabGroup') tabGroup: MatTabGroup;
+
   form: UntypedFormGroup;
   settingsForm: UntypedFormGroup;
   // Entries to show on the history.
@@ -142,6 +148,19 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
   ) {
     if (data.name.toLocaleLowerCase().indexOf('vpn') !== -1) {
       this.configuringVpn = true;
+
+      this.tabLabels = [
+        'apps.vpn-socks-client-settings.remote-visor-tab',
+        'apps.vpn-socks-client-settings.discovery-tab',
+        'apps.vpn-socks-client-settings.history-tab',
+        'apps.vpn-socks-client-settings.settings-tab',
+      ];
+    } else {
+      this.tabLabels = [
+        'apps.vpn-socks-client-settings.remote-visor-tab',
+        'apps.vpn-socks-client-settings.discovery-tab',
+        'apps.vpn-socks-client-settings.history-tab',
+      ];
     }
   }
 
@@ -242,6 +261,20 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     return (this.button && this.button.isLoading) || (this.settingsButton && this.settingsButton.isLoading);
   }
 
+  /**
+   * Called when the app-tab-selector asks for the tab to be changed in mat-tab-group.
+   */
+  tabChangeRequested(requestedTab: number) {
+    this.tabGroup.selectedIndex = requestedTab;
+  }
+
+  /**
+   * Called when the selected tab is changed in mat-tab-group.
+   */
+  tabIdexChanged() {
+    this.currentTab = this.tabGroup.selectedIndex;
+  }
+
   // Validates an IPv4 address.
   private validateIp() {
     if (this.settingsForm) {

diff --git a/static/skywire-manager-src/src/assets/scss/_dialogs.scss b/static/skywire-manager-src/src/assets/scss/_dialogs.scss
@@ -80,3 +80,27 @@ app-dialog {
     }
   }
 }
+
+// Style for the button that is shown in some modals under the tittle and above the content.
+.top-dialog-button {
+  margin-left: -$mat-dialog-padding;
+  margin-right: -$mat-dialog-padding;
+  font-size: $font-size-smaller;
+  background-color: #d9deeb;
+  color: $black;
+  cursor: pointer;
+
+  &:hover {
+    background-color: darken(#d9deeb, 3%);
+  }
+
+  .top-dialog-button-content {
+    padding: 10px $mat-dialog-padding;
+  }
+
+  .top-dialog-button-margin {
+    height: 1px;
+    background-color: $modal-separator;
+    margin: 0 12px;
+  }
+}