diff --git a/emain/emain.ts b/emain/emain.ts index 06af37da6..3bd5cc3e7 100644 --- a/emain/emain.ts +++ b/emain/emain.ts @@ -587,12 +587,16 @@ async function createNewWaveWindow() { electron.ipcMain.on("openNewWindow", () => fireAndForget(createNewWaveWindow)); -electron.ipcMain.on("contextmenu-show", (event, menuDefArr: ElectronContextMenuItem[], { x, y }) => { - if (menuDefArr == null || menuDefArr.length == 0) { +electron.ipcMain.on("contextmenu-show", (event, menuDefArr?: ElectronContextMenuItem[]) => { + const window = electron.BrowserWindow.fromWebContents(event.sender); + if (menuDefArr?.length === 0) { return; } - const menu = convertMenuDefArrToMenu(menuDefArr); - menu.popup({ x, y }); + const menu = menuDefArr ? convertMenuDefArrToMenu(menuDefArr) : getAppMenu(); + const { x, y } = electron.screen.getCursorScreenPoint(); + const windowPos = window.getPosition(); + + menu.popup({ window, x: x - windowPos[0], y: y - windowPos[1] }); event.returnValue = true; }); @@ -640,7 +644,7 @@ function convertMenuDefArrToMenu(menuDefArr: ElectronContextMenuItem[]): electro return electron.Menu.buildFromTemplate(menuItems); } -function makeAppMenu() { +function getAppMenu() { const fileMenu: Electron.MenuItemConstructorOptions[] = [ { label: "New Window", @@ -668,32 +672,29 @@ function makeAppMenu() { { type: "separator", }, - { - role: "services", - }, - { - type: "separator", - }, - { - label: "Toggle Menu Bar Visibility", - visible: unamePlatform != "darwin", - click: (_, window) => { - window.autoHideMenuBar = !window.autoHideMenuBar; - }, - }, - { - role: "hide", - }, - { - role: "hideOthers", - }, - { - type: "separator", - }, - { - role: "quit", - }, ]; + if (unamePlatform === "darwin") { + appMenu.push( + { + role: "services", + }, + { + type: "separator", + }, + { + role: "hide", + }, + { + role: "hideOthers", + }, + { + type: "separator", + } + ); + } + appMenu.push({ + role: "quit", + }); const viewMenu: Electron.MenuItemConstructorOptions[] = [ { role: "forceReload", @@ -776,8 +777,11 @@ function makeAppMenu() { submenu: windowMenu, }, ]; - const menu = electron.Menu.buildFromTemplate(menuTemplate); - electron.Menu.setApplicationMenu(menu); + return electron.Menu.buildFromTemplate(menuTemplate); +} + +function makeAppMenu() { + electron.Menu.setApplicationMenu(getAppMenu()); } electronApp.on("window-all-closed", () => { diff --git a/frontend/app/tab/tabbar.less b/frontend/app/tab/tabbar.less index 89d59edce..9ef501ee8 100644 --- a/frontend/app/tab/tabbar.less +++ b/frontend/app/tab/tabbar.less @@ -28,30 +28,19 @@ height: 33px; } - .dev-label { + .dev-label, + .app-menu-button { height: 100%; font-size: 26px; user-select: none; display: flex; align-items: center; justify-content: center; - margin-top: 2px; - color: var(--accent-color); + margin: 2px 2px 0 0; } - .prod-label { - font-size: 26px; - width: 1.25em; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - img { - height: 26px; - width: 26px; - margin-top: 4px; - } + .dev-label { + color: var(--accent-color); } .add-tab-btn { diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index 9f1e92daa..4b349e08e 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -3,13 +3,12 @@ import { WindowDrag } from "@/element/windowdrag"; import { deleteLayoutModelForTab } from "@/layout/index"; -import { atoms, getApi, isDev } from "@/store/global"; +import { atoms, getApi, isDev, PLATFORM } from "@/store/global"; import * as services from "@/store/services"; import { useAtomValue } from "jotai"; import { OverlayScrollbars } from "overlayscrollbars"; import React, { createRef, useCallback, useEffect, useRef, useState } from "react"; import { debounce } from "throttle-debounce"; -import logoPng from "../../../public/logos/wave-logo.png"; import { Button } from "../element/button"; import { Tab } from "./tab"; import "./tabbar.less"; @@ -482,22 +481,23 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => { return tabIds.indexOf(tabId) === tabIds.indexOf(activetabid) - 1; }; - const tabsWrapperWidth = tabIds.length * tabWidthRef.current; - let waveLabel: React.ReactNode = null; - if (isDev()) { - waveLabel = ( -
- -
- ); - } else { - waveLabel = ( -
- -
- ); + function onEllipsisClick() { + getApi().showContextMenu(); } + const tabsWrapperWidth = tabIds.length * tabWidthRef.current; + const devLabel = isDev() ? ( +
+ +
+ ) : undefined; + const appMenuButton = + PLATFORM !== "darwin" ? ( +
+ +
+ ) : undefined; + function onUpdateAvailableClick() { getApi().installAppUpdate(); } @@ -519,7 +519,8 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => { return (
- {waveLabel} + {appMenuButton} + {devLabel}
{tabIds.map((tabId, index) => { diff --git a/frontend/types/custom.d.ts b/frontend/types/custom.d.ts index 2ad52d2da..cefba9438 100644 --- a/frontend/types/custom.d.ts +++ b/frontend/types/custom.d.ts @@ -58,7 +58,7 @@ declare global { getPlatform: () => NodeJS.Platform; getEnv: (varName: string) => string; - showContextMenu: (menu: ElectronContextMenuItem[], position: { x: number; y: number }) => void; + showContextMenu: (menu?: ElectronContextMenuItem[]) => void; onContextMenuClick: (callback: (id: string) => void) => void; onNavigate: (callback: (url: string) => void) => void; onIframeNavigate: (callback: (url: string) => void) => void;