re-style options

Fix #262

wowup-electron/src/app/components/options-app-section/options-app-section.component.html

@@ -0,0 +1,80 @@
+<div class="container">
+  <h2>
+    {{ "PAGES.OPTIONS.APPLICATION.TITLE" | translate }}
+  </h2>
+  <!-- TELEMETRY -->
+  <div class="toggle">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <div class="label">{{ "PAGES.OPTIONS.APPLICATION.TELEMETRY_LABEL" | translate }}</div>
+      </div>
+      <mat-slide-toggle [checked]="telemetryEnabled" (change)="onTelemetryChange($event)"></mat-slide-toggle>
+    </div>
+    <small class="hint"> {{ "PAGES.OPTIONS.APPLICATION.TELEMETRY_DESCRIPTION" | translate }} </small>
+  </div>
+  <!-- MINIMIZE ON CLOSE -->
+  <div class="toggle">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <div class="label"> {{ "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_LABEL" | translate }} </div>
+      </div>
+      <mat-slide-toggle [(checked)]="collapseToTray" (change)="onCollapseChange($event)" appUserActionTracker
+        category="Options" action="CollapseToTray" [label]="collapseToTray">
+      </mat-slide-toggle>
+    </div>
+    <small class="hint">{{ minimizeOnCloseDescription }}</small>
+  </div>
+  <!-- SYSTEM NOTIFICATIONS -->
+  <div class="toggle">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <div class="label"> {{ "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_LABEL" | translate }} </div>
+      </div>
+      <mat-slide-toggle [checked]="wowupService.enableSystemNotifications"
+        (change)="onEnableSystemNotifications($event)" appUserActionTracker category="Options"
+        action="EnableSystemNotifications" [label]="wowupService.enableSystemNotifications">
+      </mat-slide-toggle>
+    </div>
+    <small class="hint">
+      {{ "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_DESCRIPTION" | translate }}
+    </small>
+  </div>
+  <!-- HARDWARE ACCELERATION -->
+  <div class="toggle">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <div> {{ "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_LABEL" | translate }} </div>
+      </div>
+      <mat-slide-toggle [(checked)]="useHardwareAcceleration" (change)="onUseHardwareAccelerationChange($event)"
+        appUserActionTracker category="Options" action="UseHardwareAcceleration" [label]="useHardwareAcceleration">
+      </mat-slide-toggle>
+    </div>
+    <small class="hint">{{ "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_DESCRIPTION" | translate }}</small>
+  </div>
+  <!-- START WITH SYSTEM -->
+  <div class="toggle">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <p> {{ "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_LABEL" | translate }} </p>
+        <small class="hint">{{ "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_DESCRIPTION" | translate }}</small>
+      </div>
+      <mat-slide-toggle [(ngModel)]="startWithSystem" [(checked)]="startWithSystem"
+        (change)="onStartWithSystemChange($event)" appUserActionTracker category="Options" action="StartWithSystem"
+        [label]="startWithSystem">
+      </mat-slide-toggle>
+    </div>
+  </div>
+  <!-- START MINIMIZED -->
+  <div class="toggle">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <p> {{ "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_LABEL" | translate }} </p>
+        <small class="hint">{{ "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_DESCRIPTION" | translate }}</small>
+      </div>
+      <mat-slide-toggle [(ngModel)]="startMinimized" [(disabled)]="!startWithSystem" [(checked)]="startMinimized"
+        (change)="onStartMinimizedChange($event)" appUserActionTracker category="Options" action="StartMinimized"
+        [label]="startMinimized">
+      </mat-slide-toggle>
+    </div>
+  </div>
+</div>

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;
+  }
+}

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<OptionsAppSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OptionsAppSectionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OptionsAppSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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();
+    });
+  };
+}

wowup-electron/src/app/components/options-debug-section/options-debug-section.component.html

@@ -0,0 +1,35 @@
+<div class="container">
+  <h2>
+    {{ "PAGES.OPTIONS.DEBUG.TITLE" | translate }}
+  </h2>
+  <!-- SHOW LOG FILES -->
+  <div class="section">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <div>{{ "PAGES.OPTIONS.DEBUG.LOG_FILES_LABEL" | translate }}</div>
+        <small class="hint">{{ "PAGES.OPTIONS.DEBUG.LOG_FILES_DESCRIPTION" | translate }}</small>
+      </div>
+      <div>
+        <button mat-flat-button color="primary" (click)="onShowLogs()" appUserActionTracker category="Options"
+          action="ShowLogFiles">
+          {{ "PAGES.OPTIONS.DEBUG.LOG_FILES_BUTTON" | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- DUMP DEBUG DATA -->
+  <div class="section">
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        <div>{{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_LABEL" | translate }}</div>
+        <small class="hint">{{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_DESCRIPTION" | translate }}</small>
+      </div>
+      <div>
+        <button mat-flat-button color="primary" (click)="onLogDebugData()" appUserActionTracker category="Options"
+          action="LogDebugData">
+          {{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_BUTTON" | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

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;
+  }
+}

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<OptionsDebugSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OptionsDebugSectionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OptionsDebugSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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();
+  }
+}

wowup-electron/src/app/components/options-wow-section/options-wow-section.component.html

@@ -0,0 +1,18 @@
+<div class="container">
+  <h2>
+    {{ "PAGES.OPTIONS.WOW.TITLE" | translate }}
+  </h2>
+  <div>
+    <div class="row align-items-center">
+      <div class="flex-grow-1">
+        {{ "PAGES.OPTIONS.WOW.RESCAN_CLIENTS_LABEL" | translate }}
+      </div>
+      <button mat-flat-button color="primary" (click)="onReScan()" appUserActionTracker category="Options"
+        action="ScanInstalls">
+        {{ "PAGES.OPTIONS.WOW.RESCAN_CLIENTS_BUTTON" | translate }}
+      </button>
+    </div>
+    <app-wow-client-options class="client-section" *ngFor="let clientType of wowClientTypes" [clientType]="clientType">
+    </app-wow-client-options>
+  </div>
+</div>

wowup-electron/src/app/components/options-wow-section/options-wow-section.component.scss

@@ -0,0 +1,5 @@
+@import "../../../variables.scss";
+
+.container {
+  padding: 1em;
+}

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<OptionsWowSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OptionsWowSectionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OptionsWowSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+  }
+}

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 {}

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,

wowup-electron/src/app/pages/options/options.component.html

@@ -1,220 +1,36 @@
-<div
-  class="tab-container"
-  [ngClass]="{
+<div class="tab-container" [ngClass]="{
     mac: electronService.isMac,
     windows: electronService.isWin,
     linux: electronService.isLinux
-  }"
->
-  <div class="options">
-    <mat-card class="option-card">
-      <mat-card-header>
-        <mat-card-title>{{
-          "PAGES.OPTIONS.WOW.TITLE" | translate
-        }}</mat-card-title>
-      </mat-card-header>
-      <mat-card-content>
-        <div class="row">
-          <div class="grow">
-            {{ "PAGES.OPTIONS.WOW.RESCAN_CLIENTS_LABEL" | translate }}
-          </div>
-          <button
-            mat-flat-button
-            color="primary"
-            (click)="onReScan()"
-            appUserActionTracker
-            category="Options"
-            action="ScanInstalls"
-          >
-            {{ "PAGES.OPTIONS.WOW.RESCAN_CLIENTS_BUTTON" | translate }}
-          </button>
+  }">
+  <div class="nav-container">
+    <div class="nav-item-container">
+      <div class="nav-item-list-wrap">
+        <div class="nav-item-list">
+          <mat-action-list>
+            <button mat-list-item (click)="optionTabIndex = 0"> World of Warcraft </button>
+            <button mat-list-item (click)="optionTabIndex = 1"> Application </button>
+            <button mat-list-item (click)="optionTabIndex = 2"> Debug </button>
+          </mat-action-list>
         </div>
-        <app-wow-client-options
-          class="client-section"
-          *ngFor="let clientType of wowClientTypes"
-          [clientType]="clientType"
-        ></app-wow-client-options>
-      </mat-card-content>
-    </mat-card>
-    <mat-card class="option-card">
-      <mat-card-header>
-        <mat-card-title>{{
-          "PAGES.OPTIONS.APPLICATION.TITLE" | translate
-        }}</mat-card-title>
-      </mat-card-header>
-      <mat-card-content>
-        <div class="row">
-          <div class="grow">
-            <p>{{ "PAGES.OPTIONS.APPLICATION.TELEMETRY_LABEL" | translate }}</p>
-            <small class="hint">{{
-              "PAGES.OPTIONS.APPLICATION.TELEMETRY_DESCRIPTION" | translate
-            }}</small>
-          </div>
-          <mat-slide-toggle
-            [checked]="telemetryEnabled"
-            (change)="onTelemetryChange($event)"
-          ></mat-slide-toggle>
+      </div>
+    </div>
+    <div class="nav-content-container">
+      <div class="nav-content-wrap">
+        <div class="nav-content">
+          <mat-tab-group class="no-tabs  content-tab" animationDuration="0ms" [(selectedIndex)]="optionTabIndex">
+            <mat-tab label="WorldOfWarcraft" class="tab">
+              <app-options-wow-section></app-options-wow-section>
+            </mat-tab>
+            <mat-tab label="Application">
+              <app-options-app-section></app-options-app-section>
+            </mat-tab>
+            <mat-tab label="Debug">
+              <app-options-debug-section></app-options-debug-section>
+            </mat-tab>
+          </mat-tab-group>
         </div>
-        <div class="row">
-          <div class="grow">
-            <p>
-              {{
-                "PAGES.OPTIONS.APPLICATION.MINIMIZE_ON_CLOSE_LABEL" | translate
-              }}
-            </p>
-            <small class="hint">{{ minimizeOnCloseDescription }}</small>
-          </div>
-          <mat-slide-toggle
-            [(checked)]="collapseToTray"
-            (change)="onCollapseChange($event)"
-            appUserActionTracker
-            category="Options"
-            action="CollapseToTray"
-            [label]="collapseToTray"
-          >
-          </mat-slide-toggle>
-        </div>
-        <div class="row">
-          <div class="grow">
-            <p>
-              {{
-                "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_LABEL"
-                  | translate
-              }}
-            </p>
-            <small class="hint">
-              {{
-                "PAGES.OPTIONS.APPLICATION.ENABLE_SYSTEM_NOTIFICATIONS_DESCRIPTION"
-                  | translate
-              }}
-            </small>
-          </div>
-          <mat-slide-toggle
-            [checked]="wowupService.enableSystemNotifications"
-            (change)="onEnableSystemNotifications($event)"
-            appUserActionTracker
-            category="Options"
-            action="EnableSystemNotifications"
-            [label]="wowupService.enableSystemNotifications"
-          >
-          </mat-slide-toggle>
-        </div>
-        <div class="row hover">
-          <div class="grow">
-            <p>
-              {{
-                "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_LABEL"
-                  | translate
-              }}
-            </p>
-            <small class="hint">{{
-              "PAGES.OPTIONS.APPLICATION.USE_HARDWARE_ACCELERATION_DESCRIPTION"
-                | translate
-            }}</small>
-          </div>
-          <mat-slide-toggle
-            [(checked)]="useHardwareAcceleration"
-            (change)="onUseHardwareAccelerationChange($event)"
-            appUserActionTracker
-            category="Options"
-            action="UseHardwareAcceleration"
-            [label]="useHardwareAcceleration"
-          >
-          </mat-slide-toggle>
-        </div>
-        <div class="row hover">
-          <div class="grow">
-            <p>
-              {{
-                "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_LABEL" | translate
-              }}
-            </p>
-            <small class="hint">{{
-              "PAGES.OPTIONS.APPLICATION.START_WITH_SYSTEM_DESCRIPTION"
-                | translate
-            }}</small>
-          </div>
-          <mat-slide-toggle
-            [(ngModel)]="startWithSystem"
-            [(checked)]="startWithSystem"
-            (change)="onStartWithSystemChange($event)"
-            appUserActionTracker
-            category="Options"
-            action="StartWithSystem"
-            [label]="startWithSystem"
-          >
-          </mat-slide-toggle>
-        </div>
-        <div class="row hover">
-          <div class="grow">
-            <p>
-              {{
-                "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_LABEL" | translate
-              }}
-            </p>
-            <small class="hint">{{
-              "PAGES.OPTIONS.APPLICATION.START_MINIMIZED_DESCRIPTION"
-                | translate
-            }}</small>
-          </div>
-          <mat-slide-toggle
-            [(ngModel)]="startMinimized"
-            [(disabled)]="!startWithSystem"
-            [(checked)]="startMinimized"
-            (change)="onStartMinimizedChange($event)"
-            appUserActionTracker
-            category="Options"
-            action="StartMinimized"
-            [label]="startMinimized"
-          >
-          </mat-slide-toggle>
-        </div>
-      </mat-card-content>
-    </mat-card>
-    <mat-card class="option-card">
-      <mat-card-header>
-        <mat-card-title>{{
-          "PAGES.OPTIONS.DEBUG.TITLE" | translate
-        }}</mat-card-title>
-      </mat-card-header>
-      <mat-card-content>
-        <div class="row">
-          <div class="grow">
-            <p>{{ "PAGES.OPTIONS.DEBUG.LOG_FILES_LABEL" | translate }}</p>
-            <small class="hint">{{
-              "PAGES.OPTIONS.DEBUG.LOG_FILES_DESCRIPTION" | translate
-            }}</small>
-          </div>
-          <button
-            mat-flat-button
-            color="primary"
-            (click)="onShowLogs()"
-            appUserActionTracker
-            category="Options"
-            action="ShowLogFiles"
-          >
-            {{ "PAGES.OPTIONS.DEBUG.LOG_FILES_BUTTON" | translate }}
-          </button>
-        </div>
-        <div class="row">
-          <div class="grow">
-            <p>{{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_LABEL" | translate }}</p>
-            <small class="hint">{{
-              "PAGES.OPTIONS.DEBUG.DEBUG_DATA_DESCRIPTION" | translate
-            }}</small>
-          </div>
-          <button
-            mat-flat-button
-            color="primary"
-            (click)="onLogDebugData()"
-            appUserActionTracker
-            category="Options"
-            action="LogDebugData"
-          >
-            {{ "PAGES.OPTIONS.DEBUG.DEBUG_DATA_BUTTON" | translate }}
-          </button>
-        </div>
-      </mat-card-content>
-    </mat-card>
+      </div>
+    </div>
   </div>
-</div>
+</div>

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;

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 {}
 }

wowup-electron/src/styles.scss

@@ -396,3 +396,11 @@ img {
     background: $blue-1 !important;
   }
 }
+
+.no-tabs {
+  &.mat-tab-group {
+    .mat-tab-header {
+      display: none;
+    }
+  }
+}