From f74a6e60024a2e3749e3f687af57204979d76364 Mon Sep 17 00:00:00 2001 From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com> Date: Thu, 13 Jul 2023 16:42:54 -0400 Subject: [PATCH] UI improvements --- .../skywire-manager-src/src/app/app.module.ts | 2 + .../tab-selector/tab-selector.component.html | 9 ++++ .../tab-selector/tab-selector.component.scss | 17 ++++++++ .../tab-selector/tab-selector.component.ts | 43 +++++++++++++++++++ .../node-logs/node-logs.component.html | 6 +-- .../node-logs/node-logs.component.scss | 22 ++-------- .../node-apps-list/log/log.component.html | 13 ++++-- .../node-apps-list/log/log.component.scss | 20 +++------ .../skysocks-client-settings.component.html | 15 ++++--- .../skysocks-client-settings.component.scss | 18 +++++++- .../skysocks-client-settings.component.ts | 33 ++++++++++++++ .../src/assets/scss/_dialogs.scss | 24 +++++++++++ 12 files changed, 175 insertions(+), 47 deletions(-) create mode 100644 static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.html create mode 100644 static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.scss create mode 100644 static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.ts diff --git a/static/skywire-manager-src/src/app/app.module.ts b/static/skywire-manager-src/src/app/app.module.ts index 36fc082746..f03105cd29 100644 --- 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/static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.html b/static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.html new file mode 100644 index 0000000000..a1a4b1348f --- /dev/null +++ b/static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.html @@ -0,0 +1,9 @@ +
+
+
+ {{ tabNames[selectedTab] | translate }} +
+ expand_more +
+
+
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.scss b/static/skywire-manager-src/src/app/components/layout/tab-selector/tab-selector.component.scss new file mode 100644 index 0000000000..93db0b5af2 --- /dev/null +++ b/static/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 new file mode 100644 index 0000000000..b029719a9a --- /dev/null +++ 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(); + + 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/static/skywire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.html b/static/skywire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.html index a708bdb66a..b5f9818fed 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.html @@ -1,7 +1,7 @@ -
-
+
+
{{ 'node.logs.selected-filter' | translate }} {{ ('node.logs.' + levelDetails.get(currentMinimumLevel).levelFilterName) | translate }} @@ -10,7 +10,7 @@ {{ 'node.logs.filter-ignored' | translate:{number: logEntries.length - filteredLogEntries.length} }}
-
+
diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.scss b/static/skywire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.scss index a74a96c7ae..dc607e837d 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/actions/node-logs/node-logs.component.scss +++ b/static/skywire-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/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html index 6ef1474669..82aa52d4d6 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html @@ -1,10 +1,15 @@ -
-
- {{ 'apps.log.filter-button' | translate }}  - {{ currentFilter.text | translate }} + +
+
+
+ {{ 'apps.log.filter-button' | translate }} + {{ currentFilter.text | translate }} +
+
+ diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.scss b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.scss index 42d8af5f14..2945cfe7bc 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.scss +++ b/static/skywire-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/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html index 8b10fff89b..4d5cb50489 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html +++ b/static/skywire-manager-src/src/app/components/pages/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" > - + + - +
@@ -58,7 +61,7 @@ - + @@ -154,7 +157,7 @@
- +
@@ -238,7 +241,7 @@
- +
@@ -283,5 +286,5 @@
- + diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.scss b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.scss index e7fe120f7a..8dc2f89163 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.scss +++ b/static/skywire-manager-src/src/app/components/pages/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/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts index 726a9b9b8a..baec0999e5 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts +++ b/static/skywire-manager-src/src/app/components/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 index 3594e11bbc..57cc931d5d 100644 --- 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; + } +}