Add an hamburger icon to a vertical QToolBar

JulienMaille · 15 Sept 2015, 21:46

https://www.google.fr/search?q=chrome+hamburger+menu&tbm=isch&biw=1920

To be honest I don't like this kind of implementation: hiding all the mess behind a button. But I would enjoy using simplified toolbars that only show icons but can be extended with text for newbies (exactly like the gif above in the first post)

mrjj · wrote on 15 Sept 2015, 21:46

@JulienMaille
Ahh I thought that the expanding part was also part of "burger", but now I understand.
Yes, I agree, its a neat way for compact layout and then can show text when needed.
Thx for info.

Chris Kawa · 16 Sept 2015, 06:29

I thought this could be a nice exercise. This is my stab at it: burger-menu.
Could use some more customization options but the basic functionality is there.

mrjj · wrote on 16 Sept 2015, 06:29

@Chris-Kawa
Very cool !
And it uses actions so actually pretty complete.
Even has animation :)

note:
to make it compile on Win 7, mingw, I had to add
QMAKE_CXXFLAGS += -std=c++0x
to .pro
and const to
void setBurgerIcon(QIcon& icon);
or it did not "see" it.

Chris Kawa · 16 Sept 2015, 07:52

QMAKE_CXXFLAGS += -std=c++0x

Ah... I wish gcc made this the default already ;) Btw. This option is not recognized by MSVC so it's better to add CONFIG += c++11 instead, to let qmake figure out the right flags for the compiler.

and const to void setBurgerIcon(QIcon& icon);

Yup, late night coding ;) Fixed. Thanks!

mrjj · wrote on 16 Sept 2015, 07:52

Yeah, when trying code that use lambdas and its not enabled, it really explodes.

Oh, so CONFIG += xx is better to use overall ?

Late night coding is the best :)

I wonder why is was not named more-menu or something like that as burger-menu is so strange. I mean in general, not your widget.

Chris Kawa · 16 Sept 2015, 08:19

Oh, so CONFIG += xx is better to use overall ?

Yes, because it will add the flag you mentioned when it's needed (like for gcc) and do nothing when it's not needed (e.g. MSVC doesn't have language version flags, they have the latest they support always enabled).

I wonder why is was not named more-menu or something like that

It has many names e.g. side drawer, navigation drawer, side menu... hamburger menu is referring to the three bars icon that sorta looks like hamburger if you put your imagination to it :)
It's a controversial pattern. Apple discourages it. Windows has adopted it widely in their store apps. Designers all over can't seem to agree on whether it's a good thing or not. It's the same story as with the ribbon some time ago. I guess we are still looking for that holy grail in menu design :)

mrjj · wrote on 16 Sept 2015, 08:19

ahh so that is is much smarter. Will use that from now on.

Well with all design things, they often disagree, also the users. I hate the new look in windows 8+ as I find it too flat and lifeless but my Colleague loves it and find it nice looking.
I think there can only exist a Holy grail for interface design if we remove the users ;)

JulienMaille · wrote on 16 Sept 2015, 10:12

Good job Chris,
Unfortunately I would really like to achieve this by subclassing QToolBar instead of creating a brand new class.
Do you see a way to align each item properly within the toolbar?

Chris Kawa · 21 Sept 2015, 15:25

Do you see a way to align each item properly within the toolbar?

The alignment of text on QToolButton seems to be style dependent, so the only way I can think of would be to provide a QStyle subclass and draw the QStyle::CE_ToolButtonLabel the way you want. There might be an easier way but I don't know of any.

JulienMaille · wrote on 21 Sept 2015, 15:25

@Chris-Kawa said:

The alignment of text on QToolButton seems to be style dependent, so the only way I can think of would be to provide a QStyle subclass and draw the QStyle::CE_ToolButtonLabel the way you want. There might be an easier way but I don't know of any.

I had a look at QStyle::CE_ToolButtonLabel and I have the feeling this is not the place to achieve left alignement. The rect of the QToolButton is already centered at this step and all you can do is change the way the text and pixmap are drawn within the rect.
I suppose that I should modify the rendering at a higher level (ie. the toolbar and not the toolbaritems) but can't find where.
Do you have any experience to share?
Thanks a lot

Chris Kawa · wrote on 21 Sept 2015, 16:48

My comment was on a hunch, but I just had a look at QCommonStyle.cpp and it is indeed the place where the text is centered inside a tool button. Take a look at case CE_ToolButtonLabel: in QCommonStyle::drawControl.
If you meant aligning of the button itself on the toolbar then yeah, I guess you'd have to take a look at how QToolBar is implemented and does it lay the items itself or delegates that to the style. I never had the need to modify it so I don't know.

Btw. Why does it have to be a QToolBar? I think functionality wise it's closer to a QTabBar if anything. Why not a custom class if it does what you need?