Hey, I'm the creator of UGUI a framework for NW.js. I just tested your project and with a one line change it works fine in NW.js.

Do you have plans to officially support NW.js, or be willing to accept pull requests regarding it. It would take very little effort to set this project up proper for NW.js. And maintenance would require a small amount of changes to your current automated grunt system.

If you've not used it before, they're very similar (except NW.js beats out Electron by a little bit in almost every category). You should try it out, of course you'll need to change your "Electron is the easiest way to build cross-platform desktop applications" line on the website after wards though... since ya know, it's not um... factual.

I'll go now.

When using a frameless-window, only toolbar-footer is draggable, I think we have to add

.toolbar-header {
   -webkit-app-region: drag;
}

By the way, photon is really awesome!

Using photon makes creating GUI a breeze, BUT, it looks really out of place when running such an app on Windows/Linux.

Any plans to support Windows themed UI elements ?

Hi,

If you look at native UI components in OSX, you can't highlight two list items at the same time. The experience feels really weird when I have a selected item and I click on another one and both get highlighted.

I see two solutions here:

1. Don't highlight on .list-group-item:active (Finder.app behaves like this in sidebar)
2. Remove highlight on .list-group:active .list-group-item.selected:not(:active) (Finder.app behaves like this with folder content)

The majority of mac users that browse via safari are likely still on safari 8. Doing away with the -webkit- prefix for flex related styles breaks the layout. You're not alone in this, I've seen several other recently launched sites with the same issue. Just thought I'd mention it.

It's all the more irritating - especially since, for whatever reason, the recently announced Yosemite Safari 9 update is not listed in the app store at the moment.

Hello,

In Photon, buttons have an active class available to them. It would be valuable if a disabled class was also available. An example of a disabled button can be seen in the Finder in OS X.

1. Open the Finder.
2. Click "Documents"
3. In the toolbar, you'll probably notice that the "Edit Tags" and "Share the selected items" buttons are disabled until you select one or more files.

In the "App Store" app in Mac OS, users can choose to "Download" or "Get" an app. Alternatively, a user can click the "v" button beside the word "Download" and "Get" to see more options. Options like: "Copy Link", "Tell a Friend", and "Share on Twitter".

It would be really nice if Photon supported split buttons.

First of all, this looks awesome. Cannot wait to use it.

I've followed the example, but I'm getting an error:

$ npm install
-
> [email protected] postinstall /Users/Steve/Downloads/photon-0.1-alpha/node_modules/electron-prebuilt
> node install.js

Downloading electron-v0.33.7-darwin-x64.zip
[============================================>] 100.0% of 37.93 MB (1.38 MB/s)
[email protected] node_modules/grunt-contrib-clean
└── [email protected]

[email protected] node_modules/grunt-contrib-copy
├── [email protected]
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/grunt-banner
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/grunt-contrib-sass
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/grunt-jekyll
└── [email protected] ([email protected])

[email protected] node_modules/grunt-contrib-concat
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/load-grunt-tasks
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/grunt-contrib-watch
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/time-grunt
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/grunt-contrib-cssmin
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/grunt
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/grunt-contrib-connect
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/grunt-html
├── [email protected]
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/grunt-sed
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected]

[email protected] node_modules/grunt-contrib-compress
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/electron-prebuilt
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])




$ npm start

> [email protected] start /Users/Steve/Downloads/photon-0.1-alpha
> electron example-components


npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.1.1
npm ERR! npm  v2.14.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `electron example-components`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'electron example-components'.
npm ERR! This is most likely a problem with the photon package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     electron example-components
npm ERR! You can get their info via:
npm ERR!     npm owner ls photon
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Steve/Downloads/photon-0.1-alpha/npm-debug.log

Along with an electron pop up saying:

The app provided is not a valid electron app, please read the docs on how to write one: https://github.com/atom/electron/tree/master/docs

Error: Cannot find module '/Users/Steve/Downloads/photon-0.1-alpha/example-components'

I realise it might just be because I haven't set anything up yet, I just presumed a basic boilerplate would work from the start.

Hey @connors,

This project looks awesome and super useful - we've built an application with Electron and I can see how helpful this framework will be. That said, I'm wondering if I could convince you to change the name.

Backstory - I run a company called Particle; we make open source hardware development kits for IoT (used to be called Spark). Our latest development kit is called the Photon, and it's pretty popular; if you google 'Photon' we're the first result after the Wikipedia page on Photons. Our IDE, Particle Dev, is on Github's list of projects built with Electron: http://electron.atom.io/

I worry that the name you've selected for this project will create confusion; although the projects do different things, they're both development tools. I'm wondering if I can convince you to change the name while the project is still young?

Thanks for considering!

I think a very common component in Desktop applications is Menu Bars and frankly, the one that Electron provides is kinda ugly.

I've been using angular-material lately and something like this would be nice, but much more compact. What I like most of photon is that is very compact in comparison to other css libraries/frameworks

Angular Material menu bar MenuBar

position: js/menu.js

// Add the listener
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('.js-context-menu').addEventListener('click', function (event) {
    menu.popup(remote.getCurrentWindow());
  })
})

TypeError: Cannot read property 'addEventListener' of null

We are having an error when running the template app. On menu.js in line 2 console raises the following error "Uncaught TypeError: Cannot destructure property 'Menu' of 'remote' as it is undefined."

Error: Cannot find module 'app'
Require stack:
- /photon-0.1.2-dist/template-app/app.js
- /photon-0.1.2-dist/template-app/node_modules/electron/dist/resources/default_app.asar/main.js
- 
    at Module._resolveFilename (internal/modules/cjs/loader.js:961:15)
    at Function.o._resolveFilename (electron/js2c/browser_init.js:257:919)
    at Module._load (internal/modules/cjs/loader.js:844:27)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/mnt/i/home/electr/photon-0.1.2-dist/template-app/app.js:1:11)
    at Module._compile (internal/modules/cjs/loader.js:1145:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1166:10)
    at Module.load (internal/modules/cjs/loader.js:981:32)
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot 

if I change to require('electron').app it still not working

yarn ok yarn start have this trouble.

When having a table row with td's that have checkboxes, input boxes, etc. it would be nice to be able to not have the blue highlight on click that seems to come standard. Is there an easy way to disable this on specific tables?