From cb1a05d58c6f0b98160a103f81041bcc893781a4 Mon Sep 17 00:00:00 2001 From: HorizonCode Date: Fri, 2 Jun 2023 12:22:28 +0200 Subject: [PATCH] titlebar fixes --- app.js | 3 +- preload/preload.js | 474 ++++++++++++++++++++++---------------------- ui/windowManager.js | 7 +- 3 files changed, 244 insertions(+), 240 deletions(-) diff --git a/app.js b/app.js index cd3cbf2..3efbf3c 100644 --- a/app.js +++ b/app.js @@ -1,5 +1,5 @@ const { app, BrowserWindow, ipcMain, dialog, Tray, Menu } = require('electron'); -const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main'); +const { setupTitlebar } = require('custom-electron-titlebar/main'); const windowManager = require('./ui/windowManager'); const osuUtil = require('./osuUtil'); const ezppUtil = require('./ezppUtil'); @@ -376,7 +376,6 @@ function createWindow() { win.loadFile('./html/index.html'); - attachTitlebarToWindow(win); win.webContents.setWindowOpenHandler(() => "deny"); win.webContents.on('did-finish-load', function () { if (win.webContents.getZoomFactor() != 0.9) diff --git a/preload/preload.js b/preload/preload.js index befa71c..337335a 100644 --- a/preload/preload.js +++ b/preload/preload.js @@ -1,256 +1,256 @@ const { ipcRenderer, shell } = require('electron'); -const { Titlebar, Color } = require('custom-electron-titlebar'); +const { Titlebar, TitlebarColor } = require('custom-electron-titlebar'); const appInfo = require('../appInfo'); -let titlebar; let currentPage = "loading"; let loggedIn = false; window.addEventListener('DOMContentLoaded', () => { - titlebar = new Titlebar({ - backgroundColor: Color.fromHex("#24283B"), - itemBackgroundColor: Color.fromHex("#121212"), - menu: null, - maximizable: false - }); + const titlebar = new Titlebar({ + backgroundColor: TitlebarColor.fromHex("#24283B"), + itemBackgroundColor: TitlebarColor.fromHex("#121212"), + menu: null, + enableMnemonics: false, + maximizable: false, + }); - titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`); + titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`); - const $ = require('jquery'); - const Swal = require('sweetalert2'); + const $ = require('jquery'); + const Swal = require('sweetalert2'); - $('#account-action').on('click', () => { - if (!loggedIn) { - changePage('login'); + $('#account-action').on('click', () => { + if (!loggedIn) { + changePage('login'); + } else { + $('#welcome-text').text(`Nice to see you!`); + $('#account-action').text('Click to login'); + $('.user-image').css('background-image', `url(https://a.ez-pp.farm/0)`) + loggedIn = false; + ipcRenderer.send("perform-logout"); + Swal.fire({ + title: 'See ya soon!', + text: "Successfully logged out!", + icon: 'success', + confirmButtonText: 'Okay' + }); + } + }); + + $('#action-cancel').on('click', () => { + if (!loggedIn) { + changePage('launch'); + } + }); + + let currentState; + $("#launch-btn").on('click', async () => { + switch (currentState) { + case "up-to-date": + $("#launch-btn").attr('disabled', true); + $('#launch-btn').html('Launching...'); + const result = await ipcRenderer.invoke("launch"); + if (!result) { + Swal.fire({ + title: 'Uh oh!', + text: "Something went wrong while launching!", + icon: 'error', + confirmButtonText: 'Okay' + }); + $("#launch-btn").attr('disabled', false); + $('#launch-btn').html('Launch'); } else { - $('#welcome-text').text(`Nice to see you!`); - $('#account-action').text('Click to login'); - $('.user-image').css('background-image', `url(https://a.ez-pp.farm/0)`) - loggedIn = false; - ipcRenderer.send("perform-logout"); - Swal.fire({ - title: 'See ya soon!', - text: "Successfully logged out!", - icon: 'success', - confirmButtonText: 'Okay' - }); + $("#launch-btn").attr('disabled', true); + $('#launch-btn').html('Running...'); } - }); - - $('#action-cancel').on('click', () => { - if (!loggedIn) { - changePage('launch'); - } - }); - - let currentState; - $("#launch-btn").on('click', async () => { - switch (currentState) { - case "up-to-date": - $("#launch-btn").attr('disabled', true); - $('#launch-btn').html('Launching...'); - const result = await ipcRenderer.invoke("launch"); - if (!result) { - Swal.fire({ - title: 'Uh oh!', - text: "Something went wrong while launching!", - icon: 'error', - confirmButtonText: 'Okay' - }); - $("#launch-btn").attr('disabled', false); - $('#launch-btn').html('Launch'); - } else { - $("#launch-btn").attr('disabled', true); - $('#launch-btn').html('Running...'); - } - break; - case "update-available": - $("#launch-btn").attr('disabled', true); - $('#launch-btn').html('Updating...'); - ipcRenderer.send("do-update"); - break; - case "missing-folder": - const responseData = await ipcRenderer.invoke('set-osu-dir'); - if (!responseData) - return; - if (responseData.validOsuDir) { - Swal.fire({ - title: 'Success!', - text: 'osu! folder set.', - icon: 'success', - confirmButtonText: 'Cool' - }) - $('#currentOsuPath').text(responseData.folderPath); - ipcRenderer.send("do-update-check"); - } else { - Swal.fire({ - title: 'Uh oh!', - text: 'The selected folder is not a osu! directory.', - icon: 'error', - confirmButtonText: 'Oops.. my bad!' - }) - } - break; - } - }); - - $("#action-login").on('click', async () => { - const username = $('#login-username').val(); - const password = $('#login-password').val(); - $("#action-login").attr('disabled', true); - $("#action-cancel").attr('disabled', true); - const responseData = await ipcRenderer.invoke('perform-login', { username, password }); - $("#action-login").attr('disabled', false); - $("#action-cancel").attr('disabled', false); - if (!responseData) - return; - if (responseData.code != 200) { - Swal.fire({ - title: 'Uh oh!', - text: responseData.message, - icon: 'error', - confirmButtonText: 'Oops.. my bad!' - }) - return; - } - $('#login-username').val(""); - $('#login-password').val(""); - $('#welcome-text').text(`Welcome back, ${responseData.user.name}!`); - $('#account-action').text('Not you?'); - $('.user-image').css('background-image', `url(https://a.ez-pp.farm/${responseData.user.id})`); - loggedIn = true; - changePage('launch'); - }) - - $("#change-folder-btn").on('click', async () => { + break; + case "update-available": + $("#launch-btn").attr('disabled', true); + $('#launch-btn').html('Updating...'); + ipcRenderer.send("do-update"); + break; + case "missing-folder": const responseData = await ipcRenderer.invoke('set-osu-dir'); if (!responseData) - return; + return; if (responseData.validOsuDir) { - Swal.fire({ - title: 'Success!', - text: 'osu! folder set.', - icon: 'success', - confirmButtonText: 'Cool' - }) - $('#currentOsuPath').text(responseData.folderPath); - ipcRenderer.send("do-update-check"); + Swal.fire({ + title: 'Success!', + text: 'osu! folder set.', + icon: 'success', + confirmButtonText: 'Cool' + }) + $('#currentOsuPath').text(responseData.folderPath); + ipcRenderer.send("do-update-check"); } else { - Swal.fire({ - title: 'Uh oh!', - text: 'The selected folder is not a osu! directory.', - icon: 'error', - confirmButtonText: 'Oops.. my bad!' - }) + Swal.fire({ + title: 'Uh oh!', + text: 'The selected folder is not a osu! directory.', + icon: 'error', + confirmButtonText: 'Oops.. my bad!' + }) } - }); - - ipcRenderer.on('config_update', (event, data) => { - if (data.osuPath) { - $('#currentOsuPath').text(data.osuPath); - } - }) - - ipcRenderer.on('launcher_update', async (event, data) => { - const res = await Swal.fire({ - title: 'Update available!', - text: `Version ${data.version} has been released!`, - icon: 'info', - showCancelButton: true, - confirmButtonText: 'Download', - cancelButtonText: 'Remind me later', - }); - if (res.isConfirmed) { - shell.openExternal(data.url); - } - }) - - ipcRenderer.on('account_update', (event, data) => { - switch (data.type) { - case "login-failed": - Swal.fire({ - title: 'Uh oh!', - text: data.message, - icon: 'error', - confirmButtonText: 'Okay' - }); - changePage("launch"); - break; - case "not-loggedin": - changePage("launch"); - break; - case "loggedin": - changePage("launch"); - $('#welcome-text').text(`Welcome back, ${data.user.name}!`); - $('#account-action').text('Not you?'); - $('.user-image').css('background-image', `url(https://a.ez-pp.farm/${data.user.id})`); - loggedIn = true; - break; - } - }) - - ipcRenderer.on('status_update', (event, status) => { - switch (status.type) { - case "up-to-date": - $("#launch-btn").attr('disabled', false); - $('#launch-btn').html('Launch'); - currentState = status.type; - break; - case "update-available": - $("#launch-btn").attr('disabled', false); - $('#launch-btn').html('Update'); - currentState = status.type; - break; - case "missing-folder": - $("#launch-btn").attr('disabled', false); - $('#launch-btn').html('set your osu! folder'); - currentState = status.type; - break; - case "error": - Swal.fire({ - title: 'Uh oh!', - text: status.message, - icon: 'error', - confirmButtonText: 'Okay' - }); - ipcRenderer.send("do-update-check"); - break; - case "info": - Swal.fire({ - title: 'Info!', - text: status.message, - icon: 'info', - confirmButtonText: 'Okay' - }); - break; - case "package-issue": - Swal.fire({ - title: 'Uh oh!', - text: status.message, - icon: 'error', - confirmButtonText: 'Okay' - }); - $("#launch-btn").attr('disabled', true); - $('#launch-btn').html('missing packages'); - break; - case "update-complete": - Swal.fire({ - title: 'Yaaay!', - text: "Your osu! client has been successfully updated!", - icon: 'success', - confirmButtonText: 'Thanks :3' - }); - ipcRenderer.send("do-update-check"); - break; - } - }) - - function changePage(page) { - $(`#${currentPage}-page`).fadeOut(50, "swing", () => { - $(`#${page}-page`).fadeIn(350); - }); - currentPage = page; + break; } + }); - // workaround for the dark theme - $('head').append($('')); + $("#action-login").on('click', async () => { + const username = $('#login-username').val(); + const password = $('#login-password').val(); + $("#action-login").attr('disabled', true); + $("#action-cancel").attr('disabled', true); + const responseData = await ipcRenderer.invoke('perform-login', { username, password }); + $("#action-login").attr('disabled', false); + $("#action-cancel").attr('disabled', false); + if (!responseData) + return; + if (responseData.code != 200) { + Swal.fire({ + title: 'Uh oh!', + text: responseData.message, + icon: 'error', + confirmButtonText: 'Oops.. my bad!' + }) + return; + } + $('#login-username').val(""); + $('#login-password').val(""); + $('#welcome-text').text(`Welcome back, ${responseData.user.name}!`); + $('#account-action').text('Not you?'); + $('.user-image').css('background-image', `url(https://a.ez-pp.farm/${responseData.user.id})`); + loggedIn = true; + changePage('launch'); + }) + + $("#change-folder-btn").on('click', async () => { + const responseData = await ipcRenderer.invoke('set-osu-dir'); + if (!responseData) + return; + if (responseData.validOsuDir) { + Swal.fire({ + title: 'Success!', + text: 'osu! folder set.', + icon: 'success', + confirmButtonText: 'Cool' + }) + $('#currentOsuPath').text(responseData.folderPath); + ipcRenderer.send("do-update-check"); + } else { + Swal.fire({ + title: 'Uh oh!', + text: 'The selected folder is not a osu! directory.', + icon: 'error', + confirmButtonText: 'Oops.. my bad!' + }) + } + }); + + ipcRenderer.on('config_update', (event, data) => { + if (data.osuPath) { + $('#currentOsuPath').text(data.osuPath); + } + }) + + ipcRenderer.on('launcher_update', async (event, data) => { + const res = await Swal.fire({ + title: 'Update available!', + text: `Version ${data.version} has been released!`, + icon: 'info', + showCancelButton: true, + confirmButtonText: 'Download', + cancelButtonText: 'Remind me later', + }); + if (res.isConfirmed) { + shell.openExternal(data.url); + } + }) + + ipcRenderer.on('account_update', (event, data) => { + switch (data.type) { + case "login-failed": + Swal.fire({ + title: 'Uh oh!', + text: data.message, + icon: 'error', + confirmButtonText: 'Okay' + }); + changePage("launch"); + break; + case "not-loggedin": + changePage("launch"); + break; + case "loggedin": + changePage("launch"); + $('#welcome-text').text(`Welcome back, ${data.user.name}!`); + $('#account-action').text('Not you?'); + $('.user-image').css('background-image', `url(https://a.ez-pp.farm/${data.user.id})`); + loggedIn = true; + break; + } + }) + + ipcRenderer.on('status_update', (event, status) => { + switch (status.type) { + case "up-to-date": + $("#launch-btn").attr('disabled', false); + $('#launch-btn').html('Launch'); + currentState = status.type; + break; + case "update-available": + $("#launch-btn").attr('disabled', false); + $('#launch-btn').html('Update'); + currentState = status.type; + break; + case "missing-folder": + $("#launch-btn").attr('disabled', false); + $('#launch-btn').html('set your osu! folder'); + currentState = status.type; + break; + case "error": + Swal.fire({ + title: 'Uh oh!', + text: status.message, + icon: 'error', + confirmButtonText: 'Okay' + }); + ipcRenderer.send("do-update-check"); + break; + case "info": + Swal.fire({ + title: 'Info!', + text: status.message, + icon: 'info', + confirmButtonText: 'Okay' + }); + break; + case "package-issue": + Swal.fire({ + title: 'Uh oh!', + text: status.message, + icon: 'error', + confirmButtonText: 'Okay' + }); + $("#launch-btn").attr('disabled', true); + $('#launch-btn').html('missing packages'); + break; + case "update-complete": + Swal.fire({ + title: 'Yaaay!', + text: "Your osu! client has been successfully updated!", + icon: 'success', + confirmButtonText: 'Thanks :3' + }); + ipcRenderer.send("do-update-check"); + break; + } + }) + + function changePage(page) { + $(`#${currentPage}-page`).fadeOut(50, "swing", () => { + $(`#${page}-page`).fadeIn(350); + }); + currentPage = page; + } + + // workaround for the dark theme + $('head').append($('')); }) \ No newline at end of file diff --git a/ui/windowManager.js b/ui/windowManager.js index 183a778..8b1ade6 100644 --- a/ui/windowManager.js +++ b/ui/windowManager.js @@ -1,6 +1,6 @@ const path = require("path"); const appInfo = require('../appInfo'); -const { BrowserWindow } = require('electron'); +const { BrowserWindow, Menu } = require('electron'); const { attachTitlebarToWindow } = require('custom-electron-titlebar/main'); module.exports = { @@ -26,6 +26,10 @@ module.exports = { }, icon: './assets/logo.png' }) + + const menu = Menu.buildFromTemplate([]) + Menu.setApplicationMenu(menu); + window.hide(); window.webContents.once("did-finish-load", function (event, input) { @@ -33,6 +37,7 @@ module.exports = { }); window.webContents.setUserAgent(`${appInfo.appName} ${appInfo.appVersion}`); + attachTitlebarToWindow(window); return window;