custom title bar

better layout

wowup-electron/.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Debug Main Process",
+        "type": "node",
+        "request": "launch",
+        "cwd": "${workspaceFolder}",
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+        "windows": {
+          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+        },
+        "args" : ["."],
+        "outputCapture": "std"
+      }
+    ]
+  }

wowup-electron/main.ts

@@ -52,7 +52,8 @@ function createWindow(): BrowserWindow {
       preload: path.join(__dirname, 'preload.js'),
       nodeIntegration: true,
       allowRunningInsecureContent: (serve) ? true : false,
-      webSecurity: false
+      webSecurity: false,
+      enableRemoteModule: true
     },
     minWidth: 900,
     minHeight: 550

wowup-electron/package.json

@@ -38,7 +38,7 @@
     "lint": "ng lint"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "9.2.0",
+    "@angular-builders/custom-webpack": "10.0.0",
     "@angular-eslint/builder": "0.0.1-alpha.32",
     "@angular-eslint/eslint-plugin": "0.0.1-alpha.32",
     "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32",
@@ -65,8 +65,8 @@
     "conventional-changelog-cli": "2.0.34",
     "core-js": "3.6.5",
     "cross-env": "7.0.2",
-    "electron": "9.1.1",
-    "electron-builder": "22.7.0",
+    "electron": "10.1.1",
+    "electron-builder": "22.8.0",
     "electron-reload": "1.5.0",
     "eslint": "7.4.0",
     "eslint-plugin-import": "2.22.0",
@@ -99,8 +99,8 @@
     "ag-grid-angular": "23.2.1",
     "ag-grid-community": "23.2.1",
     "conf": "7.1.1",
-    "custom-electron-titlebar": "3.2.3",
-    "electron-log": "4.2.2",
+    "custom-electron-titlebar": "3.2.4",
+    "electron-log": "4.2.4",
     "electron-store": "6.0.0",
     "lodash": "4.17.19",
     "node-disk-info": "1.1.0",

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

@@ -1 +1,7 @@
-<router-outlet></router-outlet>
+<div class="app">
+  <app-titlebar></app-titlebar>
+  <div class="content">
+    <router-outlet></router-outlet>
+  </div>
+  <app-footer></app-footer>
+</div>

wowup-electron/src/app/app.component.scss

@@ -1,3 +1,14 @@
 :host {
   
+}
+.app {
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        flex-grow: 1;
+        overflow: auto;
+    }
 }

wowup-electron/src/app/app.module.ts

@@ -23,6 +23,8 @@ import { AppComponent } from './app.component';
 import { DefaultHeadersInterceptor } from './core/interceptors/default-headers.interceptor';
 import { AddonTableColumnComponent } from './components/addon-table-column/addon-table-column.component';
 import { AddonStatusColumnComponent } from './components/addon-status-column/addon-status-column.component';
+import { TitlebarComponent } from './components/titlebar/titlebar.component';
+import { FooterComponent } from './components/footer/footer.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -34,6 +36,8 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     AppComponent,
     AddonTableColumnComponent,
     AddonStatusColumnComponent,
+    TitlebarComponent,
+    FooterComponent,
   ],
   imports: [
     BrowserModule,

wowup-electron/src/app/components/footer/footer.component.html

@@ -0,0 +1,6 @@
+<footer class="bg-dark-4 text-light-2">
+    <a appExternalLink href="https://www.patreon.com/jliddev">
+        <img class="patron-img" src="assets/patron.png" />
+    </a>
+    <div>v2.X.X</div>
+</footer>

wowup-electron/src/app/components/footer/footer.component.scss

@@ -0,0 +1,18 @@
+.patron-img {
+    height: 25px;
+}
+footer {
+    height: 25px;
+    padding: 0.25em 0.5em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    a, img {
+        height: 25px;
+    }
+
+    div {
+        font-size: 0.8em;
+    }
+}

wowup-electron/src/app/components/footer/footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

wowup-electron/src/app/components/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

wowup-electron/src/app/components/titlebar/titlebar.component.html

@@ -0,0 +1,3 @@
+<div class="titlebar-drag-region bg-purple-1 text-light" [ngClass]="{'titlebar-mac': isMac }">
+    <div class="row justify-content-center">WowUp.io</div>
+</div>

wowup-electron/src/app/components/titlebar/titlebar.component.scss

@@ -0,0 +1,10 @@
+.titlebar-mac {
+height: 22px;
+}
+.titlebar-win{
+height: 30px;
+}
+.titlebar-drag-region {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+}

wowup-electron/src/app/components/titlebar/titlebar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TitlebarComponent } from './titlebar.component';
+
+describe('TitlebarComponent', () => {
+  let component: TitlebarComponent;
+  let fixture: ComponentFixture<TitlebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TitlebarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TitlebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

wowup-electron/src/app/components/titlebar/titlebar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { platform } from 'os'
+
+@Component({
+  selector: 'app-titlebar',
+  templateUrl: './titlebar.component.html',
+  styleUrls: ['./titlebar.component.scss']
+})
+export class TitlebarComponent implements OnInit {
+
+  public isMac = platform() === 'darwin';
+  public isWindows = platform() === 'win32';
+  public isLinux = platform() === 'linux';
+  public userAgent = platform();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

wowup-electron/src/app/core/services/warcraft/warcraft.service.mac.ts

@@ -1,7 +1,7 @@
 import { WarcraftServiceImpl } from "./warcraft.service.impl";
 import { join } from 'path';
-import { FileUtils } from "app/core/utils/file.utils";
-import { WowClientType } from "app/models/warcraft/wow-client-type";
+import { FileUtils } from "../../utils/file.utils";
+import { WowClientType } from "../../../models/warcraft/wow-client-type";
 
 const BLIZZARD_AGENT_PATH = "/Users/Shared/Battle.net/Agent";
 const BLIZZARD_PRODUCT_DB_NAME = "product.db";

wowup-electron/src/app/core/services/warcraft/warcraft.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from "@angular/core";
 import { WarcraftServiceImpl } from "./warcraft.service.impl";
 import { WarcraftServiceWin } from "./warcraft.service.win";
-import { FileUtils } from "app/core/utils/file.utils";
+import { FileUtils } from "../../utils/file.utils";
 import { ProductDb } from "app/models/warcraft/product-db";
 import { InstalledProduct } from "app/models/warcraft/installed-product";
 import { from, BehaviorSubject } from "rxjs";

wowup-electron/src/app/home/home.component.html

@@ -1,11 +1,3 @@
-<!-- 
-<div class="container">
-  <h1 class="title">
-    {{ 'PAGES.HOME.TITLE' | translate }}
-  </h1>
-
-  <a routerLink="/detail">{{ 'PAGES.HOME.GO_TO_DETAIL' | translate }}</a>
-</div> -->
 <div class="page-container">
   <div class="tabs">
     <mat-tab-group mat-align-tabs="center" [backgroundColor]="'primary'">
@@ -23,10 +15,4 @@
       </mat-tab>
     </mat-tab-group>
   </div>
-  <footer>
-    <a appExternalLink href="https://www.patreon.com/jliddev">
-      <img class="patron-img" src="assets/patron.png" />
-    </a>
-    <div>v2.X.X</div>
-  </footer>
 </div>

wowup-electron/src/app/home/home.component.scss

@@ -24,20 +24,3 @@
     flex-grow: 1;
     overflow: hidden;
 }
-footer {
-    height: 25px;
-    padding: 0.25em 0.5em;
-    background-color: $dark-4;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: $white-2;
-
-    a, img {
-        height: 25px;
-    }
-
-    div {
-        font-size: 0.8em;
-    }
-}

wowup-electron/src/main.ts

@@ -1,9 +1,9 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { Titlebar, Color } from 'custom-electron-titlebar'
 
 import { AppModule } from './app/app.module';
 import { AppConfig } from './environments/environment';
+import { WowUpTitlebar} from './titlebar';
 
 if (AppConfig.production) {
   enableProdMode();
@@ -15,11 +15,13 @@ platformBrowserDynamic()
   })
   .catch(err => console.error(err));
 
-new Titlebar({
-  backgroundColor: Color.fromHex('#6B69D6'),
-  menu: null,
-  icon: '/assets/wowup_logo_512np.png'
-});
+  // new WowUpTitlebar();
+
+// new Titlebar({
+//   backgroundColor: Color.fromHex('#6B69D6'),
+//   menu: null,
+//   icon: '/assets/wowup_logo_512np.png'
+// });
 
 document.addEventListener('click', (evt: any) => {
   console.debug('CLICK')

wowup-electron/src/styles.scss

@@ -10,6 +10,21 @@ html {
 
 body {
   overflow: hidden;
+  margin: 0;
+}
+
+.bg-dark-4 {
+  background-color: $dark-4;
+}
+.bg-purple-1 {
+  background-color: $purple-1;
+}
+
+.text-light {
+  color: $white-1;
+}
+.text-light-2 {
+  color: $white-2;
 }
 
 .pre-load-container {
@@ -68,6 +83,9 @@ body {
   &.align-items-center {
     align-items: center;
   }
+  &.justify-content-center {
+    justify-content: center;
+  }
 }
 
 .ag-theme-balham {

wowup-electron/src/titlebar.ts

@@ -0,0 +1,38 @@
+const TOP_TITLEBAR_HEIGHT_MAC = '22px';
+const TOP_TITLEBAR_HEIGHT_WIN = '30px';
+
+export class WowUpTitlebar {
+
+    private readonly _userAgent = window.navigator.userAgent;
+    private readonly _isMac = this._userAgent.indexOf('Macintosh') >= 0;
+    private readonly _isWindows = this._userAgent.indexOf('Windows') >= 0;
+    private readonly _isLinux = this._userAgent.indexOf('Linux') >= 0;
+
+    private _container: HTMLDivElement;
+
+    constructor(){
+        this.createTitleBar();
+    }
+
+    private createTitleBar(){
+        this._container = this.createTitleBarContainer();
+
+        document.body.prepend(this._container);
+
+        document.body.style.overflow = 'hidden';
+        document.body.style.margin = '0';
+    }
+
+    private createTitleBarContainer(){
+        const container = document.createElement('div');
+        container.classList.add('container-after-titlebar');
+
+        container.style.top = this._isMac ? TOP_TITLEBAR_HEIGHT_MAC : TOP_TITLEBAR_HEIGHT_WIN;
+        container.style.bottom = '0px';
+        container.style.right = '0';
+        container.style.left = '0';
+        container.style.position = 'absolute';
+
+        return container;
+    }
+}

wowup-electron/src/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "module": "es2015",

wowup-electron/src/tsconfig.base.json

@@ -0,0 +1,32 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+      "module": "es2020",
+      "outDir": "./dist/out-tsc",
+      "sourceMap": true,
+      "declaration": false,
+      "moduleResolution": "node",
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "target": "es5",
+      "typeRoots": [
+        "node_modules/@types"
+      ],
+      "lib": [
+        "es2017",
+        "es2016",
+        "es2015",
+        "dom"
+      ]
+    },
+    "files": [
+      "src/main.ts",
+      "src/polyfills.ts"
+    ],
+    "include": [
+      "src/**/*.d.ts"
+    ],
+    "exclude": [
+      "node_modules"
+    ]
+  }