From 5b68b7a86bd0ea33de0306c0b5500d7e23490548 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 17:40:07 +0000 Subject: [PATCH 1/8] Code style --- .../electron-plugin/src/server/api/menuBar.ts | 197 +++++++++--------- 1 file changed, 99 insertions(+), 98 deletions(-) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index 45c63273..0bb0f7e8 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -9,138 +9,139 @@ import { join } from "path"; const router = express.Router(); router.post("/label", (req, res) => { - res.sendStatus(200); + res.sendStatus(200); - const { label } = req.body; + const { label } = req.body; - state.activeMenuBar.tray.setTitle(label); + state.activeMenuBar.tray.setTitle(label); }); router.post("/context-menu", (req, res) => { - res.sendStatus(200); - const { contextMenu } = req.body; - - state.activeMenuBar.tray.setContextMenu(buildMenu(contextMenu)); + res.sendStatus(200); + + const { contextMenu } = req.body; + + state.activeMenuBar.tray.setContextMenu(buildMenu(contextMenu)); }); router.post("/show", (req, res) => { - res.sendStatus(200); + res.sendStatus(200); - state.activeMenuBar.showWindow(); + state.activeMenuBar.showWindow(); }); router.post("/hide", (req, res) => { - res.sendStatus(200); + res.sendStatus(200); - state.activeMenuBar.hideWindow(); + state.activeMenuBar.hideWindow(); }); router.post("/create", (req, res) => { - res.sendStatus(200); - - const { - width, - height, - url, - label, - alwaysOnTop, - vibrancy, - backgroundColor, - transparency, - icon, - showDockIcon, - onlyShowContextWindow, - windowPosition, - contextMenu - } = req.body; - - if (onlyShowContextWindow === true) { - const tray = new Tray(icon || state.icon.replace("icon.png", "IconTemplate.png")); - tray.setContextMenu(buildMenu(contextMenu)); - - state.activeMenuBar = menubar({ - tray, - index: false, - showDockIcon, - showOnAllWorkspaces: false, - browserWindow: { - show: false, - width: 0, - height: 0, - } - }); + res.sendStatus(200); - } else { - state.activeMenuBar = menubar({ - icon: icon || state.icon.replace("icon.png", "IconTemplate.png"), - index: url, - showDockIcon, - showOnAllWorkspaces: false, - windowPosition: windowPosition ?? "trayCenter", - browserWindow: { + const { width, height, + url, + label, alwaysOnTop, vibrancy, backgroundColor, - transparent: transparency, - webPreferences: { - nodeIntegration: true, - sandbox: false, - contextIsolation: false - } - } - }); - state.activeMenuBar.on("after-create-window", () => { - require("@electron/remote/main").enable(state.activeMenuBar.window.webContents); - }); - } + transparency, + icon, + showDockIcon, + onlyShowContextWindow, + windowPosition, + contextMenu, + } = req.body; + + if (onlyShowContextWindow) { + const tray = new Tray(icon || state.icon.replace("icon.png", "IconTemplate.png")); + tray.setContextMenu(buildMenu(contextMenu)); + + state.activeMenuBar = menubar({ + tray, + index: false, + showDockIcon, + showOnAllWorkspaces: false, + browserWindow: { + show: false, + width: 0, + height: 0, + } + }); + } else { + state.activeMenuBar = menubar({ + icon: icon || state.icon.replace("icon.png", "IconTemplate.png"), + index: url, + showDockIcon, + showOnAllWorkspaces: false, + windowPosition: windowPosition ?? "trayCenter", + browserWindow: { + width, + height, + alwaysOnTop, + vibrancy, + backgroundColor, + transparent: transparency, + webPreferences: { + nodeIntegration: true, + sandbox: false, + contextIsolation: false, + } + } + }); - state.activeMenuBar.on("ready", () => { - state.activeMenuBar.tray.setTitle(label); + state.activeMenuBar.on("after-create-window", () => { + require("@electron/remote/main").enable(state.activeMenuBar.window.webContents); + }); + } - state.activeMenuBar.on("hide", () => { - notifyLaravel("events", { - event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarHidden" - }); - }); + state.activeMenuBar.on("ready", () => { + state.activeMenuBar.tray.setTitle(label); - state.activeMenuBar.on("show", () => { - notifyLaravel("events", { - event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarShown" - }); - }); + state.activeMenuBar.on("hide", () => { + notifyLaravel("events", { + event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarHidden" + }); + }); - state.activeMenuBar.tray.on("drop-files", (event, files) => { - notifyLaravel("events", { - event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarDroppedFiles", - payload: [ - files - ] - }); - }); + state.activeMenuBar.on("show", () => { + notifyLaravel("events", { + event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarShown" + }); + }); - if (onlyShowContextWindow !== true) { - state.activeMenuBar.tray.on("right-click", () => { - notifyLaravel("events", { - event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarContextMenuOpened" + state.activeMenuBar.tray.on("drop-files", (event, files) => { + notifyLaravel("events", { + event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarDroppedFiles", + payload: [ + files + ] + }); }); - state.activeMenuBar.tray.popUpContextMenu(buildMenu(contextMenu)); - }); - } - }); + if (! onlyShowContextWindow) { + state.activeMenuBar.tray.on("right-click", () => { + notifyLaravel("events", { + event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarContextMenuOpened" + }); + + state.activeMenuBar.tray.popUpContextMenu(buildMenu(contextMenu)); + }); + } + }); }); function buildMenu(contextMenu) { - let menu = Menu.buildFromTemplate([{ role: "quit" }]); + let menu = Menu.buildFromTemplate([{ role: "quit" }]); - if (contextMenu) { - const menuEntries = contextMenu.map(mapMenu); - menu = Menu.buildFromTemplate(menuEntries); - } + if (contextMenu) { + const menuEntries = contextMenu.map(mapMenu); + menu = Menu.buildFromTemplate(menuEntries); + } - return menu; + return menu; } export default router; From 835655be9e53a44226928ec46d0faa053252438a Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 17:41:53 +0000 Subject: [PATCH 2/8] Fix variable name --- resources/js/electron-plugin/src/server/api/menuBar.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index 0bb0f7e8..4e640248 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -50,12 +50,12 @@ router.post("/create", (req, res) => { transparency, icon, showDockIcon, - onlyShowContextWindow, + onlyShowContextMenu, windowPosition, contextMenu, } = req.body; - if (onlyShowContextWindow) { + if (onlyShowContextMenu) { const tray = new Tray(icon || state.icon.replace("icon.png", "IconTemplate.png")); tray.setContextMenu(buildMenu(contextMenu)); @@ -121,7 +121,7 @@ router.post("/create", (req, res) => { }); }); - if (! onlyShowContextWindow) { + if (! onlyShowContextMenu) { state.activeMenuBar.tray.on("right-click", () => { notifyLaravel("events", { event: "\\Native\\Laravel\\Events\\MenuBar\\MenuBarContextMenuOpened" From 1fe4c5d5e59d5c015cf0bdba60de2132af4ad806 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 17:42:20 +0000 Subject: [PATCH 3/8] Add tooltip support --- .../js/electron-plugin/src/server/api/menuBar.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index 4e640248..e4fff967 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -16,6 +16,14 @@ router.post("/label", (req, res) => { state.activeMenuBar.tray.setTitle(label); }); +router.post("/tooltip", (req, res) => { + res.sendStatus(200); + + const { tooltip } = req.body; + + state.activeMenuBar.tray.setToolTip(tooltip); +}); + router.post("/context-menu", (req, res) => { res.sendStatus(200); @@ -53,6 +61,7 @@ router.post("/create", (req, res) => { onlyShowContextMenu, windowPosition, contextMenu, + tooltip, } = req.body; if (onlyShowContextMenu) { @@ -61,6 +70,7 @@ router.post("/create", (req, res) => { state.activeMenuBar = menubar({ tray, + tooltip, index: false, showDockIcon, showOnAllWorkspaces: false, @@ -73,6 +83,7 @@ router.post("/create", (req, res) => { } else { state.activeMenuBar = menubar({ icon: icon || state.icon.replace("icon.png", "IconTemplate.png"), + tooltip, index: url, showDockIcon, showOnAllWorkspaces: false, From cbc4c2eb4d145808e3e3bae7fe8d04957f7f03a7 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 17:42:43 +0000 Subject: [PATCH 4/8] Add resizable option --- resources/js/electron-plugin/src/server/api/menuBar.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index e4fff967..c8df7ab6 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -62,6 +62,7 @@ router.post("/create", (req, res) => { windowPosition, contextMenu, tooltip, + resizable, } = req.body; if (onlyShowContextMenu) { @@ -91,6 +92,7 @@ router.post("/create", (req, res) => { browserWindow: { width, height, + resizable, alwaysOnTop, vibrancy, backgroundColor, From e66da541cc3066f1c008cc2e44049649801daf1e Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 17:42:52 +0000 Subject: [PATCH 5/8] Add icon change support --- resources/js/electron-plugin/src/server/api/menuBar.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index c8df7ab6..aa77a8b0 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -24,6 +24,14 @@ router.post("/tooltip", (req, res) => { state.activeMenuBar.tray.setToolTip(tooltip); }); +router.post("/icon", (req, res) => { + res.sendStatus(200); + + const { icon } = req.body; + + state.activeMenuBar.tray.setImage(icon); +}); + router.post("/context-menu", (req, res) => { res.sendStatus(200); From d95885cc996617fed35e0aeaf87f9b317a0b7deb Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 17:43:08 +0000 Subject: [PATCH 6/8] Preload window for UX --- resources/js/electron-plugin/src/server/api/menuBar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index aa77a8b0..88067bc9 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -92,6 +92,7 @@ router.post("/create", (req, res) => { } else { state.activeMenuBar = menubar({ icon: icon || state.icon.replace("icon.png", "IconTemplate.png"), + preloadWindow: true, tooltip, index: url, showDockIcon, From 1644dd41abcd7008d97bbaaa76d181266fc3e324 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 17:44:15 +0000 Subject: [PATCH 7/8] Add standard window preload script This makes the menubar window work just like other windows --- resources/js/electron-plugin/src/server/api/menuBar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index 88067bc9..2faffab0 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -107,6 +107,7 @@ router.post("/create", (req, res) => { backgroundColor, transparent: transparency, webPreferences: { + preload: join(__dirname, '../../electron-plugin/dist/preload/index.js'), nodeIntegration: true, sandbox: false, contextIsolation: false, From 0c4db5d504b84756899b99e880b2475f6ec26ac0 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Thu, 14 Nov 2024 18:05:11 +0000 Subject: [PATCH 8/8] Support custom event on click --- .../js/electron-plugin/src/server/api/menuBar.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/resources/js/electron-plugin/src/server/api/menuBar.ts b/resources/js/electron-plugin/src/server/api/menuBar.ts index 2faffab0..b6c7472f 100644 --- a/resources/js/electron-plugin/src/server/api/menuBar.ts +++ b/resources/js/electron-plugin/src/server/api/menuBar.ts @@ -71,12 +71,23 @@ router.post("/create", (req, res) => { contextMenu, tooltip, resizable, + event, } = req.body; if (onlyShowContextMenu) { const tray = new Tray(icon || state.icon.replace("icon.png", "IconTemplate.png")); + tray.setContextMenu(buildMenu(contextMenu)); + if (event) { + tray.on('click', (e) => { + notifyLaravel('events', { + event, + payload: e, + }); + }); + } + state.activeMenuBar = menubar({ tray, tooltip,