From ee06f99e2510c2ed4675fe8094e8cd65e4cffa47 Mon Sep 17 00:00:00 2001 From: john liddell Date: Thu, 3 Sep 2020 22:55:46 -0500 Subject: [PATCH] custom title bar better layout --- wowup-electron/.vscode/launch.json | 17 +++++++++ wowup-electron/main.ts | 3 +- wowup-electron/package.json | 10 ++--- wowup-electron/src/app/app.component.html | 8 +++- wowup-electron/src/app/app.component.scss | 11 ++++++ wowup-electron/src/app/app.module.ts | 4 ++ .../components/footer/footer.component.html | 6 +++ .../components/footer/footer.component.scss | 18 +++++++++ .../footer/footer.component.spec.ts | 25 ++++++++++++ .../app/components/footer/footer.component.ts | 15 ++++++++ .../titlebar/titlebar.component.html | 3 ++ .../titlebar/titlebar.component.scss | 10 +++++ .../titlebar/titlebar.component.spec.ts | 25 ++++++++++++ .../components/titlebar/titlebar.component.ts | 21 ++++++++++ .../services/warcraft/warcraft.service.mac.ts | 4 +- .../services/warcraft/warcraft.service.ts | 2 +- .../src/app/home/home.component.html | 14 ------- .../src/app/home/home.component.scss | 17 --------- wowup-electron/src/main.ts | 14 ++++--- wowup-electron/src/styles.scss | 18 +++++++++ wowup-electron/src/titlebar.ts | 38 +++++++++++++++++++ wowup-electron/src/tsconfig.app.json | 2 +- wowup-electron/src/tsconfig.base.json | 32 ++++++++++++++++ 23 files changed, 269 insertions(+), 48 deletions(-) create mode 100644 wowup-electron/.vscode/launch.json create mode 100644 wowup-electron/src/app/components/footer/footer.component.html create mode 100644 wowup-electron/src/app/components/footer/footer.component.scss create mode 100644 wowup-electron/src/app/components/footer/footer.component.spec.ts create mode 100644 wowup-electron/src/app/components/footer/footer.component.ts create mode 100644 wowup-electron/src/app/components/titlebar/titlebar.component.html create mode 100644 wowup-electron/src/app/components/titlebar/titlebar.component.scss create mode 100644 wowup-electron/src/app/components/titlebar/titlebar.component.spec.ts create mode 100644 wowup-electron/src/app/components/titlebar/titlebar.component.ts create mode 100644 wowup-electron/src/titlebar.ts create mode 100644 wowup-electron/src/tsconfig.base.json diff --git a/wowup-electron/.vscode/launch.json b/wowup-electron/.vscode/launch.json new file mode 100644 index 00000000..ef3f9b3e --- /dev/null +++ b/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" + } + ] + } \ No newline at end of file diff --git a/wowup-electron/main.ts b/wowup-electron/main.ts index 11387640..4afbb26d 100644 --- a/wowup-electron/main.ts +++ b/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 diff --git a/wowup-electron/package.json b/wowup-electron/package.json index b5fe0f77..1f0cc5c8 100644 --- a/wowup-electron/package.json +++ b/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", diff --git a/wowup-electron/src/app/app.component.html b/wowup-electron/src/app/app.component.html index 0680b43f..e0e0c411 100644 --- a/wowup-electron/src/app/app.component.html +++ b/wowup-electron/src/app/app.component.html @@ -1 +1,7 @@ - +
+ +
+ +
+ +
\ No newline at end of file diff --git a/wowup-electron/src/app/app.component.scss b/wowup-electron/src/app/app.component.scss index 89a6d1f2..1206a6e1 100644 --- a/wowup-electron/src/app/app.component.scss +++ b/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; + } } \ No newline at end of file diff --git a/wowup-electron/src/app/app.module.ts b/wowup-electron/src/app/app.module.ts index 32a4b91a..d3e05988 100644 --- a/wowup-electron/src/app/app.module.ts +++ b/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, diff --git a/wowup-electron/src/app/components/footer/footer.component.html b/wowup-electron/src/app/components/footer/footer.component.html new file mode 100644 index 00000000..60497ffe --- /dev/null +++ b/wowup-electron/src/app/components/footer/footer.component.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/wowup-electron/src/app/components/footer/footer.component.scss b/wowup-electron/src/app/components/footer/footer.component.scss new file mode 100644 index 00000000..95f5d9b3 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/wowup-electron/src/app/components/footer/footer.component.spec.ts b/wowup-electron/src/app/components/footer/footer.component.spec.ts new file mode 100644 index 00000000..a3c4af95 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FooterComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/wowup-electron/src/app/components/footer/footer.component.ts b/wowup-electron/src/app/components/footer/footer.component.ts new file mode 100644 index 00000000..c7a7ec50 --- /dev/null +++ b/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 { + } + +} diff --git a/wowup-electron/src/app/components/titlebar/titlebar.component.html b/wowup-electron/src/app/components/titlebar/titlebar.component.html new file mode 100644 index 00000000..b06d1046 --- /dev/null +++ b/wowup-electron/src/app/components/titlebar/titlebar.component.html @@ -0,0 +1,3 @@ +
+
WowUp.io
+
diff --git a/wowup-electron/src/app/components/titlebar/titlebar.component.scss b/wowup-electron/src/app/components/titlebar/titlebar.component.scss new file mode 100644 index 00000000..fee38bc1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/wowup-electron/src/app/components/titlebar/titlebar.component.spec.ts b/wowup-electron/src/app/components/titlebar/titlebar.component.spec.ts new file mode 100644 index 00000000..0e133424 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TitlebarComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TitlebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/wowup-electron/src/app/components/titlebar/titlebar.component.ts b/wowup-electron/src/app/components/titlebar/titlebar.component.ts new file mode 100644 index 00000000..a1b4ce74 --- /dev/null +++ b/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 { + } + +} diff --git a/wowup-electron/src/app/core/services/warcraft/warcraft.service.mac.ts b/wowup-electron/src/app/core/services/warcraft/warcraft.service.mac.ts index 9db00977..734ee30b 100644 --- a/wowup-electron/src/app/core/services/warcraft/warcraft.service.mac.ts +++ b/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"; diff --git a/wowup-electron/src/app/core/services/warcraft/warcraft.service.ts b/wowup-electron/src/app/core/services/warcraft/warcraft.service.ts index 5a89ea67..e1e7ce0c 100644 --- a/wowup-electron/src/app/core/services/warcraft/warcraft.service.ts +++ b/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"; diff --git a/wowup-electron/src/app/home/home.component.html b/wowup-electron/src/app/home/home.component.html index b9c36048..2a0e78eb 100644 --- a/wowup-electron/src/app/home/home.component.html +++ b/wowup-electron/src/app/home/home.component.html @@ -1,11 +1,3 @@ -
@@ -23,10 +15,4 @@
-
\ No newline at end of file diff --git a/wowup-electron/src/app/home/home.component.scss b/wowup-electron/src/app/home/home.component.scss index 32bb81f3..4df57d78 100644 --- a/wowup-electron/src/app/home/home.component.scss +++ b/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; - } -} \ No newline at end of file diff --git a/wowup-electron/src/main.ts b/wowup-electron/src/main.ts index 44759dca..9fdb500d 100644 --- a/wowup-electron/src/main.ts +++ b/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') diff --git a/wowup-electron/src/styles.scss b/wowup-electron/src/styles.scss index 0d5292cd..2e3b7416 100644 --- a/wowup-electron/src/styles.scss +++ b/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 { diff --git a/wowup-electron/src/titlebar.ts b/wowup-electron/src/titlebar.ts new file mode 100644 index 00000000..63361757 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/wowup-electron/src/tsconfig.app.json b/wowup-electron/src/tsconfig.app.json index 04d2af9c..5a7a8516 100644 --- a/wowup-electron/src/tsconfig.app.json +++ b/wowup-electron/src/tsconfig.app.json @@ -1,5 +1,5 @@ { - "extends": "../tsconfig.base.json", + "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "module": "es2015", diff --git a/wowup-electron/src/tsconfig.base.json b/wowup-electron/src/tsconfig.base.json new file mode 100644 index 00000000..ecccc879 --- /dev/null +++ b/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" + ] + } \ No newline at end of file