codesbiome / electron-react-webpack-typescript-2024

Electron React Webpack Typescript Boilerplate with Custom Window and Titlebar Menus.
MIT License
354 stars 78 forks source link

Multiple Window Close/Enlarge buttons #63

Closed LeonardoGentile closed 8 months ago

LeonardoGentile commented 10 months ago

Hello, I've just cloned the repo and launched the demo without editing any files and this is what I see in the generated window on macOs

image

As you can see the window has the default MacOs window buttons on the left AND the default Windows buttons on the right. Is this something expected on dev mode or it is due to the inclusion of the Custom Window module?

codesbiome commented 9 months ago

Hello @LeonardoGentile, thank you for reaching out.

This project is developed in Windows environment, that's why testing of these MacOS specific things was tricky.


As you can see the window has the default MacOs window buttons on the left AND the default Windows buttons on the right.

Default Traffic Light buttons you can hide using following after new BrowserWindow() declaration. (Reference)

src/main/appWindow.ts

  // Create new window instance
  appWindow = new BrowserWindow({ .... });

  // hides the traffic lights
  appWindow.setWindowButtonVisibility(false);

And you can change custom titlebar "Windows" buttons by using mac platform in appRenderer.tsx

<WindowFrame title='ERWT Boilerplate' platform='mac'>
LeonardoGentile commented 9 months ago

Thanks, I'm new to electron so I'll take a better look into this. But it would feel more natural as a user to show the standard MacOs traffic lights buttons in the app build for Mac os (while hiding the windows ones) and vice-versa if the app build target is Windows.

I guess this should be feasible but I'm not sure if it is/should be included in your boilerplate.