-
Notifications
You must be signed in to change notification settings - Fork 181
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: toggle application theme manually (#460)
Users can toggle the Console theme from the application menu. Console theme can be changed by one of the following ways: 1. change the work station appearance (f.e: system settings -> appearance -> light | dark | auto) 2. toggle the app theme from the application menu 3. use key shortcuts: for light theme: ```"darwin" ? "Alt+Cmd+L" : "Alt+Shift+L"``` for dark theme: ```"darwin" ? "Alt+Cmd+D" : "Alt+Shift+D"``` for auto theme: ```"darwin" ? "Alt+Cmd+A" : "Alt+Shift+A"``` The console will persist the user manual selection both when the console run as an electron application (using electron-store) and when running in the browser (playground) using local-storage . resolves: #2062
- Loading branch information
Showing
71 changed files
with
451 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
-1.85 KB
(93%)
console/app/e2e/sanity.test.ts-snapshots/explorer-tree-menu.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import { Updater } from "@wingconsole/server"; | ||
| import { | ||
| BrowserWindow, | ||
| dialog, | ||
| Menu, | ||
| nativeImage, | ||
| shell, | ||
| MenuItem, | ||
| } from "electron"; | ||
|
|
||
| import { ThemeMode } from "./config.js"; | ||
|
|
||
| let defaultMenuItems: MenuItem[]; | ||
|
|
||
| export const initApplicationMenu = () => { | ||
| // The default menu from Electron come with very useful items. | ||
| // File menu, which is the second entry on the list and Help menu (which is the last) are being modified | ||
| defaultMenuItems = Menu.getApplicationMenu()?.items!; | ||
| // remove default Help menu | ||
| defaultMenuItems?.pop(); | ||
| }; | ||
|
|
||
| export const setApplicationMenu = (options: { | ||
| publicPath: string; | ||
| onFileOpen: (file: string) => void; | ||
| onThemeModeChange: (themeMode: ThemeMode) => void; | ||
| updater: Updater; | ||
| themeMode: ThemeMode; | ||
| }) => { | ||
| const menuTemplateArray = [ | ||
| { | ||
| ...defaultMenuItems[0]!, | ||
| submenu: defaultMenuItems[0]!.submenu!.items.map((item) => ({ | ||
| ...item, | ||
| label: item.label.replace("@wingconsole/app", "Wing Console"), | ||
| })) as any, | ||
| }, | ||
| { | ||
| label: "File", | ||
| submenu: [ | ||
| { | ||
| label: "Open", | ||
| accelerator: "Command+O", | ||
| async click() { | ||
| const { canceled, filePaths } = await dialog.showOpenDialog({ | ||
| properties: ["openFile"], | ||
| filters: [{ name: "Wing File", extensions: ["w"] }], | ||
| }); | ||
| if (canceled) { | ||
| return; | ||
| } | ||
|
|
||
| const [wingfile] = filePaths; | ||
| if (wingfile) { | ||
| options.onFileOpen(wingfile); | ||
| } | ||
| }, | ||
| }, | ||
| { type: "separator" }, | ||
| { | ||
| label: "Close Window", | ||
| accelerator: "Command+W", | ||
| click() { | ||
| BrowserWindow.getFocusedWindow()?.close(); | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| ...defaultMenuItems[2]!, | ||
| }, | ||
| { | ||
| ...defaultMenuItems[3]!, | ||
| submenu: [ | ||
| ...defaultMenuItems[3]!.submenu!.items.filter( | ||
| (item) => item.label !== "Toggle Developer Tools", | ||
| ), | ||
| { type: "separator" }, | ||
| { | ||
| type: "submenu", | ||
| label: "Theme", | ||
| submenu: [ | ||
| { | ||
| label: "Light Theme", | ||
| type: "checkbox", | ||
| checked: options.themeMode === "light", | ||
| accelerator: | ||
| process.platform === "darwin" ? "Alt+Cmd+L" : "Alt+Shift+L", | ||
| click: async () => { | ||
| options.onThemeModeChange("light"); | ||
| }, | ||
| }, | ||
| { | ||
| label: "Dark Theme", | ||
| type: "checkbox", | ||
| checked: options.themeMode === "dark", | ||
| accelerator: | ||
| process.platform === "darwin" ? "Alt+Cmd+D" : "Alt+Shift+D", | ||
| click: async () => { | ||
| options.onThemeModeChange("dark"); | ||
| }, | ||
| }, | ||
| { | ||
| label: "System Appearance", | ||
| type: "checkbox", | ||
| checked: options.themeMode === "auto", | ||
| accelerator: | ||
| process.platform === "darwin" ? "Alt+Cmd+A" : "Alt+Shift+A", | ||
| click: async () => { | ||
| options.onThemeModeChange("auto"); | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ...defaultMenuItems.slice(4), | ||
| { | ||
| role: "help", | ||
| submenu: [ | ||
| { | ||
| label: "Learn More", | ||
| click: async () => { | ||
| await shell.openExternal("https://winglang.io"); | ||
| }, | ||
| }, | ||
| { | ||
| label: "Documentation", | ||
| click: async () => { | ||
| await shell.openExternal("https://docs.winglang.io"); | ||
| }, | ||
| }, | ||
| { | ||
| label: "Open an Issue", | ||
| click: async () => { | ||
| await shell.openExternal( | ||
| "https://github.com/winglang/wing/issues/new/choose", | ||
| ); | ||
| }, | ||
| }, | ||
| { | ||
| label: "Check for Updates", | ||
| enabled: ["initial", "update-not-available", "error"].includes( | ||
| options.updater.status().status, | ||
| ), | ||
| click: async () => { | ||
| await options.updater.checkForUpdates(); | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| if (process.platform !== "darwin") { | ||
| // remove the first menu item on windows and linux | ||
| menuTemplateArray.shift(); | ||
| } | ||
|
|
||
| const appMenu = Menu.buildFromTemplate(menuTemplateArray as any); | ||
| Menu.setApplicationMenu(appMenu); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { EventEmitter } from "node:events"; | ||
|
|
||
| import { Config } from "@wingconsole/server"; | ||
| export type ThemeMode = "light" | "dark" | "auto"; | ||
| export class AppConfig extends EventEmitter implements Config { | ||
| config: Record<string, unknown>; | ||
| constructor() { | ||
| super(); | ||
| this.config = { | ||
| themeMode: "auto", | ||
| }; | ||
| } | ||
| set(key: string, value: unknown): void { | ||
| this.config[key] = value; | ||
| this.emit("config-change"); | ||
| } | ||
| get<T>(key: string): T { | ||
| return this.config[key] as T; | ||
| } | ||
| addEventListener(event: "config-change", listener: () => void): void { | ||
| this.addListener(event, listener); | ||
| } | ||
| removeEventListener(event: "config-change", listener: () => void): void { | ||
| this.removeListener(event, listener); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.