Recreating the Github for Mac UI with Qt

maxart

Is it possible to mimic the appearance of the main window in the Mac App Store application using QML/Qt Quick? Or else, how could this be done?
Basically it consists of enlarging the title bar, and centering the traffic lights (capture: http://cl.ly/330416362y0y2r3N2a1t or even: http://cl.ly/0B3m282X3r1X1p2G312F ).

Would definitely appreciate the help!

ixSci

Yes, and it is quite simple. In your first image you can use 2 BorderImages{} for background and header and three custom created button from appropriate images.
Second image will have one more BorderImage{} for the footer.

maxart

Thanks for the reply ixSci!

So using BorderImage(s) will remove/overwrite the default title bar (the one available by default - http://cl.ly/0y10021m1D442O0I1x0h), or do I need to add/remove something elsewhere?

Thanks again!

ixSci

No, QtQuick is all about creation you should search for "qt frameless window mac os x" or something similar in google since it has nothing to do with QtQuick.
So you can create window of that appearance in QtQuick and show it in QDeclarativeView without standard frame which is drawn by Mac OS X

maxart

Thanks for the extra explanations! Really appreciated.
I'll give it a shot!

maxart

Here's a problem I have with this solution:
How can I know which theme the Mac user is using (Graphite/Blue), as the "traffic lights" will have to reflect the user's choice if I want my app to look properly native? (also, the traffic lights do not look the same in Snow Leopard and Lion, which is yet another issue)

Would there be a way I could get a tall title bar (similar to what's in http://flavio.tordini.org/minitube - also build with Qt), without having to try to replicate the behavior of the Mac native traffic lights myself?

maxart

HI again,

Any chance someone could share additional code snippets (or a simple demo app on Github?) where the traffic lights aren't re-recreated (but "just" moved down the default location?).

Thanks a lot for your help!

flaviotordini

Not sure what you're trying to do. Why do you want to "mimic" while you can have the real thing using QWidgets? Just create a QMainWindow and call @setUnifiedToolBarOnMac(true);@
Also add a QToolBar to the window and you'll get the "tall titlebar" you're looking for. Then you can use QML in the centralWidget of QMainWindow if you want to.