From bf3d43970573ed3c42084d2e87d47fc38ec0cc05 Mon Sep 17 00:00:00 2001 From: jliddev Date: Fri, 30 Oct 2020 00:34:29 -0500 Subject: [PATCH] re-style options Fix #262 --- .../options-app-section.component.html | 80 ++++++ .../options-app-section.component.scss | 14 + .../options-app-section.component.spec.ts | 25 ++ .../options-app-section.component.ts | 100 +++++++ .../options-debug-section.component.html | 35 +++ .../options-debug-section.component.scss | 13 + .../options-debug-section.component.spec.ts | 25 ++ .../options-debug-section.component.ts | 25 ++ .../options-wow-section.component.html | 18 ++ .../options-wow-section.component.scss | 5 + .../options-wow-section.component.spec.ts | 25 ++ .../options-wow-section.component.ts | 47 ++++ wowup-electron/src/app/mat-module.ts | 6 + .../src/app/pages/home/home.module.ts | 46 ++-- .../app/pages/options/options.component.html | 244 +++--------------- .../app/pages/options/options.component.scss | 90 +++++++ .../app/pages/options/options.component.ts | 142 +--------- wowup-electron/src/styles.scss | 8 + 18 files changed, 577 insertions(+), 371 deletions(-) create mode 100644 wowup-electron/src/app/components/options-app-section/options-app-section.component.html create mode 100644 wowup-electron/src/app/components/options-app-section/options-app-section.component.scss create mode 100644 wowup-electron/src/app/components/options-app-section/options-app-section.component.spec.ts create mode 100644 wowup-electron/src/app/components/options-app-section/options-app-section.component.ts create mode 100644 wowup-electron/src/app/components/options-debug-section/options-debug-section.component.html create mode 100644 wowup-electron/src/app/components/options-debug-section/options-debug-section.component.scss create mode 100644 wowup-electron/src/app/components/options-debug-section/options-debug-section.component.spec.ts create mode 100644 wowup-electron/src/app/components/options-debug-section/options-debug-section.component.ts create mode 100644 wowup-electron/src/app/components/options-wow-section/options-wow-section.component.html create mode 100644 wowup-electron/src/app/components/options-wow-section/options-wow-section.component.scss create mode 100644 wowup-electron/src/app/components/options-wow-section/options-wow-section.component.spec.ts create mode 100644 wowup-electron/src/app/components/options-wow-section/options-wow-section.component.ts diff --git a/wowup-electron/src/app/components/options-app-section/options-app-section.component.html b/wowup-electron/src/app/components/options-app-section/options-app-section.component.html new file mode 100644 index 00000000..23743a8a --- /dev/null +++ b/wowup-electron/src/app/components/options-app-section/options-app-section.component.html @@ -0,0 +1,80 @@ +
+

+ {{ "PAGES.OPTIONS.APPLICATION.TITLE" | translate }} +

+ +
+
+
+
{{ "PAGES.OPTIONS.APPLICATION.TELEMETRY_LABEL" | translate }}
+
+ +
+ {{ "PAGES.OPTIONS.APPLICATION.TELEMETRY_DESCRIPTION" | translate }} +
+ +
+
+
+
{{ "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_LABEL" | translate }}
+
+ + +
+ {{ minimizeOnCloseDescription }} +
+ +
+
+
+
{{ "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_LABEL" | translate }}
+
+ + +
+ + {{ "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_DESCRIPTION" | translate }} + +
+ +
+
+
+
{{ "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_LABEL" | translate }}
+
+ + +
+ {{ "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_DESCRIPTION" | translate }} +
+ +
+
+
+

{{ "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_LABEL" | translate }}

+ {{ "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_DESCRIPTION" | translate }} +
+ + +
+
+ +
+
+
+

{{ "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_LABEL" | translate }}

+ {{ "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_DESCRIPTION" | translate }} +
+ + +
+
+
\ No newline at end of file diff --git a/wowup-electron/src/app/components/options-app-section/options-app-section.component.scss b/wowup-electron/src/app/components/options-app-section/options-app-section.component.scss new file mode 100644 index 00000000..32ad6eab --- /dev/null +++ b/wowup-electron/src/app/components/options-app-section/options-app-section.component.scss @@ -0,0 +1,14 @@ +@import "../../../variables.scss"; + +.container { + padding: 1em; + max-width: 660px; + + .hint { + color: $white-3; + } + + .toggle { + margin-top: 1em; + } +} diff --git a/wowup-electron/src/app/components/options-app-section/options-app-section.component.spec.ts b/wowup-electron/src/app/components/options-app-section/options-app-section.component.spec.ts new file mode 100644 index 00000000..39ca1d21 --- /dev/null +++ b/wowup-electron/src/app/components/options-app-section/options-app-section.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OptionsAppSectionComponent } from './options-app-section.component'; + +describe('OptionsAppSectionComponent', () => { + let component: OptionsAppSectionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ OptionsAppSectionComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(OptionsAppSectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/wowup-electron/src/app/components/options-app-section/options-app-section.component.ts b/wowup-electron/src/app/components/options-app-section/options-app-section.component.ts new file mode 100644 index 00000000..a581eabe --- /dev/null +++ b/wowup-electron/src/app/components/options-app-section/options-app-section.component.ts @@ -0,0 +1,100 @@ +import { Component, OnInit } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { MatSlideToggleChange } from "@angular/material/slide-toggle"; +import { TranslateService } from "@ngx-translate/core"; +import { ElectronService } from "app/services"; +import { AnalyticsService } from "app/services/analytics/analytics.service"; +import { WowUpService } from "app/services/wowup/wowup.service"; +import { ConfirmDialogComponent } from "../confirm-dialog/confirm-dialog.component"; + +@Component({ + selector: "app-options-app-section", + templateUrl: "./options-app-section.component.html", + styleUrls: ["./options-app-section.component.scss"], +}) +export class OptionsAppSectionComponent implements OnInit { + public collapseToTray = false; + public minimizeOnCloseDescription: string = ""; + public startMinimized = false; + public startWithSystem = false; + public telemetryEnabled = false; + public useHardwareAcceleration = true; + + constructor( + private _analyticsService: AnalyticsService, + private _dialog: MatDialog, + private _electronService: ElectronService, + private _translateService: TranslateService, + public wowupService: WowUpService + ) {} + + ngOnInit(): void { + this._analyticsService.telemetryEnabled$.subscribe((enabled) => { + this.telemetryEnabled = enabled; + }); + + const minimizeOnCloseKey = this._electronService.isWin + ? "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_DESCRIPTION_WINDOWS" + : "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_DESCRIPTION_MAC"; + + this._translateService + .get(minimizeOnCloseKey) + .subscribe((translatedStr) => { + this.minimizeOnCloseDescription = translatedStr; + }); + + this.telemetryEnabled = this._analyticsService.telemetryEnabled; + this.collapseToTray = this.wowupService.collapseToTray; + this.useHardwareAcceleration = this.wowupService.useHardwareAcceleration; + this.startWithSystem = this.wowupService.startWithSystem; + this.startMinimized = this.wowupService.startMinimized; + } + + onEnableSystemNotifications = (evt: MatSlideToggleChange) => { + this.wowupService.enableSystemNotifications = evt.checked; + }; + + onTelemetryChange = (evt: MatSlideToggleChange) => { + this._analyticsService.telemetryEnabled = evt.checked; + }; + + onCollapseChange = (evt: MatSlideToggleChange) => { + this.wowupService.collapseToTray = evt.checked; + }; + + onStartWithSystemChange = (evt: MatSlideToggleChange) => { + this.wowupService.startWithSystem = evt.checked; + if (!evt.checked) { + this.startMinimized = false; + } + }; + + onStartMinimizedChange = (evt: MatSlideToggleChange) => { + this.wowupService.startMinimized = evt.checked; + }; + + onUseHardwareAccelerationChange = (evt: MatSlideToggleChange) => { + const dialogRef = this._dialog.open(ConfirmDialogComponent, { + data: { + title: this._translateService.instant( + "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_CONFIRMATION_LABEL" + ), + message: this._translateService.instant( + evt.checked + ? "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_ENABLE_CONFIRMATION_DESCRIPTION" + : "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_DISABLE_CONFIRMATION_DESCRIPTION" + ), + }, + }); + + dialogRef.afterClosed().subscribe((result) => { + if (!result) { + evt.source.checked = !evt.source.checked; + return; + } + + this.wowupService.useHardwareAcceleration = evt.checked; + this._electronService.restartApplication(); + }); + }; +} diff --git a/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.html b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.html new file mode 100644 index 00000000..7ab643c9 --- /dev/null +++ b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.html @@ -0,0 +1,35 @@ +
+

+ {{ "PAGES.OPTIONS.DEBUG.TITLE" | translate }} +

+ +
+
+
+
{{ "PAGES.OPTIONS.DEBUG.LOG_FILES_LABEL" | translate }}
+ {{ "PAGES.OPTIONS.DEBUG.LOG_FILES_DESCRIPTION" | translate }} +
+
+ +
+
+
+ +
+
+
+
{{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_LABEL" | translate }}
+ {{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_DESCRIPTION" | translate }} +
+
+ +
+
+
+
\ No newline at end of file diff --git a/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.scss b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.scss new file mode 100644 index 00000000..a63246c9 --- /dev/null +++ b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.scss @@ -0,0 +1,13 @@ +@import "../../../variables.scss"; + +.container { + padding: 1em; + + .hint { + color: $white-3; + } + + .section { + margin-top: 1em; + } +} diff --git a/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.spec.ts b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.spec.ts new file mode 100644 index 00000000..5331fd6b --- /dev/null +++ b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OptionsDebugSectionComponent } from './options-debug-section.component'; + +describe('OptionsDebugSectionComponent', () => { + let component: OptionsDebugSectionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ OptionsDebugSectionComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(OptionsDebugSectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.ts b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.ts new file mode 100644 index 00000000..3228f3b1 --- /dev/null +++ b/wowup-electron/src/app/components/options-debug-section/options-debug-section.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from "@angular/core"; +import { AddonService } from "app/services/addons/addon.service"; +import { WowUpService } from "app/services/wowup/wowup.service"; + +@Component({ + selector: "app-options-debug-section", + templateUrl: "./options-debug-section.component.html", + styleUrls: ["./options-debug-section.component.scss"], +}) +export class OptionsDebugSectionComponent implements OnInit { + constructor( + private _addonService: AddonService, + private _wowupService: WowUpService + ) {} + + ngOnInit(): void {} + + public onShowLogs = () => { + this._wowupService.showLogsFolder(); + }; + + public async onLogDebugData() { + await this._addonService.logDebugData(); + } +} diff --git a/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.html b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.html new file mode 100644 index 00000000..1158dfef --- /dev/null +++ b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.html @@ -0,0 +1,18 @@ +
+

+ {{ "PAGES.OPTIONS.WOW.TITLE" | translate }} +

+
+
+
+ {{ "PAGES.OPTIONS.WOW.RESCAN_CLIENTS_LABEL" | translate }} +
+ +
+ + +
+
\ No newline at end of file diff --git a/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.scss b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.scss new file mode 100644 index 00000000..51fc2ecd --- /dev/null +++ b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.scss @@ -0,0 +1,5 @@ +@import "../../../variables.scss"; + +.container { + padding: 1em; +} diff --git a/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.spec.ts b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.spec.ts new file mode 100644 index 00000000..64ffe663 --- /dev/null +++ b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OptionsWowSectionComponent } from './options-wow-section.component'; + +describe('OptionsWowSectionComponent', () => { + let component: OptionsWowSectionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ OptionsWowSectionComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(OptionsWowSectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.ts b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.ts new file mode 100644 index 00000000..530937d4 --- /dev/null +++ b/wowup-electron/src/app/components/options-wow-section/options-wow-section.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit } from "@angular/core"; +import { MatSelectChange } from "@angular/material/select"; +import { WowClientType } from "app/models/warcraft/wow-client-type"; +import { WowUpReleaseChannelType } from "app/models/wowup/wowup-release-channel-type"; +import { WarcraftService } from "app/services/warcraft/warcraft.service"; +import { WowUpService } from "app/services/wowup/wowup.service"; +import { getEnumList, getEnumName } from "app/utils/enum.utils"; + +@Component({ + selector: "app-options-wow-section", + templateUrl: "./options-wow-section.component.html", + styleUrls: ["./options-wow-section.component.scss"], +}) +export class OptionsWowSectionComponent implements OnInit { + public wowClientTypes: WowClientType[] = getEnumList(WowClientType).filter( + (clientType) => clientType !== WowClientType.None + ) as WowClientType[]; + + public wowUpReleaseChannel: WowUpReleaseChannelType; + + public wowUpReleaseChannels: { + type: WowUpReleaseChannelType; + name: string; + }[] = getEnumList(WowUpReleaseChannelType).map( + (type: WowUpReleaseChannelType) => ({ + type, + name: getEnumName(WowUpReleaseChannelType, type), + }) + ); + + constructor( + private _warcraftService: WarcraftService, + private _wowupService: WowUpService + ) {} + + ngOnInit(): void { + this.wowUpReleaseChannel = this._wowupService.wowUpReleaseChannel; + } + + public onReScan = () => { + this._warcraftService.scanProducts(); + }; + + public onWowUpChannelChange(evt: MatSelectChange) { + this._wowupService.wowUpReleaseChannel = evt.value; + } +} diff --git a/wowup-electron/src/app/mat-module.ts b/wowup-electron/src/app/mat-module.ts index aaedc13d..80c8df16 100644 --- a/wowup-electron/src/app/mat-module.ts +++ b/wowup-electron/src/app/mat-module.ts @@ -18,6 +18,8 @@ import { MatSortModule } from "@angular/material/sort"; import { MatTableModule } from "@angular/material/table"; import { MatTabsModule } from "@angular/material/tabs"; import { MatTooltipModule } from "@angular/material/tooltip"; +import { MatSidenavModule } from "@angular/material/sidenav"; +import { MatListModule } from "@angular/material/list"; @NgModule({ exports: [ @@ -40,6 +42,8 @@ import { MatTooltipModule } from "@angular/material/tooltip"; MatDialogModule, MatCardModule, MatSnackBarModule, + MatSidenavModule, + MatListModule, ], imports: [ MatSliderModule, @@ -61,6 +65,8 @@ import { MatTooltipModule } from "@angular/material/tooltip"; MatDialogModule, MatCardModule, MatSnackBarModule, + MatSidenavModule, + MatListModule, ], }) export class MatModule {} diff --git a/wowup-electron/src/app/pages/home/home.module.ts b/wowup-electron/src/app/pages/home/home.module.ts index 5e54ffa8..1789c56b 100644 --- a/wowup-electron/src/app/pages/home/home.module.ts +++ b/wowup-electron/src/app/pages/home/home.module.ts @@ -1,25 +1,28 @@ import { CommonModule, DatePipe } from "@angular/common"; import { NgModule } from "@angular/core"; -import { AddonDetailComponent } from "app/components/addon-detail/addon-detail.component"; -import { AddonInstallButtonComponent } from "app/components/addon-install-button/addon-install-button.component"; -import { AddonProviderBadgeComponent } from "app/components/addon-provider-badge/addon-provider-badge.component"; -import { AddonUpdateButtonComponent } from "app/components/addon-update-button/addon-update-button.component"; -import { AlertDialogComponent } from "app/components/alert-dialog/alert-dialog.component"; -import { ConfirmDialogComponent } from "app/components/confirm-dialog/confirm-dialog.component"; -import { GetAddonStatusColumnComponent } from "app/components/get-addon-status-column/get-addon-status-column.component"; -import { InstallFromUrlDialogComponent } from "app/components/install-from-url-dialog/install-from-url-dialog.component"; -import { MyAddonStatusColumnComponent } from "app/components/my-addon-status-column/my-addon-status-column.component"; -import { MyAddonsAddonCellComponent } from "app/components/my-addons-addon-cell/my-addons-addon-cell.component"; -import { PotentialAddonTableColumnComponent } from "app/components/potential-addon-table-column/potential-addon-table-column.component"; -import { ProgressButtonComponent } from "app/components/progress-button/progress-button.component"; -import { ProgressSpinnerComponent } from "app/components/progress-spinner/progress-spinner.component"; -import { TelemetryDialogComponent } from "app/components/telemetry-dialog/telemetry-dialog.component"; -import { WowClientOptionsComponent } from "app/components/wow-client-options/wow-client-options.component"; -import { DirectiveModule } from "app/directive.module"; -import { DownloadCountPipe } from "app/pipes/download-count.pipe"; -import { GetAddonListItemFilePropPipe } from "app/pipes/get-addon-list-item-file-prop.pipe"; -import { InterfaceFormatPipe } from "app/pipes/interface-format.pipe"; -import { RelativeDurationPipe } from "app/pipes/relative-duration-pipe"; +import { AddonDetailComponent } from "../../components/addon-detail/addon-detail.component"; +import { AddonInstallButtonComponent } from "../../components/addon-install-button/addon-install-button.component"; +import { AddonProviderBadgeComponent } from "../../components/addon-provider-badge/addon-provider-badge.component"; +import { AddonUpdateButtonComponent } from "../../components/addon-update-button/addon-update-button.component"; +import { AlertDialogComponent } from "../../components/alert-dialog/alert-dialog.component"; +import { ConfirmDialogComponent } from "../../components/confirm-dialog/confirm-dialog.component"; +import { GetAddonStatusColumnComponent } from "../../components/get-addon-status-column/get-addon-status-column.component"; +import { InstallFromUrlDialogComponent } from "../../components/install-from-url-dialog/install-from-url-dialog.component"; +import { MyAddonStatusColumnComponent } from "../../components/my-addon-status-column/my-addon-status-column.component"; +import { MyAddonsAddonCellComponent } from "../../components/my-addons-addon-cell/my-addons-addon-cell.component"; +import { PotentialAddonTableColumnComponent } from "../../components/potential-addon-table-column/potential-addon-table-column.component"; +import { ProgressButtonComponent } from "../../components/progress-button/progress-button.component"; +import { ProgressSpinnerComponent } from "../../components/progress-spinner/progress-spinner.component"; +import { TelemetryDialogComponent } from "../../components/telemetry-dialog/telemetry-dialog.component"; +import { WowClientOptionsComponent } from "../../components/wow-client-options/wow-client-options.component"; +import { OptionsWowSectionComponent } from "../../components/options-wow-section/options-wow-section.component"; +import { OptionsAppSectionComponent } from "../../components/options-app-section/options-app-section.component"; +import { OptionsDebugSectionComponent } from "../../components/options-debug-section/options-debug-section.component"; +import { DirectiveModule } from "../../directive.module"; +import { DownloadCountPipe } from "../../pipes/download-count.pipe"; +import { GetAddonListItemFilePropPipe } from "../../pipes/get-addon-list-item-file-prop.pipe"; +import { InterfaceFormatPipe } from "../../pipes/interface-format.pipe"; +import { RelativeDurationPipe } from "../../pipes/relative-duration-pipe"; import { MatModule } from "../../mat-module"; import { SharedModule } from "../../shared/shared.module"; import { AboutComponent } from "../about/about.component"; @@ -55,6 +58,9 @@ import { HomeComponent } from "./home.component"; MyAddonStatusColumnComponent, ProgressButtonComponent, AddonUpdateButtonComponent, + OptionsWowSectionComponent, + OptionsAppSectionComponent, + OptionsDebugSectionComponent, ], imports: [ CommonModule, diff --git a/wowup-electron/src/app/pages/options/options.component.html b/wowup-electron/src/app/pages/options/options.component.html index 20fc951a..bbbcf9e7 100644 --- a/wowup-electron/src/app/pages/options/options.component.html +++ b/wowup-electron/src/app/pages/options/options.component.html @@ -1,220 +1,36 @@ -
-
- - - {{ - "PAGES.OPTIONS.WOW.TITLE" | translate - }} - - -
-
- {{ "PAGES.OPTIONS.WOW.RESCAN_CLIENTS_LABEL" | translate }} -
- + }"> +
+
+
+
+ + + + +
- - - - - - {{ - "PAGES.OPTIONS.APPLICATION.TITLE" | translate - }} - - -
-
-

{{ "PAGES.OPTIONS.APPLICATION.TELEMETRY_LABEL" | translate }}

- {{ - "PAGES.OPTIONS.APPLICATION.TELEMETRY_DESCRIPTION" | translate - }} -
- +
+
+
+
+
+ + + + + + + + + + +
-
-
-

- {{ - "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_LABEL" | translate - }} -

- {{ minimizeOnCloseDescription }} -
- - -
-
-
-

- {{ - "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_LABEL" - | translate - }} -

- - {{ - "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_DESCRIPTION" - | translate - }} - -
- - -
-
-
-

- {{ - "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_LABEL" - | translate - }} -

- {{ - "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_DESCRIPTION" - | translate - }} -
- - -
-
-
-

- {{ - "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_LABEL" | translate - }} -

- {{ - "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_DESCRIPTION" - | translate - }} -
- - -
-
-
-

- {{ - "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_LABEL" | translate - }} -

- {{ - "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_DESCRIPTION" - | translate - }} -
- - -
- - - - - {{ - "PAGES.OPTIONS.DEBUG.TITLE" | translate - }} - - -
-
-

{{ "PAGES.OPTIONS.DEBUG.LOG_FILES_LABEL" | translate }}

- {{ - "PAGES.OPTIONS.DEBUG.LOG_FILES_DESCRIPTION" | translate - }} -
- -
-
-
-

{{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_LABEL" | translate }}

- {{ - "PAGES.OPTIONS.DEBUG.DEBUG_DATA_DESCRIPTION" | translate - }} -
- -
- - +
+
-
+
\ No newline at end of file diff --git a/wowup-electron/src/app/pages/options/options.component.scss b/wowup-electron/src/app/pages/options/options.component.scss index bff9922a..7015d74f 100644 --- a/wowup-electron/src/app/pages/options/options.component.scss +++ b/wowup-electron/src/app/pages/options/options.component.scss @@ -5,9 +5,99 @@ align-items: center; flex-direction: column; } + +.nav-container { + height: 100%; + display: flex; + width: 100%; + + .nav-item-container { + background: $dark-3; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-box-pack: end; + justify-content: flex-end; + flex: 1 0 200px; + z-index: 1; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + .nav-item-list-wrap { + flex: 1 0 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -webkit-box-align: start; + align-items: flex-start; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-box-pack: end; + justify-content: flex-end; + box-sizing: border-box; + + .nav-item-list { + width: 200px; + } + } + } + .nav-content-container { + background: $dark-2; + color: $white-1; + position: relative; + display: flex; + -webkit-box-flex: 1; + flex: 1 1 800px; + -webkit-box-align: start; + align-items: flex-start; + box-sizing: border-box; + + .nav-content-wrap { + -webkit-box-flex: 1; + flex: 1; + box-sizing: border-box; + height: 100%; + + .nav-content { + overflow: hidden scroll; + padding-right: 0px; + height: 100%; + position: static; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -webkit-box-pack: start; + justify-content: flex-start; + -webkit-box-align: start; + align-items: flex-start; + overflow-x: hidden; + box-sizing: border-box; + flex: 1 1 auto; + min-height: 0; + -webkit-box-flex: 1; + + .content-tab { + position: relative; + -webkit-box-flex: 1; + flex: 1 1 auto; + max-width: 740px; + min-width: 460px; + min-height: 100%; + + } + } + } + } +} + .options { max-width: 900px; width: 100%; + height: 100%; .option-card { margin-top: 1em; diff --git a/wowup-electron/src/app/pages/options/options.component.ts b/wowup-electron/src/app/pages/options/options.component.ts index 6e054044..0f5084d7 100644 --- a/wowup-electron/src/app/pages/options/options.component.ts +++ b/wowup-electron/src/app/pages/options/options.component.ts @@ -2,24 +2,10 @@ import { ChangeDetectionStrategy, Component, Input, - NgZone, - OnChanges, OnInit, - SimpleChanges, } from "@angular/core"; -import { MatDialog } from "@angular/material/dialog"; -import { MatSelectChange } from "@angular/material/select"; -import { MatSlideToggleChange } from "@angular/material/slide-toggle"; -import { TranslateService } from "@ngx-translate/core"; -import { ConfirmDialogComponent } from "../../components/confirm-dialog/confirm-dialog.component"; -import { WowClientType } from "../../models/warcraft/wow-client-type"; -import { WowUpReleaseChannelType } from "../../models/wowup/wowup-release-channel-type"; import { ElectronService } from "../../services"; -import { AddonService } from "../../services/addons/addon.service"; -import { AnalyticsService } from "../../services/analytics/analytics.service"; -import { WarcraftService } from "../../services/warcraft/warcraft.service"; import { WowUpService } from "../../services/wowup/wowup.service"; -import { getEnumList, getEnumName } from "../../utils/enum.utils"; @Component({ selector: "app-options", @@ -27,133 +13,15 @@ import { getEnumList, getEnumName } from "../../utils/enum.utils"; styleUrls: ["./options.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class OptionsComponent implements OnInit, OnChanges { +export class OptionsComponent implements OnInit { @Input("tabIndex") tabIndex: number; - public collapseToTray = false; - public telemetryEnabled = false; - public useHardwareAcceleration = true; - public startWithSystem = false; - public startMinimized = false; - public wowClientTypes: WowClientType[] = getEnumList(WowClientType).filter( - (clientType) => clientType !== WowClientType.None - ) as WowClientType[]; - public wowUpReleaseChannel: WowUpReleaseChannelType; - - public wowUpReleaseChannels: { - type: WowUpReleaseChannelType; - name: string; - }[] = getEnumList(WowUpReleaseChannelType).map( - (type: WowUpReleaseChannelType) => ({ - type, - name: getEnumName(WowUpReleaseChannelType, type), - }) - ); - - public get minimizeOnCloseDescription() { - const key = this.electronService.isWin - ? "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_DESCRIPTION_WINDOWS" - : "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_DESCRIPTION_MAC"; - - return this._translateService.instant(key); - } + public optionTabIndex = 0; constructor( - private _addonService: AddonService, - private _analyticsService: AnalyticsService, - private warcraft: WarcraftService, public wowupService: WowUpService, - private _dialog: MatDialog, - private zone: NgZone, - public electronService: ElectronService, - private _translateService: TranslateService - ) { - _analyticsService.telemetryEnabled$.subscribe((enabled) => { - this.telemetryEnabled = enabled; - }); - } + public electronService: ElectronService + ) {} - ngOnChanges(changes: SimpleChanges): void { - console.log(changes); - } - - ngOnInit(): void { - this.wowUpReleaseChannel = this.wowupService.wowUpReleaseChannel; - - this.loadData(); - } - - onShowLogs = () => { - this.wowupService.showLogsFolder(); - }; - - onReScan = () => { - this.warcraft.scanProducts(); - this.loadData(); - }; - - onTelemetryChange = (evt: MatSlideToggleChange) => { - this._analyticsService.telemetryEnabled = evt.checked; - }; - - onCollapseChange = (evt: MatSlideToggleChange) => { - this.wowupService.collapseToTray = evt.checked; - }; - - onEnableSystemNotifications = (evt: MatSlideToggleChange) => { - this.wowupService.enableSystemNotifications = evt.checked; - }; - - onUseHardwareAccelerationChange = (evt: MatSlideToggleChange) => { - const dialogRef = this._dialog.open(ConfirmDialogComponent, { - data: { - title: this._translateService.instant( - "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_CONFIRMATION_LABEL" - ), - message: this._translateService.instant( - evt.checked - ? "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_ENABLE_CONFIRMATION_DESCRIPTION" - : "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_DISABLE_CONFIRMATION_DESCRIPTION" - ), - }, - }); - - dialogRef.afterClosed().subscribe((result) => { - if (!result) { - evt.source.checked = !evt.source.checked; - - return; - } - - this.wowupService.useHardwareAcceleration = evt.checked; - this.electronService.restartApplication(); - }); - }; - - onStartWithSystemChange = (evt: MatSlideToggleChange) => { - this.wowupService.startWithSystem = evt.checked; - if (!evt.checked) this.startMinimized = false; - }; - - onStartMinimizedChange = (evt: MatSlideToggleChange) => { - this.wowupService.startMinimized = evt.checked; - }; - - onWowUpChannelChange(evt: MatSelectChange) { - this.wowupService.wowUpReleaseChannel = evt.value; - } - - async onLogDebugData() { - await this._addonService.logDebugData(); - } - - private loadData() { - this.zone.run(() => { - this.telemetryEnabled = this._analyticsService.telemetryEnabled; - this.collapseToTray = this.wowupService.collapseToTray; - this.useHardwareAcceleration = this.wowupService.useHardwareAcceleration; - this.startWithSystem = this.wowupService.startWithSystem; - this.startMinimized = this.wowupService.startMinimized; - }); - } + ngOnInit(): void {} } diff --git a/wowup-electron/src/styles.scss b/wowup-electron/src/styles.scss index ec54537d..89c61380 100644 --- a/wowup-electron/src/styles.scss +++ b/wowup-electron/src/styles.scss @@ -396,3 +396,11 @@ img { background: $blue-1 !important; } } + +.no-tabs { + &.mat-tab-group { + .mat-tab-header { + display: none; + } + } +} \ No newline at end of file