photon icon indicating copy to clipboard operation
photon copied to clipboard

fix for Electron App

Open ellerbrock opened this issue 7 years ago • 1 comments

Problems:

1.) running npm start in template-app throws an error that Module app can't be found.

Versions: - Node: 6.2.2 - npm: 3.10.3

Output:

template-app#> npm start
template-app#> electron .

App threw an error during load
Error: Cannot find module 'app'
    at Module._resolveFilename (module.js:438:15)

2.) Window Setting: `'title-bar-style': 'hidden' not working. Also the Window content doesn't fit properly.

[window bug]

More Details can be found here: frameless-window.

Bugfix 1:

Run Electron in a frameless window and add Drag Support to class toolbar-header.

app.js:

app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    frame: false,
    width: 740,
    height: 470
  });

index.html:

add: style="-webkit-app-region: drag"

<header class="toolbar toolbar-header" style="-webkit-app-region: drag">
  <h1 class="title">Photon</h1>
</header>

Problem: In this case we can move the Window but the close, minimize and maximize buttons are missing and need to be implemented later on.

Bugfix 2:

Start Electron in a normal Window and delete the HTML toolbar.

app.js:

app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 740,
    height: 470
  });

index.html:

delete:

<header class="toolbar toolbar-header">
  <h1 class="title">Photon</h1>
</header>

Hope this help you guys. And thanks for the awesome Framework for Electron, love it! Keep up with the great work.

Cheers Maik Ellerbrock

ellerbrock avatar Jul 10 '16 19:07 ellerbrock

please rebase

trufae avatar Apr 23 '17 22:04 trufae