From 4b1106358ee29ea85cb8693f0ae833b7e138407e Mon Sep 17 00:00:00 2001 From: HerozDotExe <66215011+HerozDotExe@users.noreply.github.com> Date: Sat, 14 Dec 2024 20:45:57 +0100 Subject: [PATCH] feat: implement custom titlebar --- src/main/index.ts | 25 ++++++++++++++++--- src/renderer/src/App.svelte | 9 ++++++- src/renderer/src/app.css | 5 ++++ .../src/lib/components/TaskBar/Control.svelte | 17 +++++++++++++ .../src/lib/components/TaskBar/TaskBar.svelte | 19 ++++++++++++++ src/renderer/src/lib/taskbar.json | 6 +++++ 6 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 src/renderer/src/lib/components/TaskBar/Control.svelte create mode 100644 src/renderer/src/lib/components/TaskBar/TaskBar.svelte create mode 100644 src/renderer/src/lib/taskbar.json diff --git a/src/main/index.ts b/src/main/index.ts index bb426ae..c0bc9d2 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -4,18 +4,21 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils' import icon from '../../resources/icon.png?asset' import fs from 'fs/promises' +let mainWindow: BrowserWindow + function createWindow(): void { // Create the browser window. - const mainWindow = new BrowserWindow({ + mainWindow = new BrowserWindow({ width: 900, - height: 670, + height: 702, show: false, autoHideMenuBar: true, ...(process.platform === 'linux' ? { icon } : {}), webPreferences: { preload: join(__dirname, '../preload/index.mjs'), sandbox: false - } + }, + frame: false }) mainWindow.on('ready-to-show', () => { @@ -80,6 +83,22 @@ app.whenReady().then(() => { ipcMain.handle('error', (_, msg) => { dialog.showErrorBox("Error", msg) }) + + ipcMain.on('minimize', () => { + mainWindow.minimize() + }) + + ipcMain.on('toggleSize', () => { + if (mainWindow.isMaximized()) { + mainWindow.restore() + } else { + mainWindow.maximize() + } + }) + + ipcMain.on('close', () => { + app.exit() + }) }) // Quit when all windows are closed, except on macOS. There, it's common diff --git a/src/renderer/src/App.svelte b/src/renderer/src/App.svelte index e88f94a..563bc02 100644 --- a/src/renderer/src/App.svelte +++ b/src/renderer/src/App.svelte @@ -1,5 +1,12 @@ - +
+ +
+ +
+ +
diff --git a/src/renderer/src/app.css b/src/renderer/src/app.css index 484e247..fb568d7 100644 --- a/src/renderer/src/app.css +++ b/src/renderer/src/app.css @@ -2,6 +2,11 @@ @tailwind components; @tailwind utilities; +html, body, #app { + margin: 0; + height: 100%; +} + @layer base { :root { --background: 0 0% 100%; diff --git a/src/renderer/src/lib/components/TaskBar/Control.svelte b/src/renderer/src/lib/components/TaskBar/Control.svelte new file mode 100644 index 0000000..89aafd6 --- /dev/null +++ b/src/renderer/src/lib/components/TaskBar/Control.svelte @@ -0,0 +1,17 @@ + + +
+
+ {@html icon} +
+
diff --git a/src/renderer/src/lib/components/TaskBar/TaskBar.svelte b/src/renderer/src/lib/components/TaskBar/TaskBar.svelte new file mode 100644 index 0000000..c1f787b --- /dev/null +++ b/src/renderer/src/lib/components/TaskBar/TaskBar.svelte @@ -0,0 +1,19 @@ + + +
+

+ Moss +

+
+ +
+ window.electron.ipcRenderer.send("minimize")}> + window.electron.ipcRenderer.send("toggleSize")}> + window.electron.ipcRenderer.send("close")} isClose={true}> +
diff --git a/src/renderer/src/lib/taskbar.json b/src/renderer/src/lib/taskbar.json new file mode 100644 index 0000000..15846c1 --- /dev/null +++ b/src/renderer/src/lib/taskbar.json @@ -0,0 +1,6 @@ +{ + "minimize": "", + "maximize": "", + "restore": "", + "close": "" +}