Kitematic: Linux titlebar control buttons

[nshiell]

Expected behavior

When I start Kitematic on Linux the close, maximize and minimize buttons should look like the native buttons

Actual behavior

When I start Kitematic on Linux the close, maximize and minimize buttons look like OSX buttons

Information about the Issue

Mainly CSS fixes, I have forked this repo (branch: linux-support-tweaks) and have added some Ubuntu Unity style buttons (that I got by screen capturing my screen and cropping them).

Steps to reproduce the behavior

1. Install Kitematic as per https://github.com/docker/kitematic/wiki/Early-Linux-Support
2. Run

[adomenech73]

Hi @nshiell, I've observed that and also the description that apears on a generated package is extracted from package.json and makes reference to MacOSX. Seems that the initial development of the tool was mainly focused on that OS

Are you saying that titlebar control buttons are static images showed by css?

It's a bit deceiving I thougt electron could manage better window manager integration

[adomenech73]

I've understood better now your question about node v4.2.2, you were referring to that early Linux support link. Actually, I'm using nvm so if you need me to verify the packaging for a determined node version it will be easy for me

[FrenchBen]

Although Windows driven, there's a PR to modify this:
https://github.com/docker/kitematic/pull/1559

Help move it along so that it uses native buttons :D

[nshiell]

@FrenchBen I was looking at this from a CSS perspective, to see if there are any easy wins to be able to get this to look more native on Linux.

The way the close, maximize and minimize buttons are drawn out is to emulate them using CSS, they are not technically native.

Looking at the code I can see we use the same LESS files for OSX & Windows, I forked the code and wrote the platform name into a css class on the window so we can target different opperating systems and have the css seperate.

I wonder if this strategy would help the Windows version?

I have not looked too much at menubars on Linux #1559 seems to be about menu bars on MS Windows.

Ofcourse one thing to be aware of is there number of GUIs, I found that Kitematic seems to work well using KDE (Plasma 5), I tried it in Ubuntu (Unity) inside Virtualbox, that seems to struggle.

[nshiell]

@adomenech73 the titlebar controlls are divs styled by CSS, there is a transparent png for the actual icon like the "X" but the button colors and hover states are done by CSS

[FrenchBen]

@nshiell having different CSS per OS would be ok IMHO as long as the experience is 'similar' - When are you thinking of pushing a PR?

[adomenech73]

@FrenchBen agree with that aswell, I've seen @Bigguy34 work as you pointed and it's a more ambitious aproximation, I like it, but I see the complexity it implies and just think it will take some time.

@nshiell I dont have too much css experience, but I think I can learn on the way so if you find I can help for testing or whatever on that PR, feel free! I'd be pleased