search

connors / photon

The fastest way to build beautiful Electron apps using simple HTML and CSS
photonkit.com
MIT License
10.01k stars 580 forks source link

Native window button (Contribution enquiries) #59

Open gsouf opened 8 years ago

gsouf commented 8 years ago

Didnt find add close, minimize, maximize buttons in the title bar in photon. That's why this issue aims to discuss about.

Their are 2 aspects abouts this:

  1. Theme integration (css, styling)
  2. action automation (js)

    1. Theme integration

Theme integration would allow offer way to create these buttons. E.g (view top right buttons):

photon_002

That raises a problem: each desktop/OS has it's one button layout, colors, styles... That's why buttons should be themable through custom classes e.g action-close but they should remain customable if he developer wants to do some weird button implementations (for instance the google chrome button that allows to login google account from the title bar).

2. Javscript integration

The second question. I'm only contributing, I have no precise idea of your goal with photon. Do you want to provide a feature rich javascript environment ?

In this case we could offer some shortcut to make a button closing the window (show bellow for example).

Implementation example

I provided an example of implementation: https://github.com/gsouf/photon/commit/0313cccd6d505117730199210fd59bd76817b807

The buttons are defined in the header next to the title: https://github.com/gsouf/photon/commit/0313cccd6d505117730199210fd59bd76817b807#diff-434fc7c230c4addfe39300dedd6074edR21

Buttons can be bind automatically from markup: https://github.com/gsouf/photon/commit/0313cccd6d505117730199210fd59bd76817b807#diff-441d9fb1b9d314b7b48820c2890acc76R20

Please note that the implementation I provided is only a draft that was developed fastly in order to provide a concret example.

developit commented 8 years ago

Doesn't Electron itself provide these and overlay them onto frameless apps?

gsouf commented 8 years ago

@developit I dont think so, or I didnt find this.

parro-it commented 8 years ago

I think it works only for OSX, using title-bar-style:hidden. AFAIK it doesn't work with frameless windows.

connors commented 8 years ago

I was trying to avoid reimplementing this but it might be unavoidable. Does anyone know for sure if this is completely broken in Windows?

I know in OSX, the "traffic lights" work automatically except when frameless windows are used.

parro-it commented 8 years ago

I don't know on windows. It does not work for sure in Lubuntu.

gsouf commented 8 years ago

@connors dont know if the term "broken" is the good one, but at least frameless windows are definitively not the same as the OSX onlytitle-bar-style:hidden.

Maybe that it can be good to implement this for anyone that would like to build a frameless windows with some additional control buttons ? I mean, this is leighweight and functional, should be though, isn't it ?

kevinmartin commented 8 years ago

OS X has three types of frameless windows: frame: false, 'title-bar-style': 'hidden', and 'title-bar-style': 'hidden-inset'. All show the window without a border, shadow, frames, and title bar. While the first one also hides the traffic lights, the other two show them.

The difference between hidden and hidden-inset is that hidden-inset shows the traffic lights a little bit more inset (lower on the page) than hidden. This is useful for applications that have a thicker header (ie. Chrome). The other thing is that these two options only work on Yosemite (v10.10) and higher. They also produce some bugs that have yet to be fixed. Links below: