search

docker / kitematic

Visual Docker Container Management on Mac & Windows
https://kitematic.com
Apache License 2.0
12.25k stars 1.41k forks source link

Linux titlebar control buttons #1679

Open nshiell opened 8 years ago

nshiell commented 8 years ago

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).

kitematic-1

Steps to reproduce the behavior

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

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

@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