From e30748109c86ddd7c9c573295ac5801c767a357e Mon Sep 17 00:00:00 2001 From: Mike Sawka Date: Tue, 5 Mar 2024 12:52:37 -0800 Subject: [PATCH] Minor Fixes (border, history line background), Toggle DevUI (#379) * restore sidebar right border, fix line-container background color for history * add a dev-only 'Toggle Dev UI' switch in the View Menu (for testing UI and screenshots, etc.) --- src/app/app.tsx | 2 +- src/app/history/history.less | 1 - src/app/sidebar/sidebar.less | 1 + src/electron/emain.ts | 95 +++++++++++++++++++----------------- src/electron/preload.js | 1 + src/models/model.ts | 5 ++ src/types/custom.d.ts | 1 + 7 files changed, 60 insertions(+), 46 deletions(-) diff --git a/src/app/app.tsx b/src/app/app.tsx index 050c1df30..63f36b92c 100644 --- a/src/app/app.tsx +++ b/src/app/app.tsx @@ -32,7 +32,7 @@ class App extends React.Component<{}, {}> { constructor(props: {}) { super(props); - if (GlobalModel.isDev) document.body.className = "is-dev"; + if (GlobalModel.isDev) document.body.classList.add("is-dev"); } @boundMethod diff --git a/src/app/history/history.less b/src/app/history/history.less index e336d5490..6c8ed2fda 100644 --- a/src/app/history/history.less +++ b/src/app/history/history.less @@ -257,7 +257,6 @@ .line-container { padding: 0px 10px 10px 10px; overflow-x: auto; - background-color: var(--term-black); } .line-context { diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less index 7695dfa1a..d504be774 100644 --- a/src/app/sidebar/sidebar.less +++ b/src/app/sidebar/sidebar.less @@ -11,6 +11,7 @@ font-size: var(--sidebar-font-size); font-family: var(--base-font-family); font-weight: var(--sidebar-font-weight); + border-right: 1px solid var(--app-border-color); .title-bar-drag { -webkit-app-region: drag; diff --git a/src/electron/emain.ts b/src/electron/emain.ts index c4f199212..cf550ed7d 100644 --- a/src/electron/emain.ts +++ b/src/electron/emain.ts @@ -34,6 +34,7 @@ let wasActive = true; let wasInFg = true; let currentGlobalShortcut: string | null = null; let initialClientData: ClientDataType = null; +let MainWindow: Electron.BrowserWindow | null = null; checkPromptMigrate(); ensureDir(waveHome); @@ -199,6 +200,55 @@ function readAuthKey(): string { } const reloadAcceleratorKey = unamePlatform == "darwin" ? "Option+R" : "Super+R"; const cmdOrAlt = process.platform === "darwin" ? "Cmd" : "Alt"; +let viewSubMenu: Electron.MenuItemConstructorOptions[] = []; +viewSubMenu.push({ role: "reload", accelerator: reloadAcceleratorKey }); +viewSubMenu.push({ role: "toggleDevTools" }); +if (isDev) { + viewSubMenu.push({ + label: "Toggle Dev UI", + click: () => { + MainWindow?.webContents.send("toggle-devui"); + }, + }); +} +viewSubMenu.push({ type: "separator" }); +viewSubMenu.push({ + label: "Actual Size", + accelerator: cmdOrAlt + "+0", + click: () => { + if (MainWindow == null) { + return; + } + MainWindow.webContents.setZoomFactor(1); + MainWindow.webContents.send("zoom-changed"); + }, +}); +viewSubMenu.push({ + label: "Zoom In", + accelerator: cmdOrAlt + "+Plus", + click: () => { + if (MainWindow == null) { + return; + } + const zoomFactor = MainWindow.webContents.getZoomFactor(); + MainWindow.webContents.setZoomFactor(zoomFactor * 1.1); + MainWindow.webContents.send("zoom-changed"); + }, +}); +viewSubMenu.push({ + label: "Zoom Out", + accelerator: cmdOrAlt + "+-", + click: () => { + if (MainWindow == null) { + return; + } + const zoomFactor = MainWindow.webContents.getZoomFactor(); + MainWindow.webContents.setZoomFactor(zoomFactor / 1.1); + MainWindow.webContents.send("zoom-changed"); + }, +}); +viewSubMenu.push({ type: "separator" }); +viewSubMenu.push({ role: "togglefullscreen" }); const menuTemplate: Electron.MenuItemConstructorOptions[] = [ { role: "appMenu", @@ -223,48 +273,7 @@ const menuTemplate: Electron.MenuItemConstructorOptions[] = [ }, { role: "viewMenu", - submenu: [ - { role: "reload", accelerator: reloadAcceleratorKey }, - { role: "toggleDevTools" }, - { type: "separator" }, - { - label: "Actual Size", - accelerator: cmdOrAlt + "+0", - click: () => { - if (MainWindow == null) { - return; - } - MainWindow.webContents.setZoomFactor(1); - MainWindow.webContents.send("zoom-changed"); - }, - }, - { - label: "Zoom In", - accelerator: cmdOrAlt + "+Plus", - click: () => { - if (MainWindow == null) { - return; - } - const zoomFactor = MainWindow.webContents.getZoomFactor(); - MainWindow.webContents.setZoomFactor(zoomFactor * 1.1); - MainWindow.webContents.send("zoom-changed"); - }, - }, - { - label: "Zoom Out", - accelerator: cmdOrAlt + "+-", - click: () => { - if (MainWindow == null) { - return; - } - const zoomFactor = MainWindow.webContents.getZoomFactor(); - MainWindow.webContents.setZoomFactor(zoomFactor / 1.1); - MainWindow.webContents.send("zoom-changed"); - }, - }, - { type: "separator" }, - { role: "togglefullscreen" }, - ], + submenu: viewSubMenu, }, { role: "windowMenu", @@ -277,8 +286,6 @@ const menuTemplate: Electron.MenuItemConstructorOptions[] = [ const menu = electron.Menu.buildFromTemplate(menuTemplate); electron.Menu.setApplicationMenu(menu); -let MainWindow: Electron.BrowserWindow | null = null; - function getMods(input: any): object { return { meta: input.meta, shift: input.shift, ctrl: input.control, alt: input.alt }; } diff --git a/src/electron/preload.js b/src/electron/preload.js index 2c0114ca4..90ea60e1c 100644 --- a/src/electron/preload.js +++ b/src/electron/preload.js @@ -37,4 +37,5 @@ contextBridge.exposeInMainWorld("api", { contextScreen: (screenOpts, position) => ipcRenderer.send("context-screen", screenOpts, position), contextEditMenu: (position, opts) => ipcRenderer.send("context-editmenu", position, opts), onWaveSrvStatusChange: (callback) => ipcRenderer.on("wavesrv-status-change", callback), + onToggleDevUI: (callback) => ipcRenderer.on("toggle-devui", callback), }); diff --git a/src/models/model.ts b/src/models/model.ts index 3e26a3dbc..8f23d56e1 100644 --- a/src/models/model.ts +++ b/src/models/model.ts @@ -135,6 +135,7 @@ class Model { this.clientId = getApi().getId(); this.isDev = getApi().getIsDev(); this.authKey = getApi().getAuthKey(); + getApi().onToggleDevUI(this.toggleDevUI.bind(this)); this.ws = new WSControl(this.getBaseWsHostPort(), this.clientId, this.authKey, (message: any) => { const interactive = message?.interactive ?? false; this.runUpdate(message, interactive); @@ -205,6 +206,10 @@ class Model { return (window as any).GlobalModel; } + toggleDevUI(): void { + document.body.classList.toggle("is-dev"); + } + bumpRenderVersion() { mobx.action(() => { this.renderVersion.set(this.renderVersion.get() + 1); diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts index c43cacb02..c7f561b5f 100644 --- a/src/types/custom.d.ts +++ b/src/types/custom.d.ts @@ -910,6 +910,7 @@ declare global { contextEditMenu: (position: { x: number; y: number }, opts: ContextMenuOpts) => void; onWaveSrvStatusChange: (callback: (status: boolean, pid: number) => void) => void; getLastLogs: (numOfLines: number, callback: (logs: any) => void) => void; + onToggleDevUI: (callback: () => void) => void; }; }